Map Small Multiples Expand by pstuffa

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">

  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }

  svg:hover {
    border: 2px solid #bfbfbf; 
  }

  .map-container path {
    fill:#d0d0d0;
    stroke:#fff;
    stroke-width:.3px;
  }

  .divisions {
    fill: none;
    stroke: #000;
    stroke-width: .25;

  }

</style>

<body>
<p id='loading'>its loading</p>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>


<script type="text/javascript">
  
var svgWidth = 300,
    svgHeight = 200;

var colorScale = d3.scale.threshold()
    .domain([-4, -2, 2, 4])
    .range(["#a50026","#f46d43","#fee08b","#1a9850","#006837"]);

queue()
    .defer(d3.csv, "tidy-drought-data.csv")
    .defer(d3.json, "climate-divisions2.json")
    .await(ready);

function ready(error, data, climateDivisions) {
  if (error) return console.warn(error);

  var droughtIndexLookup = {};
  data.forEach(function(d) {
    d.val = +d.val;
    droughtIndexLookup[d.id] = d.val;
  });

  nestedDroughtData = d3.nest()
    .key(function(d) { return d.year })
    .key(function(d) { return d.id; })
    .map(data)


  climateDivisionsPath = topojson.feature(climateDivisions, climateDivisions.objects.divisions).features

  // Create an array of distinct years then run a forEach loop to draw a chart
  var years = d3.set(data.map(function(d) { return d.year })).values()

  years.forEach(function(d) {
      drawChart(d, svgWidth, svgHeight);
    })

  // Function that draws all the charts
  function drawChart(year, width, height) {

    // Append the SVG 
    var svg = d3.select("body")
        .append("svg")
        .data([1])
        .attr("class", "map")
        .attr("width", width)
        .attr("height", height)

    // Append the year
    svg.append("text")
          .attr("dx", 10)
          .attr("dy", 20)
          .text(year)

    // Create the projection
    var projection = d3.geo.albersUsa()
        .scale(300)
        .translate([width/2, height/2]);

    var path = d3.geo.path()
      .projection(projection);

    // draw the climate divisions
    svg.selectAll(".divisions")
            .data(climateDivisionsPath)
            .enter().append("path")
            .attr("class","divisions")
            .attr("d", path)
            .style("fill", function(climateDiv) {
              // Find the drought index by using your nested dictionary 
              var droughtIndex = nestedDroughtData[year][climateDiv.id][0].val
              return colorScale(droughtIndex);
            })
  }


function updateChart(svgSelection, year, width, height) {

  // Get the year from the text we appened before 
  var year = svgSelection.select("text").text();

  // Update the size of the current SVG 
  svgSelection
    .transition()
    .ease("bounce")
    .duration(500)
    .attr("width", width)
    .attr("height", height)

  // reset the projection with the new width and height
  var projection = d3.geo.albersUsa()
      .scale(width)
      .translate([width/2, height/2]);

  var path = d3.geo.path()
    .projection(projection);

  // Udate the positions of the paths 
  svgSelection.selectAll(".divisions")
    .data(climateDivisionsPath)
    .transition()
    .ease("bounce")
    .duration(500)
    .attr("class","divisions")
    .attr("d", path)
    .style("fill", function(climateDiv) {
      // Find the drought index by using your nested dictionary 
      var droughtIndex = nestedDroughtData[year][climateDiv.id][0].val
      return colorScale(droughtIndex);
    })
}

  d3.selectAll(".map")
    .on("click", function(d) {

      console.log(this.__data__);
      if(this.__data__ == 1) {
        d3.select(this).data([2]);
        updateChart(d3.select(this), d, 900, 400) 
      }
      else {
        d3.select(this).data([1]);
        updateChart(d3.select(this), d, 300, 200) 
      }
   });

 d3.select("#loading").text("Click on a map to enlarge")
}




</script>