Japan Map [GeoJSON]

forked from hunzy's block: Japan Map [GeoJSON]

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js