D3 is for Drawing – JavaScript Data Visualization with D3.js

D3.js is an excellent library for creating in-browser data visualizations. It’s harder to get started with D3 than with other JavaScript graphing libraries, but where other libraries support only a few types of graphs, D3 provides endless possibilities. Using D3 is the most fun I’ve had with a JavaScript library, possibly because it isn’t just a graphing library but a full-fledged drawing library.


Most graphing libraries provide out-of-the-box graphs. Once you provide the data and some configuration flags, the library assembles axes, tick marks, and a legend. It’s easy to get started, but the possibilities quickly taper off. If you want to modify the graph in ways the library’s authors didn’t expect, there may not be much you can do. Not so with D3.

D3 is, at its root, an SVG manipulation library. Compared to other JavaScript graphing libraries, D3 seems very low level: you’re never very far from its SVG underpinnings. But SVG has broad capabilities, and having its full power at your fingertips is part of the allure of D3. You may not be able to draw a line graph in three lines of code, but you can create visualizations that D3’s authors would never think of.

D3 is one of the most well-abstracted libraries I’ve ever used. Its pre-packaged tools compose nicely with each other and don’t assume so much they that limit your possibilities. In addition to tools for drawing shapes, D3 provides methods for handling events and animations. In fact, it’s been used not only for interactive data visualizations, but for particle simulations and games.

If you want the flexibility of pencil and paper — and the responsibility for drawing every jot and tittle that goes along with it — D3 is for you. Once you learn its core abstractions, you can draw virtually anything.