If you’re planning to build a React app with more than a few simple data visualizations, you’ll probably want to pick an approach that: is well-documented, proven, and under active development has a relatively expressive interface– meaning it lets you write custom data graphics with just enough verbosity to express what you want plays well with React– that is, it doesn’t need to directly mutate the DOM gives you plenty of freedom to customize it to suit your app’s needs and visual style Given the above criteria, these are what I’d consider to be the best available options (not in any particular order): https://github.com/d3/d3 https://github.com/vega/vega https://github.com/FormidableLabs/victory https://github.com/recharts/recharts Note: there are a handful of projects like , , and others which don’t seem to be as actively-maintained, that provide high-level React chart components. If these suit your app, then of course you could just use them! react-chartjs react-d3-components Comparing the Options D3 First of all, I’d consider to be the standard library for data visualization on the web. It’s the most-starred result for “data visualization” on Github, leading by 50k stars. To see what it’s capable of, just check out . D3 Mike Bostock’s bl.ocks https://bl.ocks.org/mbostock Vega It seems like Vega and D3 have comparable expressiveness (it is, after all, a wrapper of D3). The awesome thing about Vega is that it lets you write much of what you could write in D3 in a declarative syntax. Some Vega examples The caveat is that the conventional way to use Vega seems to be to let it mutate the DOM. This is similar to the convention for using D3, but soon we’ll see how to use D3’s libraries to scale your data, map it to SVG path data, and then return an element tree, just like you would in any ordinary component. I’m not sure how you’d do this with Vega. React Victory and Recharts Both Victory and Recharts expose high-level chart components, as well as some lower level chart “parts” like axes, tooltips, etc. While these certainly play well with React, for the sake of customization and expressiveness I prefer D3’s approach. I think there’s just more you can do when you’re in control of scaling data and rendering vs. being at the mercy of higher level component interfaces. “theory of graphics” It could be that I’m just influenced by the huge number of examples of amazing graphics made using D3, and it may be possible to create graphics that are just as great using Victory and Recharts. Unfortunately though, if I got stuck, I don’t think I’d have as many resources to get help as I would using D3. Using D3’s libraries to do everything rendering DOM nodes but D3 is comprised of 30 libraries. I’ve scanned through the sources of each of them to figure out which are in some way dependent on the DOM, and which are totally independent of it. Most (22/30) of the D3 APIs don’t have any functions that come in direct contact with the DOM! [d3-array](https://github.com/d3/d3-array) [d3-chord](https://github.com/d3/d3-chord) [d3-collection](https://github.com/d3/d3-collection) [d3-color](https://github.com/d3/d3-color) [d3-dispatch](https://github.com/d3/d3-dispatch) [d3-dsv](https://github.com/d3/d3-dsv) [d3-ease](https://github.com/d3/d3-ease) [d3-force](https://github.com/d3/d3-force) [d3-format](https://github.com/d3/d3-format) [d3-hierarchy](https://github.com/d3/d3-hierarchy) [d3-interpolate](https://github.com/d3/d3-interpolate) [d3-path](https://github.com/d3/d3-path) [d3-polygon](https://github.com/d3/d3-polygon) [d3-quadtree](https://github.com/d3/d3-quadtree) [d3-queue](https://github.com/d3/d3-queue) [d3-random](https://github.com/d3/d3-random) [d3-request](https://github.com/d3/d3-request) [d3-scale](https://github.com/d3/d3-scale) [d3-time](https://github.com/d3/d3-time) [d3-time-format](https://github.com/d3/d3-time-format) [d3-timer](https://github.com/d3/d3-timer) [d3-voronoi](https://github.com/d3/d3-voronoi) The above APIs can be used to transform your data to a form that can be mapped to the React elements you’ll use to construct your graphic. Before we get to an example, we’ll list the (8/30) D3 APIs that access or mutate the DOM. Some of these be used with React, with some caveats (e.g., work around a function or two, or carefully use refs to select nodes, and allow D3 to mutate them). do can [d3-axis](https://github.com/d3/d3-axis) [d3-brush](https://github.com/d3/d3-brush) [d3-drag](https://github.com/d3/d3-drag) [d3-geo](https://github.com/d3/d3-geo) [d3-selection](https://github.com/d3/d3-selection) [d3-shape](https://github.com/d3/d3-shape) [d3-transition](https://github.com/d3/d3-transition) [d3-zoom](https://github.com/d3/d3-zoom) Example: Writing a composite spark line / scatter plot component For the example, let’s make a simple time series visualization that‘s a composite of a spark line and scatter plot with cartesian axes and some styling. Let’s make this with React and D3! Here’s the github repo in case you’d prefer to get right into the source: . https://github.com/AnalyticalFlavorSystems/d3ReactExample This example chart that I built for one of our apps at Analytical Flavor Systems plots a product’s perceived quality (0–7) for the past 14 days. Here’s the data: Designing the Component Interface Our component should be reusable, so we should design it to take an array of any type of object. To support this, we’ll give it the props , , and . Since it renders an SVG, we should also give it dimension props and . Its interface now looks something like: TimeSeriesSparkLineScatterPlot data selectX selectY width height Writing the Component Let’s get right to it… we’ll start by writing a component that takes the props from the interface we came up with. Looks good! Now let’s generate an SVG path for the spark line and then render a group and path for the spark line. That’s a start :) That’s a bit ugly, but it looks accurate. We’ll wait until the end to add styles. Let’s add some axes. Now, remember that is in the “does mutate the DOM” list… Let’s look at how we can use it in our component: d3-axis : if our data updates, our axes won’t re-render, since we’re using D3 to render them directly into their group nodes when they mount. A workaround might be to . This would cause their nodes to unmount, and new nodes to mount, and then the axes would be rendered again. Maybe this is a bad idea... I’d appreciate feedback! Caveat add a **key** to each axis group that changes when the data is updated Hmm…. Okay, so it looks like our y axis is rendering, but its contents are outside the bounds of our SVG. Also, our x axis is at the top?! The says The D3 convention for this is to manually add a margin around the content and to translate our y axis down to the bottom. [d3-axis](https://github.com/d3/d3-axis#api-reference) readme “regardless of orientation, axes are always rendered at the origin.” Adding the margins isn’t really interesting enough to walk through. I wrote a component that handles adding a margin around the content of an SVG, called . [SVGWithMargin](https://github.com/AnalyticalFlavorSystems/d3ReactExample/blob/master/src/components/SVGWithMargin/index.js) Great! Let’s add a margin around our content and move our x axis to the bottom of the content: Much better. Awesome, now let’s add the scatter plot. We’ll just get scaled points for our data, and we’ll render a circle at each point: Nice! That’s it! Now if we add some class names (take a look at the ) as well a bit of CSS: finished component file We get this: That was easy! Conclusion Most of the D3 libraries don’t depend on the DOM. This means you can use them with React, React Native, or something totally different. I hope this entry was enjoyable and informational. If this kind of thing is up your alley, we’re growing our team at , and we’d be happy to have a conversation ;) Analytical Flavor Systems We’re still in the early stages of exploring what’s possible with D3 and React. I’m very interested in hearing the experiences of others who have done data visualizations in React– feel free to leave a comment, link to a related post you’ve written, or ping me . @danscan on Twitter Inspiration Thanks to for demonstrating the possibility of using some of D3’s APIs with React in his . Joel Burget example repo D4

How (and why) to use D3 with React

Too Long; Didn't Read

Dan Scanlon

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...