過去在做地理資訊是視覺化的時候，通常需要專業的軟體與操作技能，增加了一般使用者的進入障礙。Uber 在今年五月時開放了內部使用的地理資料視覺化軟體 Kepler.gl，提供一般使用者能在瀏覽器上輕易地匯入與操作資料進行地理資訊視覺化操作與檢視。本文章將簡單介紹 Kepler.gl 的用法，讓剛使用者能了解其基礎用法。

Kepler.gl

Kepler.gl 是由 Uber 公司所釋出的一套在瀏覽器上執行的開放原始碼專案。過去進行地理資訊視覺化時需要使用 QGIS 等專門的地理資訊系統軟體，現在只需要把想要視覺化的資料匯出成適當的文字格式(如csv)，即可在瀏覽器上直接進行檢視地理資料的視覺化呈現，使用上非常方便。本文章將簡介 Kepler 的各項構成與使用方式，以及使用所提供的 NYC Taxi 範例介紹，提供有興趣的讀者參考。

開始使用

由 http://kepler.gl/ 可連結到官方網站中，並點選 Get Start 選項進入，或直接進入 Demo 網頁 即可進入專案畫面。kepler.gl 主要分成幾個部分 - Dataset，Layer，Filter，Interactions 以及 Basemap

Dataset

Dataset 是 kepler.gl 所有顯示資料的來源，不論是之後介紹的 Layer 或 Filters 等元件，都要選擇所對應的 Dataset 項目。Dataset 接受 csv 資料或是符合格式的 JSON/GeoJson 檔案。我們可先由右上的 Try sample data 進入

選擇 NYC Taxi trip 範例資料

匯入成功後應該會出現如下畫面

而左上出現的 new dataset 代表 dataset 的名稱以及資料數量。下圖表示名稱為 new dataset 的資料表包含 97,986 筆資料。

也可點選資料表顯示表單展開詳細內容以及欄位所屬的型態。

此外 Dataset 每個欄位有相關屬性還定義其格式，如 Int(整數)，time(時間)，Float(浮點數)，String(字串)，Bool(布林) 等。Kepler.gl 會在加入 Dataset 時自動偵測欄位資料格式。

Layers (圖層)

Layer 是 kepler.gl 顯示的基本單位，可想像成 Photoshop 的圖層功能。每個 Layer 可設定使用的 Dataset，顯示方式，對應欄位，是否可視以及顯示顏色等資訊。而 NYC Taxi trips 範例匯入後會顯示如下預設 Layer

該範例包含三個名稱為 pickup -> dropoff，pickup 與 dropoff 的 Layers

• pickup -> dropoff : 在地圖上的以弧線方式，將上車地點與下車地點連接在一起(預設為隱藏(Hide)狀態，要檢視需將左邊的眼睛標示打開)
• pickup : 以圓點方式顯示上車位置。
• dropoff : 以圓點方式顯示下車位置。

每個 Layer 都可展開以進行更詳細的設定，以 pickup Layer 為例

可看出使用了 Point Type 來顯示，而 Latitude(緯度, Lat) 與 Longitude(經度, Lng) 分別對應欄位 pickup_latitude 與 pickup_longitude。也可進一步調整 Point 的 color 為特定顏色或依照特定欄位數值變化，半徑長度，是否挖空等屬性。

Layer Type

Kepler.gl 提供許多不同的顯示方式，如 Point，Arc，Line 等。可依照所需選擇適合的 Layer Type。

• Point: 每筆資料位置以圓形範圍顯示。
• Arc: 以三維弧線連結兩點座標。
• Line: 以平面直線連結兩點座標。
• Grid: 以正方形呈現範圍內的點位資料內容，如點數數量或是對應的欄位數量統計資料等。
• Hexbin: 以六角形呈現範圍內的點位資料內容，如點數數量或是對應的欄位數量統計資料等。
• Polygon: 使用 GeoJson 格式呈現不規則的形狀。
• Cluster: 統計一定範圍內的點位數量並以二維圓形呈現。
• Icon: 可在畫面上標示特定類別的 Icon。
• Heatmap: 以熱度圖方式呈現資料。

詳細使用方式與效果可參考 Kepler.gl 官方網站的展示與範例資料。

Filters

Filter 也是 Kepler.gl 中一項強大的功能，可以照不同需求設定資料的範圍，而不同類型的資料有不同的設定方式。

目前還無法對同一欄位進行多種過濾法，因此一個欄位只能設定一個 Filter

Float (符點數) 與 Int(整數)

顯示的數值範圍區間。

String

設定一個或多個特定字串當過濾條件，也有字串搜尋功能以快速找到所需功能。

Bool

Boolean 型態選擇使用 True 或 False 型態資料。

Time

Time 型態資料會有一特殊的 Filter 調整視窗。除了可以手動調整範圍外，也可用 Playback 功能產生動態播放效果，來讓資料更生動。

Interactions

Interactions 項目可讓使用者設定與地圖上的資料或 Layer 顯示項目互動的方式，目前有兩種 - Tooltip 與 Brush

Tooltip

決定當使用者打上點擊 Layer 資料顯示內容時，要出現的對應欄位內容。以 NYC taxi trip 範例來看，預設的內容如下

代表設定了 VendorID，tpep_pickup_datetime，tpep_dropoff_datetime，passenger_count，trip_distance 五個欄位資料來顯示。當點擊畫面上 Layer 所繪製的畫面時，會出現以下視窗

上圖代表所點擊資料是 Pickup layer，下方則是該資料點對應的欄位內容。

Brush

一個特殊的顯示功能，能只顯示設定範圍內，滑鼠所在位置周圍的資料點。該功能與 Tooltip 只能選擇一種方式， 當選擇 Brush 功能後會強制關閉 Tooltip，並顯示範圍設定

而當滑鼠移動到地圖上時只會顯示在範圍內的資料點

Basemap

除了使用 Kepler.gl 所預設的 Mapbox 地圖外，也可以使用 Base map 功能修改地圖格式如 Dark 或 Light 等風格，或自行引入再 Mapbox 自建的地圖。

資料匯出

建立好所有要檢視的 Layer 或 Filter 後如果離開了瀏覽器，那所有之前編輯的內容就會消失。我們可以透過 Share 中的 Export 功能將資料匯出至 Json 檔案中，以便下次快速匯入上次結果。匯出功能可直接點選左上的 Share 按鈕，就會出現三種不同的匯出功能

Export Image

匯出畫面為圖片檔，可設定對應的解析度，長寬比等資訊。

目前在 Chrome 和 Safari 上似乎有問題無法正確匯出，只有 Firefox 可以(但 Firefox 執行效能較低)

Export data

匯出原始的 Dataset 或經過 Filter 過濾的資料內容

Export config

匯出目前的地圖設定檔為 Json 格式檔案，可分為單純設定檔(匯入時需已有原始資料) 或包含原始資料的 Json 檔案(該檔案可能很大)。

Conclusion

上文簡單介紹了 Kepler.gl 的基礎功能與用法，對初學者應已足夠。但如果想進一步開發自己想要的視覺化效果，因該工具為開源，因此也可自行開發相關功能。此外 Kepler.gl 可以現在仍在發展中可能會有些問題，事實上個人在嘗試時也遇到了部分問題與 Bug，如圖片匯出功能在 Mac 的 Chrome 無法正確執行，這部分仍須等待時間解決。

Link

• Kepler.gl - Website
• Kepler.gl - Github
• iThome - Uber開源地理資訊視覺化工具kepler.gl