Kepler.gl 使用簡介

Kepler.gl 是由Uber 公司所釋出的一套在瀏覽器上執行的開放原始碼專案。

過去進行地理資訊視覺化時需要使用QGIS 等專門的地理資訊系統軟體，現在只需要把想 ... Cheng-ShiangLi Seniorsoftwaredeveloper.MasteringAndroid/iOSapplicationdevelopmentandmachinelearningalgorithm. Home Categories Tags Archives AboutMe GitHub Linkedin Email Kepler.gl使用簡介 September2,2018 in Visualization 過去在做地理資訊是視覺化的時候，通常需要專業的軟體與操作技能，增加了一般使用者的進入障礙。

Uber在今年五月時開放了內部使用的地理資料視覺化軟體Kepler.gl，提供一般使用者能在瀏覽器上輕易地匯入與操作資料進行地理資訊視覺化操作與檢視。

本文章將簡單介紹Kepler.gl的用法，讓剛使用者能了解其基礎用法。

Kepler.gl Kepler.gl是由Uber公司所釋出的一套在瀏覽器上執行的開放原始碼專案。

過去進行地理資訊視覺化時需要使用QGIS等專門的地理資訊系統軟體，現在只需要把想要視覺化的資料匯出成適當的文字格式(如csv)，即可在瀏覽器上直接進行檢視地理資料的視覺化呈現，使用上非常方便。

本文章將簡介Kepler的各項構成與使用方式，以及使用所提供的NYCTaxi範例介紹，提供有興趣的讀者參考。

開始使用 由http://kepler.gl/可連結到官方網站中，並點選GetStart選項進入，或直接進入Demo網頁即可進入專案畫面。

kepler.gl主要分成幾個部分-Dataset，Layer，Filter，Interactions以及Basemap Dataset Dataset是kepler.gl所有顯示資料的來源，不論是之後介紹的Layer或Filters等元件，都要選擇所對應的Dataset項目。

Dataset接受csv資料或是符合格式的JSON/GeoJson檔案。

我們可先由右上的Trysampledata進入 匯入資料 選擇NYCTaxitrip範例資料 選擇NYCtaxitrip範例 匯入成功後應該會出現如下畫面 而左上出現的newdataset代表dataset的名稱以及資料數量。

下圖表示名稱為newdataset的資料表包含97,986筆資料。

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

NYCTaxiTrips一部分資料內容 此外Dataset每個欄位有相關屬性還定義其格式，如Int(整數)，time(時間)，Float(浮點數)，String(字串)，Bool(布林)等。

Kepler.gl會在加入Dataset時自動偵測欄位資料格式。

Layers(圖層) Layer是kepler.gl顯示的基本單位，可想像成Photoshop的圖層功能。

每個Layer可設定使用的Dataset，顯示方式，對應欄位，是否可視以及顯示顏色等資訊。

而NYCTaxitrips範例匯入後會顯示如下預設Layer 該範例包含三個名稱為pickup->dropoff，pickup與dropoff的Layers pickup->dropoff:在地圖上的以弧線方式，將上車地點與下車地點連接在一起(預設為隱藏(Hide)狀態，要檢視需將左邊的眼睛標示打開) pickup:以圓點方式顯示上車位置。

dropoff:以圓點方式顯示下車位置。

每個Layer都可展開以進行更詳細的設定，以pickupLayer為例 可看出使用了PointType來顯示，而Latitude(緯度,Lat)與Longitude(經度,Lng)分別對應欄位pickup_latitude與pickup_longitude。

也可進一步調整Point的color為特定顏色或依照特定欄位數值變化，半徑長度，是否挖空等屬性。

單獨顯示Pickuplayer LayerType Kepler.gl提供許多不同的顯示方式，如Point，Arc，Line等。

可依照所需選擇適合的LayerType。

Layer視覺化型態顯示 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資料顯示內容時，要出現的對應欄位內容。

以NYCtaxitrip範例來看，預設的內容如下 代表設定了VendorID，tpep_pickup_datetime，tpep_dropoff_datetime，passenger_count，trip_distance五個欄位資料來顯示。

當點擊畫面上Layer所繪製的畫面時，會出現以下視窗 上圖代表所點擊資料是Pickuplayer，下方則是該資料點對應的欄位內容。

Brush 一個特殊的顯示功能，能只顯示設定範圍內，滑鼠所在位置周圍的資料點。

該功能與Tooltip只能選擇一種方式， 當選擇Brush功能後會強制關閉Tooltip，並顯示範圍設定 而當滑鼠移動到地圖上時只會顯示在範圍內的資料點 Basemap 除了使用Kepler.gl所預設的Mapbox地圖外，也可以使用Basemap功能修改地圖格式如Dark或Light等風格，或自行引入再Mapbox自建的地圖。

資料匯出 建立好所有要檢視的Layer或Filter後如果離開了瀏覽器，那所有之前編輯的內容就會消失。

我們可以透過Share中的Export功能將資料匯出至Json檔案中，以便下次快速匯入上次結果。

匯出功能可直接點選左上的Share按鈕，就會出現三種不同的匯出功能 ExportImage 匯出畫面為圖片檔，可設定對應的解析度，長寬比等資訊。

目前在Chrome和Safari上似乎有問題無法正確匯出，只有Firefox可以(但Firefox執行效能較低) Exportdata 匯出原始的Dataset或經過Filter過濾的資料內容 Exportconfig 匯出目前的地圖設定檔為Json格式檔案，可分為單純設定檔(匯入時需已有原始資料)或包含原始資料的Json檔案(該檔案可能很大)。

Conclusion 上文簡單介紹了Kepler.gl的基礎功能與用法，對初學者應已足夠。

但如果想進一步開發自己想要的視覺化效果，因該工具為開源，因此也可自行開發相關功能。

此外Kepler.gl可以現在仍在發展中可能會有些問題，事實上個人在嘗試時也遇到了部分問題與Bug，如圖片匯出功能在Mac的Chrome無法正確執行，這部分仍須等待時間解決。

Link Kepler.gl-Website Kepler.gl-Github iThome-Uber開源地理資訊視覺化工具kepler.gl TAGGEDIN Kepler.gl NEXT PREVIOUS NEXT PREVIOUS ShareonFacebook ShareonTwitter Cheng-ShiangLi Seniorsoftwaredeveloper.MasteringAndroid/iOSapplicationdevelopmentandmachinelearningalgorithm. SoftwareEnginner Taiwan