D3.jsとthree.jsによるgeoプログラミング

GEOプログラミングd3.js と three.js による

2014 .1 .24 @JHAUS B1F Uniba Inc. Kochiro Mori

D3.JS

• 豊富な座標変換系ライブラリ（geo）

• svgによる描画

GEOJSON

• 地図データを表現するための汎用フォーマット

• d3.jsで標準的に使われている

TOPOJSON

• GeoJSONを拡張したJSONフォーマット

• GeoJSONではフィーチャーのポリゴンの座標はフローティングポイントで表現されている

• 整数表現にすることでデータの精度を保ちつつ効率的に圧縮できる

D3 SVGによる地図の描画

• D3.jsとTopoJSONで地図を作る（http://

ja.d3js.node.ws/blocks/mike/map/）

D3 GEO を使ってGEOJSONから THREE MESH MATERIAL を生成する

• GeoJSONの用意

• 国土交通省国土政策局GISHPのサイト(http://

nlftp.mlit.go.jp/ksj/gml/gml_datalist.html)

SHAPEファイルをGEOJSONファイルにする

• GDAL (http://www.gdal.org)

• QGIS (http://www.qgis.org/ja/site/)

GEOJSONをTHREE MESH の頂点情報にする

• 一度d3のsvgマップオブジェクトで読み込んでおいて頂点情報として取り出す

• d3-threeD.js (https://github.com/asutherland/d3-threeD/blob/master/lib/d3-threeD.js)

デモ

• http://moxus.org/doc/japan-geo-demo

OPENFRAMEWORKS の ADDON にしてみた

• 色々な変換プロジェクション（投影法）

• 地図座標系からデカルト座標系への変換

メルカトル図法

パノラマ投影法

ランベルト正積方位図法

ステレオ投影法

• ofxGeoJSON (https://github.com/moxuse/ofxGeoJSON)

• 以上、ありがとうございました。