Data Visualization with Python and JavaScript

Chapter 16. Introducing D3—The Story of a Bar Chart

In Chapter 15 we imagined our Nobel Prize visualization by breaking it into component elements. In this chapter, I will gently introduce you to D3 by showing you how to build the bar chart we need (Figure 16-1).

Figure 16-1. This chapter’s target bar chart

D3 is much more than a charting library. It’s a library you use to build charting libraries, among other things. So why am I introducing you to D3 by way of that ultra-conventional visualization, the bar chart? First, because there should be a little thrill in crafting one from scratch for the first time, having total control over the look and feel of the chart and being unconstrained by whatever prejudices a particular charting library has. And second, because it just happens to be a great way to cover the fundamental elements of D3, particularly data binding and the enter-exit-remove update pattern. If you get those fundamentals in place, you’re well on your way to employing the full power and expressivity D3 offers, and producing something more novel than a bar chart.

We’ll be using some of the webdev covered in Chapter 4, particularly the SVG graphics that are D3’s specialty (see “Scalable Vector Graphics”). I recommend using the fantastic, purpose-built D3 site blockbuilder.org to try out some of the code snippets.

Before we begin building the bar chart, let’s consider ...