D3 Examples - Choropleth map of Colombian Cities

Resultado del plebiscito por la paz en Colombia por ciudad
Este mapa muestra la diferencia entre los votos del no y los del sí en Colombia. Cada ciudad o municipio está coloreado dependiendo de la diferencia entre los votos del no y los del sí.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.tract {
  stroke: #777;
}
.tract:hover {
  stroke: orange;
}
.tract-border {
  fill: none;
  /*stroke: #777;*/
  pointer-events: none;
}
.tract-border-state {
  fill: none;
  stroke: #333;
  stroke-width: 1px;
  pointer-events: none;
}
.legend {
    font-family: sans-serif;
    font-size: 10pt;
}
.legendTitle {
  font-weight: bold;
  font-size:11pt;
}
</style>
<svg width="800" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.11.0/d3-legend.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = { top: 20, bottom:20, right: 20, left: 20};
var fmt = d3.format(" >5.0%");
function ready(error, mapData, data) {
  if (error) throw error;
​
​
  var dictCities = {};
  data.forEach(function (d) {
    //Parse the percentages
    d["% No"] = +(d["% No"].slice(0,-1).replace(",", "."))/100;
    d["% Si"] = +(d["% Si"].slice(0,-1).replace(",", "."))/100;
    d.result = d["% Si"] - d["% No"];
    var res = {};
    dictCities[d.Municipio.toUpperCase()]=d;
  });
​
  var color = d3.scaleSequential(d3.interpolateRdBu)
    .domain([-1, 1]);
​
  var land = topojson.feature(mapData, {
    type: "GeometryCollection",
    geometries: mapData.objects.mpios.geometries.filter(function(d) {
      return (d.id / 10000 | 0) % 100 !== 99;
    })
  });
  var landState = topojson.feature(mapData, {
    type: "GeometryCollection",
    geometries: mapData.objects.depts.geometries.filter(function(d) {
      return (d.id / 10000 | 0) % 100 !== 99;
    })
  });
  // EPSG:32111
  var path = d3.geoPath()
      .projection(d3.geoTransverseMercator()
          .rotate([74 + 30 / 60, -38 - 50 / 60])
          .fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], land));
  var pathState = d3.geoPath()
      .projection(d3.geoTransverseMercator()
          .rotate([74 + 30 / 60, -38 - 50 / 60])
          .fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], landState));
​
  svg.selectAll("path")
    .data(land.features)
    .enter().append("path")
      .attr("class", "tract")
      .style("fill", function (d) {
        var city = dictCities[d.properties.name];
        if (city)
          return color(city.result);
        else {
          console.log(d.properties.name + "," + d.properties.dpt);
          return color(0);
        }
      })
      .attr("d", path)
    .append("title")
      .text(function(d) {
        var city = dictCities[d.properties.name];
        var msg = d.properties.name + ", " + d.properties.dpt;
        if (city)
          msg += " %Si - %No: " + fmt(city.result);
        return msg;
      });
  svg.append("path")
      .datum(topojson.mesh(mapData, mapData.objects.mpios, function(a, b) { return a !== b; }))
      .attr("class", "tract-border")
      .attr("d", path);
​
  svg.append("path")
      .datum(topojson.mesh(mapData, mapData.objects.depts, function(a, b) { return a !== b; }))
      .attr("class", "tract-border-state")
      .attr("d", pathState);
​
  // The legend
  svg.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(660,20)");
​
  var legendLinear = d3.legendColor()
    // .shapeWidth(30)
    .cells(7)
    .orient('vertical')
    .title('%Si - %No')
    .labelFormat(fmt)
    .labelAlign("start")
    .scale(color);
​
  svg.select(".legend")
    .call(legendLinear);
}
​
d3.queue()
  .defer(d3.json, "colombia-municipios.json" )
  .defer(d3.csv, "plebiscito_Colombia_2016.csv" )
  .await(ready);
​
</script>
    