Presimplify Example by shimizu

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>