D3 Map Small Multiples

.block

license: MIT
height: 500
scrolling: no
border: yes

county-publication-counts.js

(function() {

  let data;

  const container = '#selected-county-container',
      yearElem = document.querySelector('#county-year'),
      countyElem = document.querySelector('#selected-county'),
      nameElem = document.querySelector('#county-name'),
      countElem = document.querySelector('#county-count'),
      body = document.querySelector('body');

  const colors = d3.scaleLinear()
    .domain([0, 1])
    .range(['yellow', 'red']);

  const projection = d3
    .geoMercator()
    .scale(550) // zoom
    .center([31.0, 43.3]); // starting lat,lng

  const graticule = d3.geoGraticule()
    .step([2,2])

  const path = d3.geoPath().projection(projection);

  d3.json('county_publication_counts.geojson', json => {
    data = json;
    for (let i=0; i<12; i++) draw(1580 + (i*20));
  })

  const draw = year => {

    const map = d3.select(container)
      .append('svg')
      .attr('width', 270)
      .attr('height', 165)
      .attr('id', 'map-' + year)

    map.append('path')
      .datum(graticule)
      .attr('class', 'graticule')
      .attr('d', path);

    map.append('text')
      .attr('x', 10)
      .attr('y', 35)
      .style('font-size', '20px')
      .style('font-family', 'Montserrat, sans-serif')
      .style('fill', '#666')
      .text(year)

    // draw the paths
    const paths = map.selectAll('path').data(data.features),
        exp = d3.scaleLog().domain(getDomain(data, year));

    paths.enter()
      .append('path')
      .attr('class', 'terrain')
      .attr('d', path)
      .attr('stroke', '#4a4a4a')
      .attr('stroke-width', ' 0.01em')
      .attr('fill', getFill.bind(null, year, exp))

    paths.transition()
      .duration(1000)
      .attr('fill', getFill.bind(null, year, exp))
  };

  // find the min and max publication counts
  const getDomain = (data, year) => {
    let min = Number.POSITIVE_INFINITY,
        max = Number.NEGATIVE_INFINITY;
    data.features.map(feature => {
      feature.data.map(o => {
        if (o.year === year) {
          if (o.val < min) min = o.val;
          if (o.val > max) max = o.val;
        }
      })
    })
    return [min, max];
  }

  // get the fill attribute for a path
  const getFill = (year, exp, d) => {
    const datum = d.data.filter(i => i.year == year);
    return datum.length
      ? colors( exp(datum[0].val) )
      : '#F5F5F3';
  }

})()

county_publication_counts.geojson

index.html

thumbnail.png