Supersetで滞在人口データを可視化してみる

あいさつ

はじめまして！

パーソルプロセス＆テクノロジー株式会社（以下パーソルP&T）、システムソリューション（SSOL）事業部所属の戸田です。

私はモビリティソリューションデザインチームに所属しており、モビリティ（ここでは移動手段全般）に関するサービスを考えたり、アプリを構築したりしております。

いわゆる**「MaaS」**に取り組んでおります。

私たちが「MaaS」に取り組む中で、現在活用している、もしくは活用する予定の技術やサービスやとりあえず発信したいことなどなど、幅広くチームメンバーと共に執筆していきたいと思います。
メンバーごとに違った内容を発信していきますので、お楽しみに！

また、「MaaS」について詳しく知りたい方は、チームメンバーの吉田が記事を掲載しておりますので、
ぜひそちらをご覧ください。

「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）
「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）
「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）

はじめに

今回はやったこととしては「Apache Superset」を用いて「東京都の1kmメッシュ別の滞在人口データ」を可視化してみました！
（データはG空間情報センターのオープンデータを利用しています）
結果をいうとこんな感じのを作りました。
滞在量が直感的にわかるようになりますね！

「Apache Superset」とは、Airbnbが開発したWebで使えるOSSのBIツールです。

世の中には様々なBIツールが存在していますが、その中でも今回このSupersetを用いた理由としては、地図上にデータをプロットする際のチャートが豊富で、MaaSで使われるデータ類を可視化するのに合っていると思ったためです。

以下サンプルチャートです。

もちろん、地図系のチャートだけではなく単純な棒グラフや円グラフ等も作成することができ、また、多種多様なデータソースとも接続できます。

詳しくは公式ドキュメントを参照していただくのが良いかと思います。
https://superset.apache.org/

データの準備

対象

G空間情報センターのオープンデータでは、日本全国の2019年と2020年の1kmメッシュ内における滞在数が公開されていますが、今回は以下の範囲に絞ってデータを可視化していきます。

データ

提供されているデータそのままではSupersetに読み込ませることができないので、少し加工していきます。
最終的にSupersetに読み込ませる際には、緯度経度情報を配列にしたデータ(Polygon)が必要なのでそのようにします。

mesh1kmid	lon_max	lat_max	lon_min	lat_min
30365006	136.087494	20.4249992	136.074997	20.416666
提供データは上記のようにメッシュIDとそれに対応する最大最小の緯度経度情報が入っているため、これを4角形の四隅それぞれの緯度経度に分解します。
具体的には以下のpolygon列のような文字列として作り替えたものを作成します。

polygon	mesh1kmid	lon_max	lat_max	lon_min	lat_min
[[35.6333351,139.725006],[35.6333351,139.737503],[35.625,139.737503],[35.625,139.725006]]	30365006	136.087494	20.4249992	136.074997	20.416666

ということで最終的に加工したデータサンプルが以下です。
加工したデータはcsvで出力しておきます。

input.csv

mesh1kmid,year,month,dayflag,timezone,population,prefcode,citycode,geojson
53393558,2020,1,休日,昼,31568,13,13103,"[[35.6333351,139.725006],[35.6333351,139.737503],[35.625,139.737503],[35.625,139.725006]]"
53393558,2020,1,休日,深夜,27752,13,13103,"[[35.6333351,139.725006],[35.6333351,139.737503],[35.625,139.737503],[35.625,139.725006]]"

※dayflagとtimezoneについてはそれぞれ
・dayflag　0:休日 1:平日 2:全日
・timezone　0:昼 1:深夜 3:終日
に変換しています。

Superset準備

今回はdockerを使って環境を準備することにします。
公式にも記載のある通り、以下コマンドで起動させてください。

$ git clone https://github.com/apache/superset.git
$ cd superset
$ docker-compose -f docker-compose-non-dev.yml up

この時データ可視化時にはMapboxのアクセストークンが必要になるので、こちらからキーを取得し、以下のように設定しておいてください。(アクセストークンは無料で取得できます)

superset/docker/.env-non-dev

#
# Licensed to the Apache Software Foundation (ASF) under one or more
# contributor license agreements.  See the NOTICE file distributed with
# this work for additional information regarding copyright ownership.
# The ASF licenses this file to You under the Apache License, Version 2.0
# (the "License"); you may not use this file except in compliance with
# the License.  You may obtain a copy of the License at
#
#    http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
COMPOSE_PROJECT_NAME=superset

# database configurations (do not modify)
DATABASE_DB=superset
DATABASE_HOST=db
DATABASE_PASSWORD=superset
DATABASE_USER=superset

# database engine specific environment variables
# change the below if you prefers another database engine
DATABASE_PORT=5432
DATABASE_DIALECT=postgresql
POSTGRES_DB=superset
POSTGRES_USER=superset
POSTGRES_PASSWORD=superset
#MYSQL_DATABASE=superset
#MYSQL_USER=superset
#MYSQL_PASSWORD=superset
#MYSQL_RANDOM_ROOT_PASSWORD=yes

# Add the mapped in /app/pythonpath_docker which allows devs to override stuff
PYTHONPATH=/app/pythonpath:/app/docker/pythonpath_dev
REDIS_HOST=redis
REDIS_PORT=6379

FLASK_ENV=production
SUPERSET_ENV=production
SUPERSET_LOAD_EXAMPLES=yes
CYPRESS_CONFIG=false
SUPERSET_PORT=8088

MAPBOX_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXX //ここにキーを追記

ダッシュボード作成

データ投入

Supersetが起動したら「localhost:8088」にアクセスしてログインしてください。
（ユーザー名、パスワードはそれぞれ初期設定では「admin」です）

ログインできたらメニューから Data -> Upload a CSV を選択してください。

遷移先の画面で「Table Name」にテーブル名を入力、
「CSV File」で事前に加工済みのCSVファイルを選択してください。
他の項目は全てそのままでOKですので、ページ最下部の「SAVE」ボタンを押下して保存してください。

※今回はdockerで作成した環境にデモとして入っているexamplesデータベースにデータを保存しています。

チャート作成

データの保存が完了したら、メニューのData -> Datasets を選択してください。
先ほど保存したテーブル名のDatasetが保存されていると思いますので選択し、チャートの作成画面に移ります。

チャートの作成画面が開いたら以下の画像のように設定します。

・VISUALIZATION TYPE : 「deck.gl Polygon」
・LINES COLUMN : 「geojson」　
※こちらは加工したポリゴンデータ入っているカラムです。（"[[35.6333351,139.725006],[35.6333351,139.737503],[35.625,139.737503],[35.625,139.725006]]" このデータ)
・FILTERS : 今回は「1月」の「平日」「昼」のデータに絞って表示させます。
・METRIC : CUSTOM SQLで「SUM(population)」と入力してください。
・REVERSE LAT & LONG : 緯度経度の順番を逆にしてデータを作ってしまっていたのでチェックをつけて順番を逆にします。

設定ができたら「RUN」します！

無事表示されました！！
あとはこのチャートを保存するなり、filter部分を別チャートとして保存したりしてダッシュボードに貼り付ければ、完成です！

最後に

今回は滞在データをSupersetを用いて可視化してみました。
この他にも時間ごとの推移を表すものや、移動を表したものなども同様の感覚で作成できるので、是非色々なデータを可視化してみてください！

最後まで読んでいただき、ありがとうございました！