世界中の大型貨物船の航行ルートを可視化した驚きのビッグデータ可視化 WebGL デモ!

doxas : 2016-04-23 12:10:27

これだけ大量のデータを可視化するとは驚き!

今回ご紹介するのは、世界地図の上に大型貨物船の航行ルート情報をマッピングした可視化系のデモ作品です。

実は先に断っておくと、トップ画像のように白く航行ルートを表現した部分のレイヤーは、たぶん WebGL ではなく画像を読み込んでいるものだと思います。

しかし、船の一隻ごとの描画を行う点描モードがあるのですが、こちらは WebGL によって大量のデータを一気にさばいているみたいですね。

可視化系のデモとしては面白いテーマの作品だと思います。

内陸部にめり込んで航行する船も

今回のデモは先にも書いたとおり、白く線状にルートを可視化しているレイヤーは画像を地図上にマッピングしているものだと思います。

こちらはいわゆる地図アプリケーションのレイヤーとして読み込まれているため、ズームイン・アウトの操作で遅延読込されてくる感じに見えます。

このレイヤーでは WebGL を直接使っているわけではなさそうですが、しかし見応えのある、とても視覚的にわかりやすいデータの可視化だと思います。

この可視化の元になっているのは、ヨーロッパのどこかの機関で収集しているデータのようですが、これは面白いですね。

WebGL で描画される船舶の点描モードでは、ひとつひとつの点がアニメーションして動いていくので、遠巻きに眺めているだけでも世界中の船がどんな感じで海をわたっていくのか、その雰囲気がとてもよくわかります。

同時に、これだけ多くの船が日々行き交っているのかと思うと、純粋に驚きますね。比較的大型の船の情報だけを扱っているデータのようなので、小型船舶まで入れたらもっと大変なことになるんでしょう。

ひとつひとつの船を表している点は、その種別に応じてカテゴリごとに色を付けることができるようになっています。

東京湾付近を見てみると、以下のような感じ。

タンカーやコンテナ船などがたくさん出入りしていることがわかりますね。実際にはこれが常にアニメーションして動いているので、東京の近くで船がうごめいているように見えます。

画面全体を見てみると、画面の下のほうにはタイムスライダーのようなものがあるのがわかります。

これを使って、インタラクティブに対象となる時間帯をずらすことができるようになっています。

WebGL で描いているとは言え、元となるデータは航行ルートの動きまで含めたものだと思いますので、ロード時間は少し掛かりますね。それでも、とても気になるほどの長時間待たされるというわけではありませんので、優秀だと思います。

地図上にデータをマッピングする可視化の場合、緯度経度の計算などが結構たいへんです。今回のデモの場合はさらに、船がどのように移動しているのかの軌跡のデータまで使っているわけですから、計算の負荷はそこそこ高いものになりそうな気がします。

大量の点群を同時に処理するには、やはり WebGL はかなり便利だったのではないかなと想像しますが、実装としては D3.js を使っているようなので、あまり WebGL 実装として特殊なことはしていないとも想像できます。

WebGL をどういう形で活用するにせよ、少ない工数で優れた体験を創出できるというのは素晴らしいと思います。

D3.js の活用事例としても、面白いものかなと思います。ぜひチェックしてみてください。

リンク:

Shipmap.org | Visualisation of Global Cargo Ships | By Kiln and UCL

share

follow us in feedly

search

search

monthly

sponsor

social