自己紹介

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

主なお仕事

衆院選得票率マップ

deck.glで作ったもの

Blog

deck.glとは

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

vis.gl

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

deck.glの現在

現在は、deck.glを含むvis.glは、アーバンコンピューティング財団に移管されてUber社の手から離れています。 なので、Uber社に対して思うところのある方も安心して利用すことができます。

Google , Carto との連携強化

また、2020から今年に掛けては、Google EarthチームやCarto(地理データ分析プラットフォーム)のエンジニアが参加し、Google Maps Platform(js sdk)やCartoサービスとの連携強化が図られました。

Google Maps + deck.gl

このようにdeck.glは単体でも利用できますが、現在ではGoogle MapsやArcGIS、Carto、Mapboxなどと組み合わせて使える地図ライブラリになっています。

派生ライブラリ

Pydeck

deck.gl-native

deck.glの特徴

巨大なデータの可視化

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

試してみた

テストした端末のスペック

• CPU: AMD Ryzen 9 5900HS
• GPU: NVIDIA GeForc RTX 3060
• Memory: 32GB

表示できる量や負荷は端末のスペックに依存する

ちなみに1000万ポイント表示しようとしたらブラウザが落ちました

閲覧する側のスペックに依存するところはありますが、かなり多くのデータを一度に可視化することができるライブラリになっています。

多彩なレイヤー

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

かっこいいヤツ

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

公式サイトの説明

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

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

2D

ネットワーク図

バブルチャート(公式)

チャート(公式)

3D

ポイントクラウド

3Dモデル(gltf)表示

ライフゲーム

360 video

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

最近では、PLATEAUや静岡県のポイントクラウドデータなど、単純な表データにとどまらないデータがオープンデータとして公開されています。

PLATEAU 3Dモデル

静岡県ポイントクラウド

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

テンプレート＆サンプル

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