Why you should use D3

Mike Bostock
Dec 17, 2018 · 4 min read

Yes, Paul, you don’t need a library to visualize data. But here are two reasons why you might want to use a library like D3 (or Vega).

Visualization is harder than you think. It’s easy to draw shapes, but there are a surprising number of subtleties in visualization, such as how to draw nice ticks or a smooth curve between data points. A library can provide good defaults and let you explore the design space more quickly.

D3 is smaller (and easier) than you think. D3 isn’t a monolithic framework; it’s a suite of small modules (thirty-one and counting) for data analysis and visualization. These modules work well together, but you should pick and choose the parts you need. D3’s weirdest concept is selections and if you’re using a DOM framework like React (and don’t need transitions), you probably don’t need selections!

To get a sense of what D3 provides, let’s compare it to vanilla JavaScript.

You could use Math.max to compute a maximum.

Putting aside that this code will overflow the call stack if the data array is big enough (since each value is passed as an argument), using max from d3-array will save you a few keystrokes.

More usefully, D3’s max will ignore NaN or undefined values, which is handy if you have missing data. And you can use D3’s extent to compute the minimum and maximum in one go.

You could write your linear scales by hand.

And here’s the equivalent with d3-scale.

A scale abstraction not only makes your code more readable, it makes it easier to alter the scale definition, say to nice the domain or to adopt a square-root transform. (And wait until we get to axes…)

You could write your own ticks implementation.

But if you use scale.ticks from d3-scale (or ticks from d3-array, if the 14.4K dependency of d3-scale is too big), you won’t need to.

And better still, you’ll get human-readable ticks at multiples of 2, 5 or 10, rather than multiples of 17.5 or some other awkward interval.

You could generate SVG paths by hand.

Why not use line from d3-shape?

By using D3, your code will be shorter and you’ll be able to do more. For example, line.curve lets you choose a variety of curve implementations to interpolate between data points, say if you want a Catmull–Rom spline or a cubic spline that preserves monotonicity. (You don’t want to write that one by hand.) And line.defined lets you easily show gaps for missing or invalid data.

And what about those pesky axes? Well, you could… but I’ll spare you the vanilla JavaScript—don’t use CSS flexbox to place ticks, that’s for sure! Relying on CSS layout to draw axes will almost certainly distort your data.

Instead, use d3-axis. Using refs, it’s easy to drop in an axis in your DOM framework of choice. Here’s the complete code using Preact + HTM:

Here’s a live, editable version on Observable:


Mike Bostock

Written by

Building a better computational medium. Founder @observablehq. Creator #d3js. Former @nytgraphics. Pronounced BOSS-tock.

Mike Bostock

Written by

Building a better computational medium. Founder @observablehq. Creator #d3js. Former @nytgraphics. Pronounced BOSS-tock.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store