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.

forked from curran's block: Towards Reusable Charts Example

forked from curran's block: Small Multiples with Reusable Charts

<!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");

// 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>

https://d3js.org/d3.v4.min.js