Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/index.html

Last active March 7, 2018 06:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shimizu/44bfe038e1ba6942b4ba to your computer and use it in GitHub Desktop.
Save shimizu/44bfe038e1ba6942b4ba to your computer and use it in GitHub Desktop.
Download ZIP
Presimplify Example
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>presimplify example</title>
<style>
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
svg {
width:99.9%;
height: calc(100% - 30px);
}
#range {
width:99.5%;
}
</style>
<body>
<input id='range' class='range' type='range' min='0', max='0.2' step='any' value="0"/>
<svg></svg>
<script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
<script type="text/babel">
const svg = d3.select('svg');
const projection = d3.geoMercator();
let currentSimplyThd = 0;
d3.json('https://gist.githubusercontent.com/shimizu/68288d9ec87c7c3b885f/raw/d7ac8606debdfc871edd2c681f7f01e4d264f3ef/japan.topojson', function(json) {
//簡素化のためのデータ(隣接する３点を結んだ三角形の面積)を付加する
const presimplify = topojson.presimplify(json);
//topjson->geojson
const geojson = topojson.feature(presimplify, presimplify.objects.japan);
//描画処理実行
draw(geojson, currentSimplyThd);
const reDraw = draw.bind(null, geojson);
d3.select("#range").on("input", function(){
currentSimplyThd = this.value;
reDraw(currentSimplyThd);
});
d3.select(window).on("resize", function(){
reDraw(currentSimplyThd);
});
});
//地形を描画する
function draw(geojson, threshold){
const w = svg.node().clientWidth;
const h = svg.node().clientHeight;
projection.fitExtent([[0, 0], [w, h]], geojson);
//簡素化のためのカスタムストリームリスナーを設定
const simplify= d3.geoTransform({
point: function(x, y, z) {
//隣接した３点を結んだ面積が閾値を超えるものだけをpixcel座標に変換する
if (z >= threshold) this.stream.point(projection([x, y]));
}
});
//pixcel座標のコレクションをpath要素のd属性に渡すパスデータ形式に変換する関数を生成
const path = d3.geoPath().projection(simplify);　
//path(地形)要素を追加する
const updateMaps= svg.selectAll('.map').data([geojson])
const enterMaps = updateMaps.enter()
.append("path")
.attr("class", "map")
.attr("fill", "none")
.attr("stroke", "black")
updateMaps.merge(enterMaps)
.attr("d", path)
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment