Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

データ可視化特化GISフレームワーク「deck.gl」を使ってみた


はじめに

先進的なタクシー事業で有名なかのUber社によるオープンソースフレームワーク「deck.gl」を使ってみたので紹介を兼ねた感想の記事になります。このフレームワークはデータビジュアライゼーションに特化したGISフレームワークとなっております。WebGLを利用してリッチなデータ表示を可能にしています。はじめて触りましたがReact.jsを使っていて、html側は非常にすっきりと、アプリケーション側はJavascriptでシンプルに作れるようになっているので、保守や機能追加もしやすいのかな、なんて感じています。個人的にはかなりやべーフレームワークなんじゃないかと思うので、もっと広がれば良いなと思い紹介記事を書くに至りました。


deck.glとは?

deck.gl 可視化パターン(公式サイトより) f:id:kiguchi999:20181207220441p:plain どのパターンでビジュアライズするかにより、必要なデータの構造も変わってきます。 例えばヒートマップの類(HexagonLayer)であれば緯度経度の.csvですが、他のレイヤーならばまた別の形式のデータが必要です。


ダウンロード

github.com ソースはこちらから

自分も勉強中で、基本的には公式Exampleをいじりながら、望む形に編集していく事になるかと思います。


使用例(自治体所在地の密集度を可視化した例)

f:id:kiguchi999:20181130025948p:plain この図はHexagonLayerのソースを一部改変し、自治体所在地の座標データから、一定エリア(ひとつのヘキサ)にどれだけの自治体が密集しているか、という可視化を行っております。 たとえばデータソースの形式が経度・緯度になっていれば、「震度5弱以上の地震が発生した地点の可視化」を行うことも可能です。


手軽に使う方法

Uberは神なのか kepler.gl

このdeck.glは既にWebサービスに落とし込まれていて、データソースさえ用意すればすぐにビジュアライゼーションを体験出来ます。 f:id:kiguchi999:20181207222520p:plain ※公式サイトよりアメリカの州別失業率 もう、これ以外いらないんじゃないかな。


感想

正直勉強中でわからない事だらけですが、React.js自体の可能性と、オープンソースの魅力を再認識しました。 このフレームワークについては、今後も目が離せないところです。