thoughtspile / grafar

Reactive multidimensional math & data visualization for the web.

My name is Vladimir, nice to meet you!

• I build web things and lead teams at large companies.
• As an engineer, I specialize in React / svelte frontends, node.js and, generally, JS / TS.
• Interested in web development? Check out my blog at blog.thoughtspile.tech
• I study Machine Learining at ITMO University. We could connect on LinkedIn if you want to.

Here are some things I built:

• 🦛 hippotable — view and analyze data in your browser.
• 📈 grafar — real-time 3D visualization.
• Fighting for a world with less JS:
  • 🤏 awesome-tiny-js, assorted JS libraries under 2 kB.
  • 🧨 banditypes, the smallest JS / TS validation library.
  • 🔒 banditstash, a 500-byte localStorage helper.

Like my work? Buy me a coffee ☕

grafar's Issues

Pan-by-default controls on 2D panels

2D panels use the same OrbitControl as 3D ones, but with fixed angle — this means that they can only be scaled, not moved around. Panning would make much more sense as the default behavior

Middle button pan?

This project looks amazing.

Enabling a middle button click to pan would feel super intuitive for those who regularly use popular 3d software.

Research alternate WebGL wrappers

Three is a fat dependency with many features we don't need. Some candidates would be:

• https://github.com/regl-project/regl
• https://github.com/oframe/ogl
• https://github.com/greggman/twgl.js
• https://github.com/vaneenige/phenomenon
• https://github.com/evanw/lightgl.js

Show error message when WebGL is not supported

Currently, grafar (threejs, to be precise) explodes in runtime when a browser does not support WebGL. Even though WebGL is well supported, an error message should be shown to the user. We should also allow custom error messages via a global setting.

Touch-friendly panel controls

The orbit controls on 3d panels interfere with scrolling on mobile, as noted in the comments of the introductory hn post. It would be great to use some less invasive orbit gesture on touch devices, like a 2-finger pan.

Support different cameras for rendering

Grafar uses THREE.PerspectiveCamera for rendering, and there is no way to override it. For some cases OrthographicCamera might work better.

Proposal: accept { camera: THREE.Camera } option in grafar.panel, defaulting to PerspectiveCamera

related: #2

Tree-shake lodash

We rely on lodash object (import * as _ from 'lodash'), which brings a lot of unneeded code to the project. It would be nice to either use native equivalents, eg _.extend -> Object.assign, or import get from 'lodash/get'. import { get } from 'lodash' would not cut it yet, since we don't have a es-module build.

Here's a list of 10 files currently using lodash

Reanimate examples

The /examples folder has a ton of examples, but some are plain broken, some import grafar from the wrong place, and some are written for an older version. Moreover, some examples so similar there is no value in having both of them around. Once the examples are cleaned, we could turn them into a gallery a la d3 or threejs

This is a great place to start if you want to play with grafar and help the library move forward.

Add test infrastructure

I've been neglecting unit tests for far too long, and now it's time to fix this. It would be cool to add plain jest tests!

Update three.js

Three.js is currently at r128, while we're stuck with r81. It would be nice to upgrade for better performance and bugfixes. However, since three has probably had many breaking changes in the last 5 years, it might be best to go slow and upgrade gradually. Also see three's releases.

No hurry though, as the current version still works.