Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Interactive Small Multiples

Interactive small multiple example built using d3 and d3fc as described in this blog post.

Built with blockbuilder.org

<!DOCTYPE html>

<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>

<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="//unpkg.com/d3@5.5.0"></script>
<script src="//unpkg.com/d3fc@14.0.44"></script>

<style>
  body {
    font: 12px sans-serif;
  }
  .area {
    fill: #cec6b9;
  }
  #small-multiples > div {
    display: inline-block;
    height: 185px;
    width: 50%
  }  
  @media (min-width: 600px) {
    #small-multiples > div {
      width: 33%
    }
  }
  @media (min-width: 800px) {
    #small-multiples > div {
      width: 25%
    }
  }
  @media (min-width: 1000px) {
    #small-multiples > div {
      width: 20%
    }
  }
  .tooltip .x-axis .tick {
    display: none;
  }
  .x-axis .domain, .x-axis .tick path,
  .y-axis .domain, .y-axis .tick path {
    display: none;
  }
  .plot-area {
    overflow: visible !important;
  }
  .x-axis {
    height: 1.5em !important;
  }
  .gridline-x {
    stroke: white;
  }
  .point {
    fill: black;
  }
  .point text {
    text-anchor: middle;
    transform: translateY(-10px);
    font-size: 10px;
    stroke: none;
  }
  .bottom-handle {
    text-anchor: middle;
    alignment-baseline: hanging;
   	font-size: 10px;
    transform: translateY(1.5em);
  }
  .top-handle {
    display: none;
  }
  .annotation-line line {
    display: none;
  }
</style>

<div id='small-multiples'></div>

<script type='text/babel'>
d3.tsv('askmefi_category_year.tsv', (r) => ({
    category: r.category,
    n: Number(r.n),
    year: Number(r.year)
  }))
  .then((data) => {
    var nested = d3.nest()
    	.key(k => k.category)
    	.entries(data);
  
  	nested.forEach(g => g.trackball = []);
  	  
    var yExtent = fc.extentLinear()
      .accessors([d => d.n])
    	.pad([0, 0.2])
    	.include([0]);
  
  	var xExtent = fc.extentLinear()
    	.accessors([d => d.year]);

var area = fc.seriesSvgArea()
      .crossValue(d => d.year)
      .mainValue(d => d.n);
  
  	var line = fc.seriesSvgLine()
      .crossValue(d => d.year)
      .mainValue(d => d.n);
  
  	var gridlines = fc.annotationSvgGridline()
    	.xTicks(0)
    	.yTicks(3);
  
  	var point = fc.seriesSvgPoint()
      .crossValue(d => d.year)
      .mainValue(d => d.value)
    	.size(25)
    	.decorate((selection) => {
        selection.enter()
        	.append('text');        
        selection.select('text')
        	.text(d => d.value)
      })
    
    var line = fc.annotationSvgLine()
    	.orient('vertical')
      .value(d => d.year)
    	.decorate((selection) => {
        selection.enter()
        	.select('.bottom-handle')
        	.append('text');        
        selection.select('.bottom-handle text')
        	.text(d => d.year)
      })
     
  
  	var multi = fc.seriesSvgMulti()
    	.series([area, line, gridlines, line, point])
      .mapping((data, index, series) => {
        switch (series[index]) {
        case point:            
        case line:
          return data.trackball;
        default:
          return data.values;
        }
      });
  
  	var xScale = d3.scaleLinear();
    // create a chart
    var chart = fc.chartCartesian(
        xScale,
        d3.scaleLinear())
      .yDomain(yExtent(data))
    	.xDomain(xExtent(data))
    	.xLabel(d => d.key)
    	.yTicks(3)
    	.xTicks(2)
    	.xTickFormat(d3.format('0'))
      .yOrient('left')
    	.svgPlotArea(multi);
  
    function render() {
      // render
    	var container = d3.select('#small-multiples')
      var update = container.selectAll('div.multiple')
        .data(nested);
      update.enter()
        .append('div')
      	.classed('multiple', true)
      	.merge(update)
        .call(chart)
        .classed('tooltip', d => d.trackball.length);

// add the pointer component to the plot-area, re-rendering
      // each time the event fires.
      var pointer = fc.pointer()
        .on('point', (event) => {
          // determine the year
          if (event.length) {
            var year = Math.round(xScale.invert(event[0].x));
            // add the point to each series
            nested.forEach((group) => {
              var value = group.values.find(v => v.year === year);
              group.trackball = [{
                year: year,
                value: value.n
              }];
            })
          } else {
            nested.forEach(g => g.trackball = [])
          }
          render();
        });

d3.selectAll('#small-multiples .plot-area')
        .call(pointer);  
    }
  
  	render();
	});

</script>

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.44