D3 Examples - Small Multiples with Reusable Charts

Small Multiples with Reusable Charts

This example is a small multiples experiment based on code written by Mike Bostock in 2012 as part of his tutorial Towards Reusable Charts.

I had heard that the "Towards Reusable Charts" style can be used to easily create small multiples, but I didn't quite grok how. This example shows one way that it can work, drawing data and inspiration from this other example Small Multiples III. On the way, I upgraded the original reusable line chart code to D3 v4, with minimal modifications. I also wanted to add a title to each instance of the chart, so ended up adding the values and title accessors to make it work well with the output from d3.nest.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Reusable Chart Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="time-series-chart.js"></script>
    <style>
​
      .axis text {
        font: 10px sans-serif;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000000;
        shape-rendering: crispEdges;
      }
​
      .line {
        fill: none;
        stroke: #707070;
      }
​
      .area {
        fill: #c6c6c6;
      }
​
    </style>
  </head>
  <body>
    <p id="example">
    <script>
      
      var parseDate = d3.timeParse("%b %Y");
​
      var chart = timeSeriesChart()
          .x(function(d) { return parseDate(d.date); })
          .y(function(d) { return +d.price; })
            .width(950)
            .height(60)
            .values(function (d){ return d.values; })
            .title(function (d){ return d.key; })
            .margin({top: 20, right: 20, bottom: 20, left: 134});
     
      d3.tsv("stocks.tsv", function(error, data) {
        if (error) throw error;
​
        // Use a global extent (so GOOG's axis is aligned with the others).
        chart.xExtent(d3.extent(data, chart.x()));
​
        var symbols = d3.nest()
            .key(function(d) { return d.symbol; })
            .entries(data);
        
        d3.select("body")
          .selectAll(".chart")
            .data(symbols)
          .enter()
            .append("div")
            .attr("class", "chart")
            .call(chart);
            
      });
​
    </script>
  </body>
</html>
​
    