（資料科學學習手札85）Python+Kepler.gl輕鬆製作酷炫路徑動畫
阿新 • • 發佈：2020-05-30
> 本文示例程式碼、資料已上傳至我的`Github`倉庫[https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes)
# 1 簡介
`Kepler.gl`相信很多人都聽說過，作為`Uber`幾年前開源的互動式地理資訊視覺化工具，`kepler.gl`依託`WebGL`強大的圖形渲染能力，可以在瀏覽器端以多種形式輕鬆展示大規模資料集。
圖1
更令人興奮地是`Kepler.gl`在去年推出了基於`Python`的介面庫`keplergl`，結合`jupyter notebook/jupyter lab`的相關拓展外掛，使得我們可以通過編寫`Python`程式配合`Kepler.gl`更靈活地製作各種視覺化作品。
圖2
而隨著近期`keplergl`的更新，更多的新特性得以同步到其`Python`生態中，本文就將針對其中的路徑動畫的製作方法進行介紹。
# 2 基於keplergl的路徑動畫
我們要製作的路徑動畫圖主要用於表現特定路徑上流的運動，譬如圖3的例子來自`Kepler.gl`官方示例：
圖3
而在官方的說明中描述了要繪製路徑動畫需要輸入的資料格式：
圖4
這是一個典型的`GeoJSON`格式`LineString`要素，特別的是其`"coordinates"`鍵對應的值不同於常規的`[經度, 緯度]`格式，而是代表著`[經度, 緯度, 高度, 時間戳]`，其中高度非必要，可以設定為0，而時間戳則聲明瞭軌跡動畫在該時間點會到達的該點位置，即線要素上連續的點位置+時間戳定義了軌跡動畫的運動模式，下面我們分步驟來實現。
## 2.1 構造資料與初始化html
這裡我們以重慶市渝中區的OSM路網為演示示例資料，首先我們需要利用`json`模組來讀取本地`重慶市渝中區_osm路網_道路.geojson`資料：
```Python
from keplergl import KeplerGl
import json
import time
with open('geometry/重慶市渝中區_osm路網_道路.geojson') as g:
raw_roads = json.load(g)
```
隨便打印出其中包含的某個線要素：
圖5
可以看到，這時線要素內部包含的點還是`[經度, 緯度]`的格式，接下來我們為其虛構上時間戳資訊，為了保證整個路網視覺化的協調一致，將所有線要素的時間跨度固定在一個小時之內，保證每段路上從頭到尾的軌跡動畫都保持一致：
```Python
start_time = time.mktime(time.strptime('2020-05-29 20:00:00', "%Y-%m-%d %H:%M:%S"))
for i in range(raw_roads['features'].__len__()):
for j in range(raw_roads['features'][i]['geometry']['coordinates'].__len__()):
shift_time = int((j / raw_roads['features'][i]['geometry']['coordinates'].__len__())*3600) # 更新當前對應的時間戳
raw_roads['features'][i]['geometry']['coordinates'][j] \
.extend([0, # 高度設定為0
int(start_time) + shift_time])
```
接著再列印其中一個線要素：
圖6
可以發現每個點元素都追加上高度0以及對應的時間戳（注意這裡的時間戳必須為整數否則之後輸入`keplergl`會報錯），接下來的過程就非常簡單，首先確保你已經安裝了`keplergl`以及對應外掛，譬如我所使用的`jupyter lab`，在確保`nodejs`被安裝的前提下，使用`jupyter labextension install @jupyter-widgets/jupyterlab-manager keplergl-jupyter`安裝拓展外掛（jupyter notebook可參考https://github.com/keplergl/kepler.gl/tree/master/bindings/kepler.gl-jupyter#installation），以及使用`pip install keplergl`來安裝`keplergl`庫，一切準備就緒直接執行如下程式碼：
```Python
from keplergl import KeplerGl
# 生成KeplerGl物件s
map1 = KeplerGl(height=400,
data={'flow': raw_roads}) # data以圖層名為鍵，對應的向量資料為值
map1
map1.save_to_html(file_name='渝中區.html') # 匯出到本地可編輯html檔案
```
圖7
這一步的目的是初始化已嵌入目標資料的html檔案，接下來你就可以關閉`jupyter lab`，在工作目錄下找到已經匯出的html檔案直接開啟，接下來的工作將在瀏覽器裡進行。
## 2.2 互動式創作
接下來的過程則不涉及任何程式碼，我們將以點選按鈕的方式改變我們視覺化作品的外觀，由於整個過程細節較多，因此將整個過程錄製為視訊：