Getting Started with D3

Chapter 2. The Enter Selection

Selections are a core concept in D3. Based on CSS selectors, they allow us to select elements of the web page and modify, append to, or remove these items in concert with a data set. In this chapter, we will use selections of HTML elements to create two very simple visualizations: a list and a basic bar chart.

Both visualizations share a common structure: we select the body of the page, we append a container element and then, for each element of the data set, we append a visual element whose properties are defined by the data. This is the basic pattern by which we build up more complex visualizations. Mastering this pattern forms the bulk of D3’s learning curve.

Building a Simple Subway Train Status Board

Knowing when the trains are running in New York can make all the difference to your day. Subway trains are subject to construction work, scheduling changes, and unforeseen delays. And at over five million rides on a weekday, delays can affect a huge group of people.

Happily, the New York MTA makes live information available, updated every minute, indicating the status of each subway line. This release of public data has generated a wonderful ecosystem of applications developed for smartphones and the Web. Our first example adds a (modest) contribution to this ecosystem, using D3 to make a list showing the status of each train. Here is the process we’ve followed:

1. Download the data, which is in XML format, from http://www.mta.info/status/serviceStatus.txt ...