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

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

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

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

さっそくデモ
5

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

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

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

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

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

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

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

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

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

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

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