D3 Examples - Japan Map [GeoJSON]

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>
​
<style>
​
.geojson {
 fill: none;
 stroke: red;
 stroke-width: 5;
}
  
</style>
  
  
</head>
<body>
​
<script>
  
  
​
  
  
var width = 960;
var height = 500;
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("city-limits.geojson", function (error, jpn) {
​
  
  
  
    var projection = d3.geo.mercator()
        .translate([width/2,height/2])
       .center([-122.3, 47.6])
        .scale(67000)
        .translate([width / 2, height / 2]);
​
    var path = d3.geo.path()
        .projection(projection);
​
    svg.selectAll("path")
    .data(jpn.features)
    .enter()
    .append("path")
    .attr("stroke", "white")
    .attr("stroke-width", "0.5")
    .attr("d", path);
  
  
  
​
cook = {"type": "LineString", "coordinates": [[-122.350964, 47.618418], [-122.284119
, 47.663509]] }
​
​
svg.selectAll(".geojson").data([cook])
.enter()
.append("path")
.attr("class","geojson")
.attr("d", path);
//.attr(color , "red")
​
  
  
  
  
});
</script>
</body>
</html>
    