D3 for the Impatient

Chapter 1. Introduction

D3.js (or just D3, for Data-Driven Documents) is a JavaScript library for manipulating the Document Object Model (DOM) tree in order to represent information visually. It has become a de facto standard for information graphics on the web.

Its popularity notwithstanding, D3 has a reputation for having a steep learning curve. I don’t think this is because D3 is complicated (it is not), and not even because it has a large API (it does, but the API is well structured and extremely well designed). Instead, I believe that many of the difficulties experienced by new users are due to incorrect assumptions. Because D3 is used to create some impressive graphics, it is easy—even natural—to regard it as a “graphics library” that facilitates handling of graphical primitives and provides high-level support for common plot types. Approaching D3 with this expectation, the new user is unpleasantly surprised at the verbosity required to set something as elementary as the color of an element—and what’s that “selection” business anyway? Why can’t I simply get a canvas-like element and be done with it?

The mistake here is that D3 is not a graphics library: instead, it is a JavaScript library to manipulate the DOM tree! Its basic building blocks are not circles and rectangles, but nodes and DOM elements; and the typical activity does not involve the painting of a graphical shape on a canvas, but the styling of an element through attributes. The “current location” is not so much ...