こんにちは、SmartDrive でプロダクトマネージャー兼フロントエンドエンジニアをやっているヌノカワです。

この記事は SmartDrive Advent Calendar 2018 の14日目です。

前職では GIS (地理情報システム) ソフトウェアのベンダーで働いていたので、地理情報系のデータ可視化や分析が得意だったりします。あとフロントエンドが好きなので、過去に JavaScript でアルゴリズミックな記事を書いていたりします。

そんなスキルセットもあり、弊社で抱えてる膨大な車両走行データをなんとか人間が認識できてインスパイアできる状態にするために、最近はデータ可視化の方法をメイン業務の傍に考えてたりします。

なぜ Uber の OSS なのか？

タイトルにもあるように、Uber は kepler.gl という巨大な地理データセットを可視化するためのツールを公開しています。Uber はデータ可視化に以前から力を入れてて Data Visualization Team という部隊もいます。

2〜3 年くらい Uber のデータ可視化系 OSS をベンチマークしていましたが、いよいよスゴイのが出てきたぞ！！とリリース時は一人で震えてました。

走行データってすぐにビッグデータになっちゃうので、特定の人や車両を対象とするだけでも気軽に生データを確認するのは大変です。そういう意味では、Uber も弊社も似たような課題があるのかもしれないです。

巨大な地理データセットを可視化する３つの方法

データが巨大だと、抽出も大変ですが、可視化も大変です。データ量が大きいとレンダリングコストが半端ないのでちょっとした処理でブラウザーがお亡くなりになったりします。なので、どでかいデータを可視化するときは大まかに以下の３つの方法に絞られると思います。

1. あらかじめ地理的にデータ集計し、レンダリングコストを抑える (Big Query GIS)
2. レンダリングはサーバーに任せる (OmniSci)
3. WebGL でフロントのレンダリング頑張る (kepler.gl)

( ) 内はそれを実現するソリューション例として挙げてます。他に良いものがあればぜひ教えてください！

1 も 2 も面白いんですが、今回は集計してない生データを見たいのと、サーバーサイドレンダリングよりもお金がかからず、(個人的に) セットアップが楽な方法として 3 を採用してます。一部地理的なデータ抽出は Big Query GIS を使ってたりします。

この 3 を実現してくれるのが WebGL を採用している kepler.gl で、普通だったらブラウザーが死ぬようなデータ量でも (相対的に見れば！) 難なくレンダリングしてくれます。おかげさまでデータが大きくても、抽出→可視化→インサイト→仮説→抽出→可視化→…みたいなトライ＆エラーのサイクルが回せるようになってきました。

kepler.gl の優れてるところ

レンダリング能力はもちろんなのですが、それ以外にも魅力的な要素がいくつかあるので、紹介しておきます。

データレイヤごとに可視化方法を詳細に設定できちゃう
可視化手法も豊富だし設定可能なプロパティも多く自由度が高い。

マルチビューにできるのでデータの比較が捗っちゃう
左右で別のレイヤーを閲覧できる上に地図移動がシンクロしてくれる。

タイムスタンプを見て良い感じに期間の絞り込みができちゃう
ヒストグラムのタイムスライダーが使えるので直感的。

なによりカッコイイ
カッコイイは正義。本質的ではないかもしれないけど見た目がイケてるとそこから得られるインプットもエッジが効くと信じてる。

おまけ：kepler.gl を拡張してみた

膨大なデータを可視化してみると色々気づきはあるんだけど、地図とデータだけ見ててもまだリアリティが足りない。そこで仮説の精度を上げるために Google のストリートビューで実際の道路状況を確認するという作業フローに自然となってきていたので、じゃあ kepler.gl でストリートビュー見れれば最高じゃん！と思って作ってみました。

Fork して google-streetview というブランチで開発してます。落ち着いたら PR 出したい。

環境変数で Google API Key を設定する感じなので、使ってみたいという方は README 読んでね。ようわからんって人は Twitter で気軽に DM ください！

kepler.gl は弊社プロダクトと同じ Redux Way で構成されてたのでまあまあとっつきやすかったような、いや、他人のコード触るなら Ducks の方がいいような…

ちなみに最近、弊社では React Hooks で Redux 卒業したい！って盛り上がってます。アドベントカレンダーでも記事が挙がってるので併せてご覧ください。

弊社では全方位 (特にフロントエンドエンジニア！！！) 採用強化中です。React おじさんとか、私みたいな地図好きの React 使いとか、きっと一緒に働いたら面白いと思うので、ぜひ興味があれば！

面白い記事だと思ったら投げ銭もよろしくお願いします！！