on the idea of reusable D3 chart components

I love D3.js, it’s amazing. But one thing that bugs me is the style it encourages is to write new chart types inline in Javascript. There’s not much in the way for reusable charts, D3’s focus is on making it easier to build your own charts in Javascript. So I find myself painfully rewriting basic histograms and time series and the like. In some sense this is by design; Mike’s style is to parsimonious Javascript and making it easy to actually build charts by hand. And it’s good in that it encourages a diversity of visualizations. But sometimes you just want a simple timeseries, you know?

Of course nothing prevents people from building a chart component suite on top of D3. And lots of people have. Here’s a very quick review of looking at the project web sites for a bunch of efforts. I’m only looking at their ability to produce static visualizations. An API supporting interactions and transitions is significantly more subtle to get right.

The libraries group into two categories. Declarative libraries let you specify a chart simply with a bunch of configuration parameters, no real executable Javascript code. In general, my guess is these are great for doing simple things and hard to customize to go beyond what the library was designed to do. Programmable libraries are more like toolkits on top of D3 that still require some real programming to get results. But then they may give you more access to do complex customizations and interactions.

Declarative libraries

Rickshaw has been around awhile and looks good.

C3.js looks a lot like Rickshaw, see the bar chart example. Seems solid and simple.

Vega is strictly declarative, to the point of emphasizing chart specifications are JSON objects and completely wrapping D3. Has a neat live editor, headless rendering tools, and high-falutin language about “visual grammar”. It’s an impressive package.

Ember Charts by Addepar has some basic chart types. It’s tied to the Ember.js framework and needs Node to develop, also not a lot of activity on GitHub, so I didn’t investigate further.

Tenxer xCharts is declarative but with some programmatic customization. Examples feature using closures inside the chart definitions. Also has notes on customization and extension. Drawbacks are relatively few chart types and that there’s been no code development in eight months.

Programmable libraries

Towards Reusable Charts: Mike’s own opinion on reusability in D3. Advocates encapsulating a chart type in a closure. Doesn’t go much beyond establishing a design pattern. Some of the D3 plugins like Sankey and Horizon are good examples.

NVD3 is a reusable component library that works hard to respect access to underlying D3 design. It’s been around for awhile and seems pretty mature, not many commits in the past few months. The Discrete Bar example is appealingly simple.

Dimple adds chart types on top of D3 that you configure with simple declarative code. But then the advanced examples show you dropping in to the underlying D3 to extend the charts beyond what Dimple provides, which is great.

Bocoup d3.chart is a framework for creating charts, not a chart library itself. Its design is informed by a very thoughtful critique on reusable chart approaches. But it’s pretty early days and it’s aimed more at people writing chart libraries than folks just wanting to draw some charts. Also, I’m bummed the examples aren’t rendering right in JSFiddle. Overall my impression is these guys are pushing on solving the problem I want solved right now.

Summary

I’d use Vega or maybe Rickshaw if I just want some simple graphs. Dimple looks to be the most promising programmable system worth a closer look. I’m stubborn and foolish and like shaving yaks so I’m going to write my own little histogram thing using Mike’s suggested pattern just for the experience. Maybe I’ll end up using Dimple for future projects.

Example

Here’s an example trivial new chart type based on Mike’s proposed format. I’m not very happy with this result.

Update

dc.js is an interesting option. It takes too much programming to really just be reusable chart templates, but it has a nice way of packaging in crossfilter and aiding making basic data charts instead of arbitrary D3 SVG marks.