Source: Connected Particles III

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…


Introducing d3.express: the integrated discovery environment.

Update January 31, 2018: d3.express is now Observable, and we’re live at beta.observablehq.com!

If you’ve ever gotten frustrated trying to figure out why your code doesn’t work, or how someone else’s code works, you are not alone. This is for you.

For the last eight years or so, I have been building tools for visualizing information. The most successful outcome of this effort has been D3, a JavaScript library. …


A tour of d3-geo’s new command-line interface.

[This is Part 4 of a tutorial on making thematic maps from the command line using d3-geo, TopoJSON and ndjson-cli. Read Part 3 here.]

The word choropleth comes from the Greek khôros meaning “area or region” and plêthos meaning “a great number”. To construct one, we apply a color encoding of the population data to the geometry we prepared previously. (Be careful you don’t accidentally summon the apocryphal chloropleth, which is a great number of greens.)

As in Part 2, a reasonable starting point is a sequential scale with a perceptually-motivated color scheme such as Viridis. However, now we will…


A tour of d3-geo’s new command-line interface.

[This is Part 3 of a tutorial on making thematic maps from the command line using d3-geo, TopoJSON and ndjson-cli. Read Part 2 and Part 4 here.]

The GeoJSON feature collection of census tracts we constructed previously was 13.6M. That’s fine for local viewing, but a bit large for the web! Fortunately there are ways to shrink geometry without apparent loss of detail. We can:

  • Simplify (e.g., remove coordinates per Visvalingham).
  • Quantize (e.g., remove digits, say 224.3021507494117 to 224.3).
  • Compress (e.g., remove redundant geometry).

These are possible with GeoJSON, but we can do even better if we switch to a…


A tour of d3-geo’s new command-line interface.

[This is Part 2 of a tutorial on making thematic maps from the command line using d3-geo, TopoJSON and ndjson-cli. Read Part 1 or Part 3 here.]

Often the data we find online isn’t precisely what we want. Perhaps we need to join multiple data sources, or to convert formats (say from fixed-width text to CSV), or even just to drop unneeded fields to produce smaller files that are faster to download.

You can always write scripts to transform data in arbitrary ways, but writing (and debugging) scripts can become tedious as transformations become more complex. What we want is…


A tour of d3-geo’s new command-line interface.

[This is Part 1 of a tutorial on making thematic maps. Read Part 2 here.]

This multipart tutorial will teach you to make a thematic map from the command line using d3-geo, TopoJSON and ndjson-cli—free, open-source tools written in JavaScript. We’ll make a choropleth of California’s population density. (For added challenge, substitute your state of choice!)


As someone who creates open-source software, I spend a lot of time thinking about how to make software better.

This is unavoidable: there’s an unending stream of pleas for help on Stack Overflow, in GitHub issues and Slack mentions, in emails and direct messages. Fortunately, you also see people succeed and make fantastic things beyond your imagination, and knowing you helped is a powerful motivation to keep at it.

So you wonder: what qualities of software lead people to succeed or fail? How can I improve my software and empower more people to be successful? Can I articulate any guiding…


I recently published the first prereleases of D3 4.0 alpha to npm. Npm’s treatment of prereleases were surprising, so here’s a quick guide so you don’t fall on your face like me.

I was introduced to prereleases in a blog post announcing the npm semantic version calculator, which wrote:

By default, prerelease versions are not included in a range. This is because prerelease versions are meant to be unstable and are expected to have breaking changes. But sometimes you want to include them anyway.

And if you read the Semantic Versioning spec:

A pre-release version MAY be denoted by appending…


I’d like D3 to become the standard library of data visualization: not just a tool you use directly to visualize data by writing code, but also a suite of tools that underpin more powerful software.

To this end, D3 espouses abstractions that are useful for any visualization application and rejects the tyranny of charts.

As Leland Wilkinson wrote in The Grammar of Graphics,

If we endeavor to develop a charting instead of a graphing program, we will accomplish two things. First, we inevitably will offer fewer charts than people want. Second, our package will have no deep structure. Our computer…


Say you’re building a new tool for studying data. What’s the most natural representation for specifying a visualization? A configurable chart? Abstract operators and coordinate systems? Graphical marks and visual encodings?

Each abstraction offers its own advantages. For exploratory visualization, you may favor speed (efficiency) so that you can quickly test different views to discover patterns. For explanatory visualization, as in graphics for a wide audience, you may favor greater control over the output (expressiveness) to communicate insights more effectively.

Regardless of the approach you chose, to implement your tool, you’ll need to actually draw something to the screen. …

Mike Bostock

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

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