D3 Examples - GeoJson map of Colombia Municipios

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.tract {
  fill: #eee;
}
.tract:hover {
  fill: orange;
}
.tract-border {
  fill: none;
  stroke: #777;
  pointer-events: none;
}
.tract-border-state {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
  pointer-events: none;
}
</style>
<svg width="960" height="550"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.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};
d3.json("colombia-municipios.json", function(error, data) {
  if (error) throw error;
  var land = topojson.feature(data, {
    type: "GeometryCollection",
    geometries: data.objects.mpios.geometries.filter(function(d) {
      return (d.id / 10000 | 0) % 100 !== 99;
    })
  });
  var landState = topojson.feature(data, {
    type: "GeometryCollection",
    geometries: data.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")
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.properties.name; });
  svg.append("path")
      .datum(topojson.mesh(data, data.objects.mpios, function(a, b) { return a !== b; }))
      .attr("class", "tract-border")
      .attr("d", path);
​
  svg.append("path")
      .datum(topojson.mesh(data, data.objects.depts, function(a, b) { return a !== b; }))
      .attr("class", "tract-border-state")
      .attr("d", pathState);      
});
</script>
    