「kepler.glを使って地理空間データをサクッと可視化」発表スライド

1. kepler.glを使って地理空間データ
をサクッと可視化
遠藤 隆浩
（無所属）
takahiro.endo@abierta-technology.net
1
FOSS4G Hokkaido 2019, July 13

2. 前回発表
FOSS4G Hokkaido 2015
札幌市学級閉鎖データの可視化(d3.js)
2

3. • Python (pandas, sklearn) ちょっとわかる
• JavaScript よくわかんね React? Vue.js?
3
やって（た／る）こと
• カーナビ・ソフトウェア開発
• 除排雪データ・バスプローブデータ可視化・分析
• インフラ点検データ・マエショリスト
• スマートシティ!? オープンデータ…

4. • uber が提供しているオープンソースのひとつ
• プログラミング不要でブラウザ上で可視化
• 大量のデータをブラウザでぐりぐり動かせる
https://kepler.gl/ とは
4

5. さっそくデモ
5

6. kepler.glの機能（1）
• データ入力
• CSV, JSON, GeoJSON
• データ出力
• 画像, データ, HTML, Dropboxで共有
6

7. kepler.glの機能（2）
• レイヤーの種類
• Point, Arc, Line
• Grid, Hexbin, Polygon
• Cluster, Icon, Heatmap
7

8. kepler.glの機能（3）
• Filter
• 変数の値で表示項目を絞り込み
• Interaction
• Brush ：表示する半径を指定
• Tooltip：の表示する変数を選択
• Base Map
• Mapboxの地図を背景に使える
• カスタム・スタイルの地図も指定可能
8

9. 北海道警察 犯罪オープンデータ
• アドレスマッチング済データ
9
https://www.dropbox.com/
sh/vyhnk3tfq9u3g3p/AADy
1tLStuhS6wKN01YElAFG
a
※東京大学空間情報科学研究センター
CSVアドレスマッチングサービスを利用

10. 札幌市小学校区ポリゴン
10

11. uberのフレームワーク
https://vis.gl
• luma.gl
• WebGL2対応．GPUを使った描画＆計算ライブラリ
• deck.gl
• React, MapboxGLと統合された
地理空間データの可視化ライブラリ
11

12. 東洋経済オンラインの記事
2018年10月16日 萩原和樹さん
東京都「基準地価」3Dマップ
https://toyokeizai.net/sp/visual/tko/landprices/
12

13. Mediumの記事
uberのオープンソース・フレームワークに
関する記事いろいろ
https://medium.com/vis-gl
13

14. Qiita @t-mat さんの記事
• Deck.GLでオープンデータを可視化する
• https://qiita.com/t-mat/items/d33506cbf409c01264db
• Deck.GLのTripLayerでGTFS-JPのバス運行状況を可視化してみた
• https://qiita.com/t-mat/items/ed511b2ae379ecd3b7d7
14

15. kepler.gl に無いもの
• 複数データのJOIN操作
• ユーザー定義関数
• アニメーション表示
• deck.gl : TripsLayer
• 移動履歴をアニメーション表示するレイヤー
15

16. まとめ
kepler.gl やってみなはれ
16