Interactive Data Visualization for the Web, 2nd Edition

Chapter 16. Project Walk-Through

You’re nearly a D3 pro! You have already worked your way through a full 118 code examples, each one illustrating a specific concept or technique. I thought we’d wrap up our time together with a walk-through of a single, complete D3 project from start to finish, integrating many of the technical concepts covered earlier, and sharing a few new tips along the way.

Our subject will be electric cars because, let’s be honest: I kind of want one. (Maybe with a built-in D3 dashboard?)

The sequence we’ll follow to achieve this is as follows:

1. Prepare the data

2. Load and parse the data

3. Render the initial view

4. Add interactivity

5. Refine styling

6. Provide context

For each of these, I’ll highlight the most important steps.

Prepare the Data

Remember Figure 16-1, the stacked area chart from Chapter 13?

Figure 16-1. Stacked area chart

Well, I found this data really compelling, but it wasn’t exactly current, ending at June 2013. It’s 2017, people! Just in the past few months, we’ve seen many new electric models, including the Model X from Tesla, the Chevrolet Bolt (the first “affordable” electric car with a range of over 200 miles—i.e., not a Tesla), and the first-ever plug-in hybrid minivan (the Chrysler Pacifica). With the growing array of electric, plug-in hybrid, and other alternative-fuel vehicles, I wanted to see how many more options we have now, ...