This D3 plugin can now be found at Olical/d3-react.
The following graph is built using D3. It is converted into React elements which are rendered into the document. I am yet to try animations or check how fast this process is.
This was born from not liking the way D3 sits within React, it’s a little island of state that I want to blow out of the water. My only gripe with D3 is that I wish it was essentially a React render function. Props go in, ReactElements come out. Simple.
I’ll experiment further, probably on this page or subsequent ones.
And now here’s my attempt at porting over the particles example from mbostock, the creator of D3. It doesn’t use D3 to do the animation, it’s just a simple interval that mutates the data, but it still looks really cool.
Remember, this is D3 building SVG that is rendered by React. We’re not using D3 to add and remove elements, that’s React’s job. I don’t think this has ever been done before.
Maybe we could hook into React’s animation tooling? Any suggestions on how we can make this even more awesome?
If this used tweening it would look so much better.