【D3.js】D3.jsを使ってSVGで地図を描く

tsuru_gunma

D3.js ver.4を使ってSVGで地図の作成をおこないます。

データの作成

地図の元となるデータを作成します。
国土数値情報ダウンロードサービスから群馬県の行政区域データをダウンロードします。
ダウンロードしたファイルの中から、shpファイルをQISに読み込ませてGeoJSONに変換。
「レイヤー」→「名前をつけて保存」→ GeoJSON形式で保存。

地図の表示

・d3.jsの読み込み

・geojsonデータを読み込みsvgとして出力するスクリプト

example

TopoJSONを使う

GeoJSONをTopoJSONに変換することで、データセットのファイルサイズを小さくすることができます。

・TopoJSON変換用のツールをインストール

・GeoJSONをTopoJSONへ変換

・TopoJSONプラグインを読み込み。

・geojsonデータを読み込みsvgとして出力するスクリプト

example