Spanish municipalities choropleth test with Canvas and preprojected TopoJSON

Example using a preprojected topojson based on es-atlas by Martín González. For now using a d3-geo-projection forked version by Roger Veciana.

<!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>

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

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