読者です 読者をやめる 読者になる 読者になる

データ分析エンジニアが気まぐれに更新するブログ

勉強してきた技術などを適当に書いていければと思います。

D3.jsとThree.jsで日本地図を可視化してみた2

D3.js データ可視化 Three.js JavaScript

上記の前回記事では、D3.jsとThree.jsを使って日本地図を描画しました。


D3.js : http://d3js.org/

Three.js : http://threejs.org/


そこからさらに勉強を進めまして、より3Dに描画できるようになりましたので、データものせて作ってみました。


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


ちなみに色やウインドウの形状は、あるアニメっぽく作ってみました。*1

近未来っぽくてカッコイイ感じなのに惚れまして笑


前回は日本地図をHTML5CanvasとしてD3.jsで描画して、テクスチャとしてThree.jsのオブジェクトに貼り付ける方法を取っていました。

結局その方法をやめて、D3.jsのpathメソッドやtopojsonなどで描画する地形の座標を解析して、Three.jsのオブジェクトの座標として扱うようにして、描画をする部分に関しては完全にThree.jsに任せるようにしました。

データは、国土交通省の「航空旅客動態調査」からお借りしました。


国土交通省の「航空旅客動態調査」(平成25年度) : http://www.mlit.go.jp/koku/koku_tk6_000001.html


使わせてもらっといて言うのもなんですが、PDFでしたので、データの整備が結構大変でした。

公開されているデータでも、こういう形式だとなかなか扱いづらいです。


出発空港と行き先空港を放物線で繋いで、乗客数を行き先空港地点に円の半径の大きさとして表して描画してみましたが、結局値に差がありすぎる関係で、乗客数が1000人を超えないと、円を描いているのかすらわからない状態に…。

人口データなどはやっぱり定番ですので、ちょっと面白いものにと思って走ってみた結果、ただの遊ぶ道具になってしまった感はあります。


ちなみに、前回記事やここら辺までのことをThree.jsでやるとなると、それなりに勉強する参考書などがあれば良いですが、私の場合は下記を参考にしましたので、紹介します。