D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】

D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】

この記事は、Webで地図を描きたいんだけどどうしたらいいの?D3.jsってどうなの?という疑問に答えます。

D3.jsを使って愛知県の地図を描きます。Toposimplifyコマンドの係数を指定してスマホやタブレットでも快適に使用できるレベルまで圧縮してみます。

D3.jsとは

D3.jsとは、javascriptでデータを基にSVGを描画するライブラリ
Data-Driven Documents(データ駆動型ドキュメント)の3つのDをとって、d3といい、ライセンスは修正BSDです。

修正BSDライセンス:BSDライセンス(自己責任/作権の表示は消さない/複製・改変・再配布・販売等は自由が条件)

SVGとは?

SVG(Scalable Vector Graphics)とは、W3Cが標準化したタグ形式で画像を表現する規格。
HTML等で利用することが可能。
SVGの特徴は、ベクタ形式で画像を扱い、拡大、縮小時の劣化が起こりにくいという利点がある。
※Adobeのイラストレーターなどは代表的なベクタ形式のソフト

地図を描く

d3.jsのライブラリに、JSONファイルを読み込み表示します。
JSONファイルは別途自作することも可能なようです。
今回は国土交通省国土政策局国土情報課が提供する国土数値情報のデータを利用します。

今回は下図のような地図を作成して、圧縮比較をします。(画像をクリックでデモページ)
D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】-圧縮対象イメージ

線画に使用するJSONファイル

通常GeoJSON形式で地図の線画は可能ですが、ファイルが大きくグラフィックボードなどを積んでいない場合には処理が重くなります。

その為簡易形式にコンバートしたTopoJSON形式にてファイルを生成しなおします。

TopoJSONとはd3.jsの作者が作成したGeoJSONの拡張した地理情報データの規格。
GeoJSONファイルのジオメトリを、TopoJSONではarcsという形で記述し、重複するジオメトリを排除し合理化を図っている。

国土数値情報ダウンロードサービスページにて、GML(JPGIS2.1)シェープファイル形式を選択し、2.政策区域 > 行政区域のデータを選択します。

※圧縮ファイルにはGeoJSON形式ファイルも存在します。

D3.jsのセットアップ

npm(node.js)が前提条件。
node.jsのバージョンがv0.12以降でないとD3.jsのv1でしか作成できません。
※npmのセットアップは下記参照。

$ npm install -g topojson shapefile
  • topojson:geo2topoやtoposimpligyなどのコマンドを含む
  • shapefile:sha2geoなどのコマンドを含む

※shapefileはshaファイルから元となるGeoJSON作成時に使用。
※ダウンロードファイルにはGeoJSONファイルも含まれるのでtopojsonライブラリのみでもOK。

node.jsのセットアップ(npm)

CentOS6.8にセットアップしたので下記のファイルをセットアップします。

$ sudo rpm -Uvh https://rpm.nodesource.com//pub_8.x/el/6/x86_64/nodejs-8.9.4-1nodesource.x86_64.rpm

TopoJSONファイルの生成

GeoJSONファイルをTopoJSONファイルに置換します。

$ geo2topo -q 1e6 sample=input.geojson > output.topojson

Toposimplifyコマンド

TopoJSON形式ファイルを指定係数にて圧縮するコマンド。
引数に係数を渡すことで圧縮が可能。

$ toposimplify -P 0.1 sample.topojson > simplified.topojson

係数による圧縮の比較

実際に-P係数を変化させてどの程度劣化するかを検証してみます。

連続する3点でできる三角形、各三角形の面積が閾値より小さくなるとき、真ん中の点を間引くことでパスの構成点を削減する。

TopoJSONファイルサイズの変化

係数(-P) ファイルサイズ【圧縮率】
【元データ】 1,600.0KB ( 1.6MB ) 【100.0%】
【0.75】 1,300.0KB ( 1.3MB ) 【 81.2%】
【0.50】  978.9KB ( 1.0MB ) 【 61.1%】
【0.25】  609.7KB ( 0.6MB ) 【 38.0%】
【0.10】  368.4KB ( 0.4MB ) 【 23.0%】
【0.05】  284.4KB ( 0.3MB ) 【 17.8%】
【0.01】  209.6KB ( 0.2MB ) 【 13.1%】

変換後の画像変化

(画像をクリックでデモページ)
D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】-圧縮と画像劣化
0.5以下でない場合には今回の拡大率では変化がわかりにくいため省略。
※0.05で劣化が激しいので0.01では比較なし

画像劣化とパフォーマンス

拡大率をどこまで行うかにより許容範囲があると思いますが、県レベルの場合には0.05でも遜色なし。
サンプルの三河大島になると0.25くらいは欲しい所かと思います。

拡大・縮小パフォーマンス

  • PCの場合:0.25以上でも問題なし
  • スマホ/タブレット(ミドルレベル):0.05 or 0.10

参考サイト

作成にあたり、下記の記事を参考にさせて頂きました。

大変ありがとうございます。ぜひこちらの記事も見てください!

【Qiitaブログ】TopoJSON v2, v3の使い方 -コマンドライン編-@cieloazul310

まとめ

Webで動的な地図はCampus以外の選択肢としては利用価値は高いと思います。

コーディングに関してはjQueryと似ているのでなじみやすく、拡張性も高いようです。

D3.jsで利用できる地理データを実際に作ってみて検証してみたいと思います。

Webで地図を描く選択肢にD3.jsはオススメです!

2019.1.22:サンプルページをまとめました。

Follow me!