Paul Knittel

D3.js > Other Visualisation Libraries

April 2014

For the past year I have spent quite a bit of time learning and working with D3.js. I keep getting people asking me why I have chosen this particular library, instead of some of the other visualisation libraries out there (and yes there are lot’s of them).

1. Inspirational examples

I don’t think any other javascript library has such a vast array of diverse examples on their homepage. And it’s not just the amount which is incredible, the quality throughout the graphs is also incredibly high. All graphs have this consistent minimalistic feel about them, a standard set by the creator of the library Mike Bostock. See it for yourself: D3.js Gallery.

Some of my personal favourites amongst them:

  1. Animal lifespan
  2. Crossfilter example by Square
  3. What makes us happy
  4. Directed Graph Layout
  5. Political influence
  6. Rounded Rectangles

Working with a library which has a high standard in the community constantly helps you push your work to the next level. It also makes it easy to find a solid code base to kickstart your next project.

2. Incredibly flexible

Unlike other graphing libraries like flot.js or chart.js, there are no predefined graphs to use. D3 stands for Data-Driven-Documents, referring to it’s underlying technique of binding data to the Document Object Model (DOM). It’s pretty much jQuery with a focus on creating graphs. Selecting and modifying DOM elements, managing AJAX request are all possible using a clean API jQuery users should feel familiar with.

This means you can make you graphs look exactly the way you want to. You will never hit a wall where you have outgrown you simple library because there is a certain feature you want. Using D3.js you can built extensive interactive visualisation, which go beyond your classic visualisation of bar and donut graphs.

3. Web standards

I love the way D3 fully embraces the modern web. Everything is done using standard HTML, SVG and CSS. This is great as it can be inspected using the standard chrome inspection tool and styled with SASS. It’s great seeing libraries embrace the awesomeness of the modern web.

4. Those little things

-1. On the flip side

An overview, which doesn’t mention anything negative should never be trusted. So here we go…

Bad backwards compatibility

Many older browsers including anything below IE9 will not be able to render D3.js due to the fact they cannot display SVG. There are definitely ways around this, for example using the aight shim or r2d3(rendering SVG using Raphael). However if backwards compatibility is important to you, then D3 is probably not the best choice.

Fairly difficult to learn

D3 has quite a few difficult concepts to wrap your head around. Nothing crazy for an advanced programmer, however if you are just starting off with JavaScript, D3.js might be a little challenging. Adding a quick graph is just not quite as simple as modifying one config array, as you have to do for libraries like chart.js. In other words if you are just looking for a simple one off graph, you might be better using another library. Alternatively you could also use one of the many wrapper frameworks available for D3 like nvd3 or or dimple.js.

In conclusion

If you are building complex visualisation and you don’t care about backwards compatibility then D3.js is the perfect tool for you.

Got a different opinion? Tweet me at @xyz_paul