, , , 2014年3月11日

前回の記事でGeoJSONについて紹介・解説しましたが、D3.js界隈だとTopoJSONというフォーマットを良く使うようです。解説記事はいくつかありますが、若干分かりづらいので、重要な部分だけをざっくりと解説したいと思います。

記事の信頼性はあまり保証できないです。TopoJSONの日本語仕様書はこちらにあるので、正確に知りたい人は目を通して下さい。

TopoJSONって?

TopoJSONとはGeoJSONの子供みたいなものです。
D3.jsの作者がGeoJSONのフォーマットに不満を感じ、新しく策定しました。
つまり、「僕が考えた最強のフォーマット!

何がすごいの?

GeoJSONに比べ、データ量が格段に小さくなります。物によっては80%も減るらしい。
その理由として、

  • 境界線は一回しか書かない
  • 浮動小数点は使わない
  • 塗りと境界線はまとめちゃえ!

みたいな努力をしてる。確かに、地図の描画で境界線を何回も書くのは無駄ですね。

TopoJSONは素晴らしいですが、基本的にはD3.jsのみで使われます。
世界で標準的に認められているフォーマットって訳では無いようです。
(いつかは認められるかも?)

どうやって使うの?

topojsonというツールを使って、GeoJSONをTopoJSONに変換できます。topojsonはnpmから入手できます。

npm install -g topojson

肝心のGeoJSONは、また別のSHAPEファイルというものから作られます(ややこしい!)。
SHAPEファイルからGeoJSONへの変換にはgdalの中のogr2ogrというツールを使います。Homebrewなら簡単に入手できます。

brew install gdal

それぞれの使い方は、以下の場所に書かれています。

まとめ

まとめると、「TopoJSONを使うことによってD3.jsで高速に地図描画が出来る!」ということです。

来週はこの辺とかこの辺とかを頼りにしながら、日本地図を描画できたら嬉しいなぁと思っています。

CATEGORIES