- Level: Provinces (시도)
- Data format: TopoJSON
- Data source: GADM
The data download script can be found here.
The data download script can be found here.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
.province { | |
fill: #eee; | |
stroke: #999; | |
} | |
text { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 10px; | |
text-anchor: middle; | |
} | |
</style> | |
</head> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v0.min.js"></script> | |
<script> | |
var w = 800, h = 800; | |
var proj = d3.geo.mercator() | |
.center([128.0, 35.9]) | |
.scale(6500) | |
.translate([w/2, h/2]); | |
var path = d3.geo.path().projection(proj); | |
var svg = d3.select("body").append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
d3.json("skorea-provinces-topo.json", function(error, kor) { | |
var provinces = topojson.object(kor, kor.objects['skorea-provinces-geo']); | |
svg.append("path") | |
.datum(provinces) | |
.attr("class", "province") | |
.attr("d", path); | |
svg.selectAll("text") | |
.data(provinces.geometries) | |
.enter().append("text") | |
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.properties.NAME_1; }); | |
}); | |
</script> | |
</body> | |
</html> |