Eric S Bullington

Software Engineering and Data Visualization

react-d3

So, I’ve recently started work on React-d3, a chart library for Facebook’s React that leverages the power of Mike Bostock’s awesome d3 data visualization library. The project is in its very early stages (as in, I just started it two weeks ago), but it’s presently up on Github as well as NPM.

Background

As I describe in the project’s README, the approach I’m using here was inspired by this blog post by Ben Smith of Binary Consulting. What’s interesting about Ben’s approach is that it uses React – not d3 – to actually generate a given’s chart’s svg. Most other examples of React and d3 I’ve found online have only used React components to abstract out the d3 chart code; in these examples, d3 remains solely responsible for generating the needed svg markup.

Furthermore, the charts in Ben’s examples are mostly stateless, which means they’re in a position to take advantage of the optimizations React offers to stateless components.

So if we’re aiming to use React to actually generate the charts, why use d3 at all? Well, the answer to that can be found in d3’s API reference, specifically in that initial list of d3’s main “libraries”. Of those 8 libraries (Core, Scales, SVG, Time, Layouts, Geography, Geometry, Behaviors), only 1 – the SVG library – is actually used to generate chart markup. The rest are support libraries, with utilities for converting and parsing data, calculating positions, projections, and geometries, and responding to user events.

So basically, I’m using d3 as a utility library, albeit an extremely expansive one that would take man-years to re-create.

Naturally, as with any real-life project, I soon had to deviate from my initial plans of using only React to generate the chart svg. It turns out that generating chart axes is a pretty complex task, so for now I’m using d3 to generate chart axes until I’ve have the time to develop a React chart axis component that is general enough to accomodate all the use cases that I have in mind.

Charts

So enough technical blatherings, what about the charts? Well, at this early point (roughly 2 weeks into the project, at version 0.0.11), react-d3 has a meager 4 different chart types available:

  • bar chart
  • line chart
  • pie chart
  • area chart

The most current version of these charts may be viewed here. I’m hard at work expanding these basic examples, and hope to eventually include a host of other chart types, including:

  • scatter chart
  • candlestick
  • radial gauge
  • and much, much more…

At the present time, the charts have no animation, but that’s also in the works (and yes, it will be optional!).

Code

So what does the chart API look like? Well, you can see what kind of API I have in mind with this basic barchart example here:

// Sample data
var barData = [
  {label: 'A', value: 5},
  {label: 'B', value: 6},
  ...
  {label: 'F', value: 7}];
<BarChart
  data={barData}
  width={500}
  height={200}
  fill={'cornflowerblue'}
/>

And similarly with a piechart:

// Sample pie chart data
var pieData = [
  {label: 'Margarita', value: 20.0},
  {label: 'John', value: 55.0},
  {label: 'Tim', value: 25.0 }]
<PieChart
  data={pieData}
  width={400}
  height={400}
  radius={100}
  innerRadius={20}
/>

As you can see, the React jsx component makes an ideal abstraction layer for charts. Using this chart in your React component is as simple as including the above markup, with the props altered to create the chart configuration the user desires.

Of course, the props I’ve included here and just a sample of the available configuration options available with each chart. For the present time, you’ll have to check the source code to see all the available options, but I hope to have up comprehensive documentation for react-d3 in the coming weeks.

Visualization

So what does this all look like? Well, your best bet for now is to take a look at the example charts page. And I hope to soon have an embedded, interactive chart view in my next blog post on the subject. But as a cheap replacement, I’ll close this post with a screenshot of the available charts and the React jsx needed to achieve them.

Charts screenshot