Gunma.web #51

汎用的な可視化ツールとしてのdeck.gl


Created by Masayuki Shimizu / @_shimizu

目録



  • 自己紹介
  • deck.glとは
  • deck.glの特徴
  • deck.gl ≠ 地図
  • deck.glの初め方(時間が余ったら)

本日のミッション:deck.glユーザを1人でも増やす

自己紹介



  • 清水正行
  • 群馬県高崎市在住
  • フリーランス
  • DataViz / webGIS エンジニア

主なお仕事

日経:Visual Data

衆院選得票率マップ

地価マップ

Blog

deck.glとは


世界最大の配車アプリを開発・運営するUber社がオープンソースとして公開していたデータビジュアライゼーションフレームワーク。 同じくUber社が公開している可視化スイート「Vis.gl」のツールの一つ。

vis.gl


Deck.glを含むUber社が公開していたデータビジュアライゼーションスイート可視化ツール群。スイート(ひとそろいの、一式の)と名がつく通り、それぞれのライブラリやフレームワークは組み合わせて使えるようにコンポーネント化されている。
Uber社の全部盛りデータ可視化ツールスイート「Vis.gl」一覧 – GUNMA GIS GEEK

deck.glの特徴

巨大なデータの可視化


deck.glは、大規模なデータセットの視覚化をWebGlを用いて簡単に作成できるように設計されています。 GPUを用いて高い精度とパフォーマンスで大量のデータセットをレンダリングします。
scatter plot

多彩なレイヤー


「レイヤー」はDeck.glの中核をなす機能で、データムのコレクションを取得し、各データを位置、色、3Dポリゴンなどに関連付けてマップ上にレンダリングする可視化コレクションです。 複数のレイヤーを重ね合わせたり、ホバーやクリックなどのインタラクションを管理する機能があります。

かっこいいヤツ

deck.glをつかうと、フロントエンドで大量のデータを読み込み、レイヤーをつかって多様な表現でデータビジュアライゼーションを作成できる。

deck.gl ≠ 地図

公式サイトの説明



deck.glは、大規模なデータセットを視覚的・探索的に分析するための、WebGLを用いたフレームワークです。

必ずしも「地図」に限ってはいない。

2D

ネットワーク図


複雑なネットワーク

バブルチャート(公式)

チャート(公式)

3D

ポイントクラウド

ポストエフェクト

3Dモデル(gltf)表示


地図上に描画

ライフゲーム

360 video

まとめ

deck.glは地図だけではなく、2Dのビジュアライゼーションや3Dモデルやポイントクラウドデータなどを可視化するためのツールとして使うことができます。

deck.glを使えば、
なんとかなる。

decck.glの初め方

テンプレート&サンプル



Deck.glのアドベントカレンダー