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

## あいさつ

はじめまして！

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

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

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

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

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

[「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）](https://note.com/ppt_msdg_maas/n/naae427dbc37c)
[「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）](https://note.com/ppt_msdg_maas/n/na45c90b2f02f)
[「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）](https://note.com/ppt_msdg_maas/n/n8fd724f7db6c)

## はじめに

今回はやったこととしては「**[Apache Superset](https://superset.apache.org/)**」を用いて「東京都の1kmメッシュ別の滞在人口データ」を可視化してみました！
（データは[G空間情報センターのオープンデータ](https://www.geospatial.jp/ckan/dataset/mlit-1km-fromto)を利用しています）
結果をいうとこんな感じのを作りました。
滞在量が**直感的**にわかるようになりますね！
![スクリーンショット 2021-05-21 19.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/0c3d694c-b284-abef-d24f-2ee236dd7586.png)

「**Apache Superset**」とは、Airbnbが開発したWebで使える**OSS**の**BI**ツールです。
![スクリーンショット 2021-05-15 19.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/38c0ea0c-5aad-b5a2-e9d3-5321f77b14a3.png)

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

以下サンプルチャートです。
![スクリーンショット 2021-05-15 19.39.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/987f3032-c9f7-b019-9282-06d6a6d4a2fc.png)

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

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

## データの準備
### 対象
[G空間情報センターのオープンデータ](https://www.geospatial.jp/ckan/dataset/mlit-1km-fromto)では、日本全国の2019年と2020年の1kmメッシュ内における滞在数が公開されていますが、今回は以下の範囲に絞ってデータを可視化していきます。
![スクリーンショット 2021-05-15 20.56.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/b3b3bad0-5c2d-aea8-e01a-2df2f3c2e5cd.png)

### データ
提供されているデータそのままでは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を使って環境を準備することにします。
[公式](https://superset.apache.org/docs/installation/installing-superset-using-docker-compose)にも記載のある通り、以下コマンドで起動させてください。

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

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

```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](localhost:8088)」にアクセスしてログインしてください。
（ユーザー名、パスワードはそれぞれ初期設定では「admin」です）
![スクリーンショット 2021-05-21 19.56.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/6ae432f3-eeb5-35ab-2e4b-367151de319b.png)

ログインできたらメニューから Data -> Upload a CSV を選択してください。 
![スクリーンショット 2021-05-21 19.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/b6f6d48f-7eaf-7ac1-411d-9dacafe712dd.png)

遷移先の画面で「Table Name」にテーブル名を入力、
「CSV File」で事前に加工済みのCSVファイルを選択してください。
他の項目は全てそのままでOKですので、ページ最下部の「SAVE」ボタンを押下して保存してください。
![スクリーンショット 2021-05-21 20.11.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/7d7b795f-a511-7980-3310-2b3f34f1c313.png)
※今回はdockerで作成した環境にデモとして入っているexamplesデータベースにデータを保存しています。

### チャート作成
データの保存が完了したら、メニューのData -> Datasets を選択してください。
先ほど保存したテーブル名のDatasetが保存されていると思いますので選択し、チャートの作成画面に移ります。
![スクリーンショット 2021-05-21 20.13.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/16a73474-c314-552e-919f-50432b97ee20.png)

チャートの作成画面が開いたら以下の画像のように設定します。
![スクリーンショット 2021-05-21 20.18.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/bc225b3e-945b-d06a-055c-81783842bfcc.png)
・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」します！

![スクリーンショット 2021-05-21 20.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/bfeb5eab-4373-c60f-a60c-d5cd8f4bb55f.png)

無事表示されました！！
あとはこのチャートを保存するなり、filter部分を別チャートとして保存したりしてダッシュボードに貼り付ければ、完成です！
![スクリーンショット 2021-05-21 19.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/0c3d694c-b284-abef-d24f-2ee236dd7586.png)

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

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