Data Visualization with Python and JavaScript, 2nd Edition

Chapter 17. Introducing D3—​The Story of a Bar Chart

In Chapter 16, 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 17-1).

Figure 17-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 joining and the enter-exit-remove update pattern, now nicely encapsulated by D3’s newish join method. 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”). You can try out the code snippets using an online editor like CodePen’s or VizHub’s ...