D3 Examples - Interactive Small Multiples

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
​
<style>
  .area {
    fill: #cec6b9;
  }
  #small-multiples > div {
    display: inline-block;
    width: 240px;
    height: 185px;
  }
  .x-axis .domain, .x-axis .tick path,
  .y-axis .domain, .y-axis .tick path {
    display: none;
  }
  .x-axis {
    height: 1.5em !important;
  }
  .gridline-x {
    stroke: white;
  }
</style>
​
<div id='small-multiples'></div>
​
<script>
d3.tsv('askmefi_category_year.tsv')
  .row(function(r) {
    return {
        category: r.category,
        n: Number(r.n),
      year: Number(r.year)
    }
  })
  .get(function(data) {
    var nested = d3.nest()
        .key(function(k) { return k.category; })
        .entries(data);
      
    var yExtent = fc.extentLinear()
      .accessors([function(d) { return d.n; }])
        .include([0]);
  
    var xExtent = fc.extentLinear()
        .accessors([function(d) { return d.year; }]);
​
    var area = fc.seriesSvgArea()
      .crossValue(function(d) { return d.year; })
      .mainValue(function(d) { return d.n; });
  
    var line = fc.seriesSvgLine()
      .crossValue(function(d) { return d.year; })
      .mainValue(function(d) { return d.n; });
  
    var gridlines = fc.annotationSvgGridline()
        .xTicks(0)
        .yTicks(3)
  
    var multi = fc.seriesSvgMulti()
        .series([area, line, gridlines])
      .mapping(function(data, index, series) {
        return data.values;
      });
  
  
    // create a chart
    var chart = fc.chartSvgCartesian(
        d3.scaleLinear(),
        d3.scaleLinear())
      .yDomain(yExtent(data))
        .xDomain(xExtent(data))
        .xLabel(function(d) { return d.key; })
        .yTicks(3)
        .xTicks(2)
        .xTickFormat(d3.format('0'))
      .yOrient('left')
        .plotArea(multi);
  
    // render
    d3.select('#small-multiples')
      .selectAll('div')
      .data(nested)
      .enter()
      .append('div')
      .call(chart);
    });
 
​
​
</script>
    