Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Interactive Small Multiples - Step 3

Built with blockbuilder.org

forked from ColinEberhardt's block: Interactive Small Multiples - Step 1

forked from ColinEberhardt's block: Interactive Small Multiples - Step 2

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

https://unpkg.com/d3@4.6.0

https://unpkg.com/d3fc@12.1.0