Multiple maps

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

<body>

</body>

d3.queue()
    .defer(d3.csv, "tidy-drought-data.csv")
    .defer(d3.json, "climate-divisions2.json")
    .await(ready);
  
function ready(err, data, climateDivisions) {
  console.log(data, climateDivisions);
  
   data.forEach(function(d) {
     d.val = +d.val;
     d.color = color(d.val);
  });
  
    droughtLevelByYearAndId = d3.nest()
      .key(function(d) { return d.year; })
      .key(function(d) { return d.id; })
      .object(data);
  
  console.log(droughtLevelByYearAndId);
 var climateDivisionsFeature = topojson.feature(climateDivisions, climateDivisions.objects.divisions).features;
  
  var years =d3.keys(droughtLevelByYearAndId);
  console.log(years);
  years.forEach(function(year){
  
  var d3Canvas = d3.select('body').append('canvas');
  var ctx = d3Canvas.node().getContext('2d');
  geoPath.context(ctx);
  
  climateDivisionsFeature.forEach(function(feature){
    ctx.beginPath();
    ctx.fillStyle=droughtLevelByYearAndId[year][feature.id][0].color;
    ctx.strokeStyle='#fff';
    geoPath(feature);
    ctx.fill();
    ctx.stroke();
//     ctx.closePath();
  	});
  });
  
//   svg.append("g")
//       .attr("class", "map-container")
//     .selectAll("path")
//       .data(climateDivisionsFeature)
//     .enter().append("path")
//       .attr("d", path)
//       .style("fill", function(d) {
//         return droughtLevelByYearAndId[1922][d.id][0].color;
      };

</script>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v4.js

https://d3js.org/topojson.v1.min.js