データ可視化特化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弱以上の地震が発生した地点の可視化」を行うことも可能です。