Leaflef.jsとD3.jsでマップデータを可視化してみた

Leaflet.jsというWebマップ表示ライブラリを知りましたので、使ってみました。

Leaflet.js

Leaflet.js : http://leafletjs.com/

結構前からあったそうな。

※画像をクリックするとページを移動します。


OpenStreetMapは知っていたけども、敷居が高そうと思っていましたが、たったこれだけのソースで表示できてしまった…。

カスタマイズ性が低いとのことだけども、地図自体はカスタマイズする機会も少ないだろうし、基本的な可視化機能として、マーカーを置いたり、地形に色を塗ったりできるようです。

使いこなしていけば、いろんなことが出来るかもしれません。

D3.jsとの連携

ちなみにD3.jsとの連携も出来るようです。

実際に簡単にやってみたところ、このような感じになりました。

※画像をクリックするとページを移動します。


いやいや十分でしょ!

あとは、D3.jsのスケール関数とかで色の濃淡や、ポイント円の大きさでデータを表示もできますし、ポイント間に線を引っ張ることもできますし。

2D地図のオーバーレイ可視化で良いのならば、かなり多彩な表現が可能なのでは…。

D3.jsでgeojsonやtopojsonを読み込んで地形を表示して頑張る必要はなかったらしい笑

まあ、デザイン性を追求するならば、自前で頑張るのも良いかもしれませんが、しかし、拡大・縮小で自動的に地名や境界線などの粒度も調整してくれる地図クライアントツールってところは大きいですねー。

うーん、これで色々と格好良く便利に可視化してみたいです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です