CO2 Emissions Small Multiples

.block

license: mit
height: 4000
scrolling: no
border: yes

.eslintrc.json

{
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "d3": false,
        "ss": false,
        "topojson": false
    },
    "parserOptions": {
        "ecmaFeatures": {
            "impliedStrict": true
        }
    },
    "rules": {
        "indent": ["warn", 4],
        "no-tabs": "error"
    }
}

README.md

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.

block.js

/* Remember: Use four-space indents.
 * However, use two-space indents for operations that change the selection.
 * For more information, see:
 * https://bost.ocks.org/mike/d3/workshop/#35
 */
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 20, left: 150},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var g = svg.append("g")
    .attr("transform", translate(margin.left, margin.top));

d3.csv("emissions.csv", row, function (error, emissions) {
    var byCountry = d3.nest()
        .key(function (d) { return d.country_name; })
        .sortValues(function (a, b) { return d3.ascending(a.year, b.year); })
        .map(emissions);

    var x = d3.scaleTime()
        .domain(d3.extent(emissions, function (d) { return d.year; }))
        .range([0, width])
        .nice();

    // Create a global y scale for all multiples.
    var y0 = d3.scaleBand()
        .domain(byCountry.keys().sort(d3.ascending))
        .range([0, height])
        .paddingInner(0.2);

    var line = d3.local();

    var multiple = g.append("g").selectAll(".multiple")
        .data(byCountry.entries())
      .enter().append("g") // Each multiple has its own local origin.
        .attr("transform", function (d) { return translate(0, y0(d.key)); })
        .attr("class", "multiple")
        .each(localMultiple);

    multiple.append("rect")
        .attr("width", width)
        .attr("height", y0.bandwidth())
        .attr("fill", "#f0f0f0");

    multiple.append("path")
        .attr("d", function (d) { return line.get(this)(d.value); })
        .attr("fill", "none")
        .attr("stroke", "#de2d26")
        .attr("stroke-width", 0.5);

    g.append("g")
        .call(d3.axisTop(x))
        .call(customAxis);

    g.append("g")
        .call(d3.axisLeft(y0))
        .call(customAxis);

    function localMultiple(d) {
        // Create a local y scale and local line generator for each multiple.
        // For more information, see:
        // https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08
        var y1 = d3.scaleLinear()
            .domain(d3.extent(d.value, function (d) { return d.emissions; }))
            .range([y0.bandwidth(), 0]);

        var _line = d3.line()
            .x(function (d) { return x(d.year); })
            .y(function (d) { return y1(d.emissions); });

        line.set(this, _line);
    }
});

function translate(x, y) {
    return "translate(" + x + "," + y + ")";
}

function row(d) {
    d.year = d3.utcParse("%Y")(d.year)
    d.emissions = +d.emissions;
    return d;
}

function customAxis(g) {
    g.selectAll(".domain").remove();
    g.selectAll(".tick line").remove();
}

emissions.csv

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="4000"></svg>
<script src="https://unpkg.com/d3@4/build/d3.min.js"></script>
<script src="block.js"></script>

preview.png

thumbnail.png