D3 and React — A Design Pattern for Fully Responsive Charts
Getting you on your way to building fully responsive D3 charts inside of React. Part 1: Dimensions.
This is the first of three articles where I’ll show you how to build fully responsive D3 charts inside of React. Here is a demo of what we will be building, and you can find the complete source code here on Github.
Strategy
I’ve found the best way to combine D3 and React is to create a clear conceptual divide between the two libraries; React should have ‘ownership’ over the entire DOM, except for a small space where D3 is in full control. I like to think of this as if we’re dividing the DOM up into ‘ReactLand’ and ‘D3Land’. Using this approach means that implementing the D3 General Update Pattern via d3-selections is relatively trivial. Also transitioning SVG elements from one state to another — whether that be to show changes in the underlying data-joins, or to smoothly respond to changes in the dimensions of the viewport — is also relatively trivial. When I say “relatively trivial,” I mean in comparison to trying to accomplish these things solely inside of React by having React do the rendering of all of a charts’ elements. It turns out that emulating D3 transitions and the D3 ‘General Update Pattern’ using only React is…
