D3 Examples - Indonesia ADM2

Indonesia ADM2

The topology information contains the boundary lines between regencies ("kabupaten@id") in the Indonesian teritory. The process for producing the output file id.json follows the commands below. Note that before executing topojson, I simplified the map in http://www.mapshaper.org/ by 0.30%. The final file sizes 216 KB with decent details for overviewing.

$ ogr2ogr -f GeoJSON regency.json IDN_adm2.shp // Upload regency.json to mapshaper.org $ topojson --id-property id=ID_2 -p name=NAME_2 -o id.json regency.json

Data source: gadm.org

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.regencies {
  fill: #222;
}
​
.regencies :hover {
  fill: orange;
}
​
.boundary {
  fill: none;
  stroke: #fff;
  pointer-events: none;
}
​
.tooltip {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  text-align: center;
  width: 150px;
  height: 13px;
  padding: 5px;
  font-size: 10px;
  background: #ffffe0;
  border: 1px;
  border-radius: 8px;
  pointer-events: none;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var width = 960,
    height = 400;
​
var projection = d3.geo.mercator()
    .scale(1150)
    .translate([-1900, 150]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var tooltip = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
​
d3.json("id.json", function(error, id) {
  svg.append("g")
      .attr("class", "regencies")
    .selectAll("path")
      .data(topojson.feature(id, id.objects.regency).features)
    .enter().append("path")
      .attr("d", path)
      .on("mouseover", function(d) {
          d3.select(this).transition().duration(300).style("opacity", 1);
          tooltip.transition()
              .duration(300)
              .style("opacity", 1)
              .text(d.properties.name)
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY -30) + "px");
      })
      .on("mouseout", function() {
        d3.select(this).transition().duration(300).style("opacity", 0.8);
        tooltip.transition().duration(300).style("opacity", 0);
      });
​
  svg.append("path")
      .datum(topojson.mesh(id, id.objects.regency, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
});
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
    