Why React and D3
The catch is that many frameworks have attempted this: everything from Angular to Backbone and jQuery plugins. But where jQuery plugins get become messy, Angular depends too much on HTML structure, and Backbone needs a lot of boilerplate, React has found a sweet spot.
D3 is Mike Bostock’s infamous data visualization library. It's used by The New York Times along with many other sites. It is the workhorse of data visualization on the web, and many charting libraries out there are based on it.
But D3 is a fairly low-level library. You can’t just say "I have data; give me a bar chart". Well, you can, but it takes a few more lines of code than that. Once you get used to it though, D3 is a joy to use.
Just like React, D3 is declarative.
You tell your code what you want instead of how you want it. It gives you access straight to the SVG so you can manipulate your lines and rectangles as you want. The problem is that D3 isn't so great, if all you want are charts.
That's where React comes in.
Once you’ve created a histogram component, you can always get a histogram with
<Histogram x="5" ... />. Once you have a piechart, it's always
<Piechart x="20" ... />. Just like they were HTML elements.
Doesn’t that sound like the best? I think it's amazing.
It gets better!
With React, you can make different graph and chart components share the same data. When your data changes, the whole visualization reacts.
Your graph changes. The title changes. The description changes. Everything changes. Mind, blown.
Look how this H1B salary visualization changes when the user picks a subset of the data to look at.
React + D3: a powerful combination indeed.