D3.js Example Using React

[refactornator]

Not sure if this is the right place to ask, but are there any examples of using React to render a visualization created in D3.js?

It seems like React's Virtual DOM could really speed up animations and transitions used in visualizations like the Force Directed Graph. D3.js just draws SVG, so as long as React can manipulate SVG like DOM it should work, right? I'm still a React newb, so just looking for any suggestions to get me started.

[zpao]

https://github.com/facebook/react-art is another project we have that bridges React and ART (https://github.com/sebmarkbage/art/), which uses SVG or even canvas to render. It should be possible to use D3, though I'm not sure anybody has attempted yet. If you're interested in giving it a shot, react-art should be a good reference.

[refactornator]

Cool, this looks very useful.

Thanks

[vjeux]

Closing as this is not actionable :)

[grssnbchr]

Might be of interest: http://bl.ocks.org/herrstucki/9204795

[slashdotdash]

I've written about combining React with D3 to create reusable charting components with example bar and line charts.

Examples

• Bar chart
• Stacked Bar Chart
• Line Chart

[dhruvbhatia]

The above links are helpful, thanks for sharing.

It would be great to see a full blown example of React + D3 + D3 events (such as tooltips on hover), as all current examples I've found appear to just be for static outputs (no event handlers).

[hunterloftis]

+1 @dhruvbhatia

[JMStewart]

If anyone is interested, I created a demo using a D3 force layout and rendering with React.
http://bl.ocks.org/JMStewart/f0dc27409658ab04d1c8
I've been using D3 for quite a while, but I'm completely new to React, so there might be better ways to do what I did, but in my example using React is actually visibly slower that just using D3 to manipulate the DOM directly. I used @slashdotdash's excellent examples above as a template.

[knuton]

@JMStewart Just a quick thought (which probably you are already aware of): In your React example, you are creating a complex hierarchy of objects which are used to determine the required DOM mutations in each tick, whereas in the D3 example the operation is already almost optimal, as it directly mutates the DOM via an existing selection. This is almost optimal, because in a typical force layout simulation almost all nodes actually require an update in each tick.

If you'd mutate state on existing React components instead of starting from scratch each time, I'd expect improved performance.

[sophiebits]

This is pretty much a worst case for React because you're mutating the entire DOM on every tick so you don't gain anything from the diffing. I personally find the React example easier to reason about even in a simple example like this, but with hundreds of nodes updating on each frame you may find that it's better to do the dom manipulations by hand.

[jefffriesen]

@spicyj
Do you mind explaining why, in this worst case, React is slower than D3 using pre-defined selections and direct DOM manipulation?

And could it be improved by immutable data structures and/or RAF batching? I've started building an app with lots of charts transitioning on every action (similar to dc.js). Basically a worst-case scenario.