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).

dvpj 1405
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 to try out some of the code snippets.

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

Get Data Visualization with Python and JavaScript now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.