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>
      body {
        display:flex;
        flex-direction: row;
        background-color: #F5EFEB;
      }
      text {
        font: 10px sans-serif;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000000;
        shape-rendering: crispEdges;
      }
      .axis {
        color: lightgrey;
        opacity: .5
      }
      .line {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
      }
      .area {
        fill: #254251;
        opacity:.2;
      }
    </style>
  </head>
  <body>
    <p id="example">
    <script>
      let dataset = [];
      let labels = ['rock', 'pop', 'electro', 'world'];
      labels.map(symbol => {
        for (let i=2008; i<2017; i++){
          dataset.push({
            symbol: symbol,
            date: i,
            price: Math.floor(Math.random() * 80) + 1  
          })
        }        
      });
      
      let parseDate = d3.timeParse("%Y");
​
      let chart = timeSeriesChart()
          .x(d => parseDate(d.date))
          .y(d => +d.price)
            .width(200)
            .height(100)
            .values(d => d.values)
            .title(d =>  d.key)
            .margin({top: 20, right: 20, bottom: 20, left: 10});
         
      chart.xExtent(d3.extent(dataset, chart.x()));
​
      let symbols = d3.nest()
        .key(d => d.symbol)
        .entries(dataset);
      d3.select("body")
        .selectAll(".chart")
        .data(symbols).enter()
        .append("div")
        .attr("class", "chart")
        .call(chart);   
​
    </script>
  </body>
</html>
​
    