[stevenpetryk]

Shameless plug for my React library for creating similar-looking, interactive visualizations on the web. Highly inspired by 3blue1brown/manim's style. Less focused around animation, more focused on interaction. :)

https://mafs.dev/

Edit: probably needs a bit of chores done, especially around typescript declaration organization. I built it during a brief 3-week funemployment last year. Side projects are hard!

[dxbydt]

Your example on Projectile motion and Riemann sum is quite nice! I am going to share it with a few kids I work with. Thank you for creating this.

[pc86]

Haven't looked at the code yet but the animations/interactivity is gorgeous.

[da39a3ee]

That looks like a really nice project. Are you familiar with Mathbox https://github.com/unconed/mathbox?

[Uehreka]

I’m pretty sure mathbox got abandoned when mathbox2 came out (understandably, it’s mostly one guy building it). But then mathbox2 appears to be abandoned now, and last time I tried to use it (a couple years ago) the coffeescript would no longer compile.

It was a really visionary piece of work, it’s a bummer to see it fall apart like this, and I don’t think anything has come out since that really replaces it (though manim does look cool).

[stevenpetryk]

Nope! I like Three.js though. These visualizations are pretty intense.

[tenaciousDaniel]

This is great, do you use anything under the hood? D3/ThreeJS?

[jimmySixDOF]

I think there is a lot possible with a ThreeJS approach for DataViz. For instance there is a project [1] to have R implemented in A-Frame [2] (a simplified HTML like framework for ThreeJS). 3D in AR/VR is definitely a whole new visual language space for education such as the work by FlowImmersve's TicTok Data Guy [3].

[1] https://github.com/ACEMS/r2vr

[2] https://aframe.io/

[3] https://www.tiktok.com/@the.data.guy

[stevenpetryk]

SVG. It's remarkably powerful given that it supports arbitrary linear transformations and all sorts of computer graphics things.

[westoncb]

Can anyone give a brief explanation of what it means to use SVG in this context?

I think of it as a file format, but I'm assuming no files are involved here. Aside from that I've noticed the contents of SVG files look similar to the 2d canvas operations—which to my mind seems like the natural thing to use for something like this—so why use SVG instead? And is there any relationship between canvas drawing and SVG?

[stevenpetryk]

SVG works much more naturally with React, since it’s able to be managed via the DOM. Doesn’t have to be an <img />.

[remram]

JavaScript can write SVG just like it writes HTML. Your React render() can return <svg><rect ... /></svg> as easily as <div><p>...</p></div>

[tenaciousDaniel]

Yep, svg + react = declarative graphics. I love it. I used it to replace D3 in a project I worked on last year and no regrets at all.

[nighthawk454]

glancing at the code, it appears to just be SVG. and pretty cleanly at that

[6gvONxR4sf7o]

That looks super clean. Very cool.