D3 Examples - Multiple maps

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }
  svg {
    border: 1px solid #f0f;
  }
  .map-container path {
    stroke:#fff;
    stroke-width:.3px;
  }
</style>
​
<body>
​
</body>
​
<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<script type="text/javascript">
var width = 190,
    height = 150;
var years = d3.range(1895, 2014);
var projection = d3.geoAlbersUsa()
    .scale(240)
    .translate([width/2, height/2]);
var geoPath = d3.geoPath()
  .projection(projection);
// var svg = d3.select("body").append("svg")
//     .attr("width", width)
//     .attr("height", height);
var color = d3.scaleThreshold()
 .domain([-3.95, -2.95, -1.95, 2, 3, 4])
 .range(["#d73027 ","#fc8d59 ","#fee08b ","#ffffbf ","#d9ef8b ","#91cf60 ","#1a9850 "]);
  
​
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>
    