Getting Started with D3

Chapter 3. Scales, Axes, and Lines

One of the basic problems we need to overcome when plotting on a web page is how to convert the values in our data into an appropriate representation in terms of pixels or colors. For statistical visualizations this can be a complicated process: we need to be able to deal with numerical and ordinal scales, log scales, time scales, and so on. The authors of D3 have made all this very easy, as we shall see in this chapter.

Bus Breakdown, Accident, and Injury

New York City has an intricate bus system that serves an incredible number of people every day. MTA’s buses have to navigate a very busy city and so, inevitably, accidents will occur. The MTA makes its breakdown and accident data available to the public, so we are going to see if breakdowns, collisions, and customer accidents are related.

In order to do this, we will plot a basic scatter graph, which involves placing circles at specified locations on the web page. In the previous chapter, we used HTML elements (div tags) to build the bar chart; here we will instead use SVG elements to build a scatter chart.

Warning

Using SVG limits us to modern browsers. All versions of Internet Explorer up to and including version 8 failed to provide SVG support, though plug-ins that introduce support are available. Internet Explorer version 9 (released in March 2011) does include support, and most other popular browsers have had SVG support for half a decade or more at the time of this writing. Nonetheless, ...