地図で高度なデータビジュアル化を実現する「deck.gl」の紹介

スマートフォンアプリと地図は相性が良いです。位置情報を利用して、外出先などで地図を確認する人も多いでしょう。アプリ開発者としては、収集したデータをどう可視化するかが問題になります。

そこで今回はdeck.glという、高度なビジュアル化を実現するライブラリを紹介します。複雑なデータも可視化することで、トレンドや重要なポイントが見えてくるでしょう。

deck.glとは？

deck.glは、GPUを使って巨大なデータセットにも対応した可視化ライブラリです。特に複雑なデータ可視化にフォーカスしており、レイヤーを用いて再利用しやすくなっています。

特徴として、以下の3つのポイントが挙げられます。

ヴァニラJSまたはReactで利用可能
Google MapsやMapbox、ArcGIS、MapLibreなどの地図ライブラリと統合可能
GPUを使い、高速かつ高パフォーマンスでデータセットをレンダリング

基本セットアップ

Reactで利用する場合にはnpmを使ってライブラリをインストールしますが、HTMLでも以下のようにscriptタグで読み込み可能です。地図を表示するdivタグを用意しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Deck.gl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<!-- optional if maplibre base map is needed -->
<script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
<!-- Allow the map to render in full screen  -->
<style>
  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
  }
</style>
</head>
<body>
  <div id="map" style="width: 100%; height: 100%;"></div>
  <script src="./app.js"></script>
</body>
</html>

読み込んでいる app.js の実装です。地図のスタイル、そして初期表示の場所などを指定します。そして、 layers キーで、表示するレイヤーやデータを指定します。 ScatterplotLayer は、地図上に点を表示するためのレイヤーです。

const {DeckGL, ScatterplotLayer} = deck;

new DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 15
  },
  controller: true,
  layers: [
    new ScatterplotLayer({
      data: [
        {position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}
      ],
      getPosition: d => d.position,
      getFillColor: d => d.color,
      getRadius: d => d.radius
    })
  ]
});

これで、地図上に赤い点が表示されるはずです。地図のスタイルは、Cartoのベースマップを使用しています。

React

Reactでの利用例です。Reactの場合は、よりコンポーネント指向で記述できます。

import React from 'react';
import {DeckGL} from '@deck.gl/react';
import {MapViewState} from '@deck.gl/core';
import {LineLayer} from '@deck.gl/layers';

const INITIAL_VIEW_STATE: MapViewState = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13
};

type DataType = {
  from: [longitude: number, latitude: number];
  to: [longitude: number, latitude: number];
};

function App() {
  const layers = [
    new LineLayer<DataType>({
      id: 'line-layer',
      data: '/path/to/data.json',
      getSourcePosition: (d: DataType) => d.from,
      getTargetPosition: (d: DataType) => d.to,
    })
  ];

  return <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller
      layers={layers} />;
}