D3.jsで地図を描く

GeoDev Meetup #4

D3.jsで地図を描く

Created by Masayuki Shimizu / @_shimizu

自己紹介

清水正行

群馬県高崎市在住
2015年11月に転職
DataViz/GIS エンジニア

D3.jsとは？

データビジュアライゼーションライブラリ

こんなことができます

D3 GEO

D3.jsの地理情報視覚化機能

Projection

D3は様々な投影法に対応

Map Projection Transitions

D3 地図描画フロー

D3を使って地図を表示するまでの流れ

地理情報(GeoJSON)を読み込む
投影法、スケール、初期位置などを設定
パス変換関数を生成
変換関数を用いて地理情報をパスストリングに変換
インラインSVGを使ってブラウザに表示

D3で使う地理情報

市区町村境界データ

GeoJSON
6MB
1755 Features
15795 Properties

地図描画

//geojsonの読み込み
d3.json("city.geojson", (geojosn) => {

	//プロジェクションの設定
	const projection = d3.geoMercator()
		.fitExtent([[0, 0], [widht, height]], geojson)
	
	//パスジェネレーターを生成する
	const geoPaht = d3.geoPath().projection(projection)
			
	//path要素にデータを束縛する
	const path = svg.selectAll("path").data(geojson.features)
	
	//path要素が足りなければ追加する 
	const appendPath = path.enter().append("path")    
	
	//path要素が多すぎるなら削除する
	const removePath = path.exit().remove()
		
	//アトリビュートを更新して地図を描画する
	const maps =  path.merge(appendPath).attr("d", d => geoPaht(d))
})

可視化

    //人口が２万人以上・以下で塗り分ける
    maps.attr("fill", d => (d.properties.pop > 20000) ? "green" : "blue"   )

    //群馬県に所属する市区町村だけ赤く塗る
    maps.filter(d => d.properties.pref === "群馬県").attr("fill", "red")