D3 Examples - Spanish municipalities choropleth test with Canvas and preprojected TopoJSON

xxxxxxxxxx
 
<!DOCTYPE html>
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
​
var context = d3.select("canvas").node().getContext("2d"),
path = d3.geoPath().context(context);
​
var color = d3.scaleThreshold()
  .domain([5, 9, 19, 49, 74, 124, 249, 499, 1000])
  .range(["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]);
​
d3.queue()
  .defer(d3.json, "municipalities.json")
  .defer(d3.csv, "municipalities_population.csv")
  .await(ready)
​
function ready(error, es, pop) {
    if (error) throw error;
​
    var obj = []
​
    // loop through the csv to create a new object accesible by ids
    pop.forEach(function(d){
        obj[d.id] = d;
    });
​
    var features = topojson.feature(es, es.objects.municipalities).features
​
    for (var i = 0; i < features.length; i++) {
​
​
        if (obj[features[i].id]) {
​
            context.fillStyle = color(obj[features[i].id].rate)
            context.beginPath()
            path(features[i])
            context.fill()
      }
​
  }
​
  // country border
  context.beginPath()
  path(topojson.feature(es, es.objects.nation))
  context.strokeStyle = "rgb(100, 100, 100)";
  context.stroke()
​
​
};
</script>
​
    