D3.js > Other Visualisation Libraries
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
Some of my personal favourites amongst them:
- Animal lifespan
- Crossfilter example by Square
- What makes us happy
- Directed Graph Layout
- Political influence
- 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
- Easy to animate: Define a transition time and the attributes of the new state. Everything else is done for you. Inbuilt components like axis automatically animate for you.
- http://bl.ocks.org: Simple viewer for code examples hosted on GitHub Gist. Designed for D3.js to encourage sharing of graphs.
- Force layouts: I totally have a crush on force layouts. If you don’t know why force layouts in d3 are awesome yet, then you have to watch this talk.
-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
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