D3.js v4 Mapping Tutorial : TopoJSON by shimizu

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>D3.js v4 Mapping Tutorial : TopoJSON</title>
</head>
<body>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>    
<script>
//プロジェクション設定	
var projection = d3
	.geoMercator() //投影法の指定
	.scale(16000)	//スケール（ズーム）の指定
	.rotate([-0.25, 0.25, 0]) //地図を回転する　[x,y,z]
	.center([139.0032936, 36.3219088]); //中心の座標を指定

//パスジェネレーター生成
var path = d3.geoPath().projection(projection);　

//地図用のステージ(SVGタグ)を作成
var map = d3.select("body")
	.append("svg")
	.attr("width", 960)
	.attr("height", 500); 


//地理データ読み込み
d3.json("gunma.topojson", drawMaps);

//topojsonをgeojsonに戻す
function convertGeoJSON(topo) {
    return topojson.feature(topo, topo.objects.gunma);
}

//地図を描画
function drawMaps(topo) {
	var geojson = convertGeoJSON(topo);
	
	map.append("svg:g")
		.attr("class", "gunma")
		.selectAll("path")
		.data(geojson.features)
		.enter()
		.append("svg:path")
		.attr("d", path)  //dataに投影法を適応
		.attr("fill-opacity", 0.5)
		.attr("fill", "green")
		.attr("stroke", "#222");    
}

</script>
</body>
</html>