Let's explore CO2 emissions (metric tons per capita). We'll take Ben Shneiderman's advice and start with an overview; here, an overview of the data by country over time using small multiples. There are strengths and weaknesses of small multiples: with a reasonable screen we can see most countries, for example, but it's hard to compare one country to another. However, we can add interaction -- especially filtering -- later.
There are several features of this block that I'd like to highlight. First, we separate HTML from JS. Consequently, we can use ESLint to check the JS for errors and warn us about other issues.
Notice that we use two y scales? The first (y0) is global; we use it to position each multiple. The second (y1) is local; we use it to scale each country's CO2 emissions from minimum to maximum. We pass each local y scale to a line generator and bind each line generator to an SVG g element using d3.local. Mike Bostock's Local Variables block has more information about d3.local.
Finally, we use the margin convention and customise the x and y axes.
