D3 for the Impatient

Chapter 3. The Heart of the Matter: Selecting and Binding

D3 is a JavaScript library for manipulating the DOM tree in order to represent information visually. This makes it different from other graphics or plotting libraries: a conventional graphics library operates on a “canvas” and places lines, circles, and other graphical objects directly onto this canvas. But because D3 uses the DOM tree to display information, it must provide capabilities to operate on the DOM tree—in addition to the customary management of shapes, coordinates, colors, and so on. Specifically, it must allow the user to:

1. Specify where in the DOM tree a change should take place and which elements will be affected; the user must be able to select a node (or set of nodes).

2. Associate individual records from the data set with specific elements or nodes in the DOM tree; enable the user to bind or join a data set to a selection of nodes.

3. Change the size, position, and appearance of DOM elements according to the values of the data associated with them.

The first and last item in this list are common activities in contemporary web development, and users familiar with the jQuery library, for instance, should feel quite at home. (But if you are not familiar with jQuery and the particular style of programming popularized by it, D3 can seem very peculiar indeed!)

The second item, however, is different. The idea to establish a tight association between individual data records and individual DOM elements, so that ...