D3 Examples - Japan Map [TopoJSON]

xxxxxxxxxx
 
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>日本地図を描画する</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
</head>
<body>
​
    <script>
var width = 960;
var height = 500;
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("japan.topojson", function (error, jpn) {
​
    var projection = d3.geo.mercator()
        .center([137, 34])
        .scale(900)
        .translate([width / 2, height / 2]);
​
    var path = d3.geo.path()
        .projection(projection);
​
    var features = topojson.object(jpn, jpn.objects.japan);
​
    svg.selectAll("path")
    .data(features.geometries)
    .enter()
    .append("path")
    .attr("stroke", "white")
    .attr("stroke-width", "0.5")
    .attr("d", path);
});
</script>
</body>
</html>
    