Interactive Data Visualization for the Web, 2nd Edition

Chapter 2. Introducing D3

D3—also referred to as d3.js—is a JavaScript library for creating data visualizations. But that kind of undersells it.

The abbreviation D3 references the tool’s full name, Data-Driven Documents. The data is provided by you, and the documents are web-based documents, meaning anything that can be rendered by a web browser, such as HTML and SVG. D3 does the driving, in the sense that it connects the data to the documents.

Of course, the name also functions as a clever allusion to the network of technologies underlying the tool itself: the W3, or World Wide Web, or, today, simply “the web.”

D3’s primary author is the brilliant Mike Bostock, although there are several other dedicated contributors. The project is entirely open source and freely available on GitHub.

D3 is released under a BSD license, so you may use, modify, and adapt the code for noncommercial or commercial use at no cost.

D3’s official home on the Web is d3js.org.

What It Does

Fundamentally, D3 is an elegant piece of software that facilitates generation and manipulation of web documents with data. It does this by:

• Loading data into the browser’s memory

• Binding data to elements within the document, creating new elements as needed

• Transforming those elements by interpreting each element’s bound datum and setting its visual properties accordingly

• Transitioning elements between states in response to user input

Learning to use D3 is simply a process of learning its syntax, so you ...