Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active February 25, 2023 11:21
Show Gist options
  • Save shimizu/fc2e1fdd870987785aa55242a4bfefe2 to your computer and use it in GitHub Desktop.
Save shimizu/fc2e1fdd870987785aa55242a4bfefe2 to your computer and use it in GitHub Desktop.
D3.js v4 Mapping Tutorial : TopoJSON
license: mit
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment