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の特徴

deck.glの特徴

巨大なデータを可視化できる

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

試してみた

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

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

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

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

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

deck.glの特徴

Get Started

インストール

> npm install deck.gl --save 
		OR 
> yarn add deck.gl

必要なモジュールのみインストールすることも可能

> npm install @deck.gl/core @deck.gl/react @deck.gl/layers 

インポート

//コアライブラリの読み込み
import DeckGL, { MapController, WebMercatorViewport } from "deck.gl";
//レイヤーモジュールの読み込み
import { TileLayer, BitmapLayer, GeoJsonLayer } from "deck.gl";
			

テンプレート

• GitHub
  • deckgl-minimum-template


• CodeSandbox
  • CodeSandboxにdeck.glのテンプレートを作った
  • @shimizu/deck.gl-OSM-prejs-template

基本構成

viewState

ViewState

ViewStateは、マップの視点、ズームレベル、角度、および回転方向を定義するオブジェクトです。

ViewStateは以下のプロパティを持ちます:

• latitude : マップの中心の緯度
• longitude : マップの中心の経度
• zoom : マップのズームレベル
• pitch : マップの傾き（角度）
• bearing : マップの回転方向

これらのプロパティを使用して、マップの表示位置や視点を制御できます。ViewStateは、DeckGLコンポーネントのpropsとして渡され、DeckGLがマップのビューをレンダリングする際に使用されます。

ViewStateの基本形

import React from 'react';
import DeckGL from '@deck.gl/react';

//ビューステート
const INIT_VIEW_STATE = {
	longitude: -122.4,
	latitude: 37.8,
	zoom: 12
};

function App() {
	return (
		
		
	);
}

ViewStateの変更

import React, {useState} from 'react';
import DeckGL from '@deck.gl/react';

//ビューステート
const INIT_VIEW_STATE = {
	longitude: -122.4,
	latitude: 37.8,
	zoom: 12
};

function App() {
	//ビューステートを保存
	const [viewState, setViewState] = useState(INIT_VIEW_STATE);

	//ビューステートの更新
	const handleClick = ()>{
		setViewState(v=>{
			longitude: 138.87,
			latitude: 36.06,
			...v
		})
	}

	return (
		

			移動
			
			
		
	);
}

アニメーション

Layer

レイヤーとは

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

かっこいいやつ

レイヤーの生成

//RennderLayer.js
//散布図レイヤークラスをインポート
import { ScatterplotLayer } from "deck.gl";

export function renderLayers(props) {
	const { data } = props;

	//インスタンス化
	const scatter = new ScatterplotLayer({
		id: "scatter-layer",
		data: data,
		getFillColor: d => d.color,
		getPosition: d => [d.lng, d.lat]
	})

	//レイヤーを配列にまとめる
	const layes = [scatter];

	return layes;
};

				

レイヤーのレンダリング

//App.js
import React from "react";
import DeckGL from "deck.gl";
import renderLayers from "./RenderLayers.js";

export default () => {
	const data = {
	{ name: 'Colma', lng:-122.466233, lat:37.684638 },
	{ name: 'Civic Center', lng:-122.413756, lat:37.779528 },
	...
	};

	return (
	<DeckGL
		layers={renderLayers({ //レイヤーをDeckコンポーネントに設置
		data: data
		})}
		controller={true}
		initialViewState={ViewState}
	/>
	);
};
				
					

レイヤーのプロパティ

• id
  • 任意のレイヤー名を指定。レンダリングの基盤となるためユニークなIDを指定する
• data
  • レイヤーで描画するデータセットを渡すプロパティ
  • JSONの場合はURLで指定することもできる
• get～(アクセサ)
  • getから始まるプロパティ群。getFillColor,getRadiusなど
  • データにアクセスするコールバックを指定する。コールバックの戻り値がプロパティの値として適用される
• onClick, onHover
  • イベントハンドリング用のプロパティ
  • イベント発火時に実行するコールバックを指定する。レイヤーのpickableプロパティが有効になっている必要がある

レイヤーの種類

大きく分けて４種類のレイヤーが存在する

レイヤーカタログ

よく使うレイヤー

とりあえず最初はScatterplotLayerを使って任意の場所にサークルを表示するというのに挑戦するのがお勧めです。
ひとつでもレイヤーの使い方が理解できてしまえば他のレイヤーを使うのは難しくありません。

おまけ

アイデア次第でこんな使い方も

third party

loaders.gl

loaders.glはcsv,tsvなど一般的なデータフォーマットやGeoJSONのような地理空間情報データフォーマットのファイルを読み込むためのローダーコレクションです。

対応データフォーマット

地理情報データものすごくたくさんのフォーマットが乱立しているが、loaders.glは多くのフォーマットに対応している

使い方

import {CSVLoader} from '@loaders.gl/csv';
import {load} from '@loaders.gl/core';

const data = await load(url, CSVLoader);

import { ScatterplotLayer } from "deck.gl";
//loader.gからcsvローダーを読み込み
import {CSVLoader} from '@loaders.gl/csv';

export function renderLayers(props) {		

	const scatter = new ScatterplotLayer({
		id: "scatter-layer",
		data: "data/example.csv",
		loaders:[CSVLoader], //ローダーを指定 
		getFillColor: d => d.color,
		getPosition: d => [d.lng, d.lat]
	})
		
	return [scatter];
};		

deck.gl以外でも使い勝手の良いローダーコレクションなのでお勧めです。

chroma.js

データビジュアライゼーションで必須となる、データの値をもとにカラーを作成する機能を提供するライブラリ。多機能なカラージェネレーター。

使い方

//スケールのレンジ(白->赤)とドメイン(0から100)を設定する
const colorScale = chroma.scale(["white", "red"]).domain([0,100])

//各値に対して色を生成する
colorScale(0).rgb() // -> [255, 255, 255]
colorScale(25).rgb() // -> [255, 191, 191]
colorScale(50).rgb() // -> [255, 128, 128]
colorScale(75).rgb() // -> [255, 64, 64]
colorScale(100).rgb() // -> [255, 0, 0]

react-map-gl

mapbox.gl ver1をラップしたreactコンポーネントライブラリ。deck.glと組み合わせることでdeck.glにmapboxの地図を挿入することができる

使い方

import DeckGL from 'deck.gl';
//react-map-glを読み込み
import Mapbox from "react-map-gl";

function Map() {
	const [viwState, setViewState] = useState(INITIAL_VIEW_STATE)



	return (
		

			//地図表示
			
				
			
		
	);
}

export default Map;

ライブ コーディング