Designers and developers making data visualizations on the web are buzzing about d3.js. But why?
1. D3 doesn’t stand for data-design dictator
It actually stands for Data-Driven Documents. Which is to say that, for a premier visualization tool, D3 doesn’t actually constrain your visuals in any way. That is, D3 helps you load data in and use that data to “drive” your documents (which, in this case, are web pages). But the visual representation is completely up to you: D3 doesn’t force you into a particular style of chart, but tries to give you all the tools you could want in order to design your own, from scratch. If you want pre-designed chart templates, there are other libraries for that, or you can use one of the many frameworks built on top of D3. But there’s no better tool for custom visualizations on the web.
2. Binding data is bound to help
The most fundamental concept in D3 is that of the data join, in which individual values from your data set are “bound” to elements in the DOM. D3’s not pushy, so those elements can be whatever you like: paragraphs, list items, rectangles, circles—anything recognized by your browser. Once the values are bound to elements, it’s easy to move elements around—such as to represent different views of the data—without ever having to go back and reference the original data set. This is super helpful with interactive visualizations, when visitors are given the ability to sort, filter, and otherwise explore your data. The visual representation can change, and each element just magically “remembers” its own value.
3. Standardized, but not in a boring way
D3 is totally open-source, non-proprietary, and unabashedly based on web standards. The good news is that D3 works great with all the HTML attributes, CSS selectors, and silly DOM tricks that you already know and love. The bad news is that if some older browser doesn’t support something, then D3 also won’t support it, in the sense that D3 relies on all the wizardry built-in to your browser to function. Rather than compromise on awesomeness, D3 encourages everyone to upgrade (finally!) to a modern browser.
Plus, using standards means we can heavily leverage SVG, the underestimated, misunderstood vector image format that you will soon grow to love. SVG is great not simply because it automatically looks amazing on the latest high-res displays, but because its elements—circles, rectangles, paths—exist within the DOM, just like regular old HTML elements. So, you guessed it, with D3 we can bind data values to visual elements, and then manipulate them accordingly, adjusting color, position, size, and so on to create effective visualizations.
4. Its transitions will change you
Once you learn how easy it is to make a smoothly animated transition in D3, you will never go back to working with any other tool. Okay, I’ll just tell you right now: To make a transition with D3, you type `.transition()`. That’s it. No exaggeration. Of course, you also need to specify start and end states to the thing you want to transition—such as a bar that starts short and gets taller, or a shape that starts gray and turns purple—but it otherwise really is that easy.
5. Maps, maps, maps
Technically, D3 doesn’t make maps. But it is crazy good at projections, the algorithms that conveniently take latitude/longitude pairs (that represent points in real-life, three-dimensional space) and convert them to pixel coordinates (that represent x/y positions on your screen). So, technically, what D3 does is load your geographic data, run it through a projection algorithm, and then output SVG paths, the beautifully elegant lines that are a nightmare to code by hand. D3 is worth using for this headache-averting feature alone. D3 has support for twelve common projections out of the box, and a plug-in offers support for more than 80 additional projections, most of which you should never use, but they sure do look cool.
Editor’s note: For one week only, save 50% on D3 ebooks and videos, including Scott Murray’s An Introduction to d3.js: From Scattered to Scatterplot.