I built grafar to visualize maths on the web

I just open-sourced my library for mathematical (and data) visualization, grafar. If you need to plot functions in a browser, or even draw charts with lots of data, you might find it useful, and here's why:

• Full 3D support via WebGL
• Simple API
• Reactive computations for effortless animations and interactivity

Just to show you how easy it is to get started, we'll plot a parametric helix together. You might play along in a codesandbox.

A parametric surface has 2 parameters, let's call them p and q:

const p = grafar.range(-2, 2, 500).select();
const q = grafar.range(0, 1, 2).select();

We define each of them to be a range: p in [-2, 2], q in [0, 1]. A this point, p and q basically hold numeric arrays, nothing too fancy.

Now, we map these parameters to the normal x,y,z coordinates:

const xp = grafar.map([p, q], (p, q) => Math.cos(8 * p) * q);
const yp = grafar.map([p, q], (p, q) => Math.sin(8 * p) * q);

The neat thing here is how grafar knows that both p and q represent a degree of freedom, and calls our function for every combination of p and q. What about z? It's equal to p, so no need to map it.

Now we only have to draw the graph on a page. For this, we create a panel in some DOM node, then pin our (x,y,z) to it:

const container = document.getElementById("app");
const panel = grafar.panel(container);
grafar.pin([xp, yp, p], panel);

And here's what we get with these 7 lines of code:

Interested? Learn more in the docs