Cartodb - cover
在地圖上畫資料,效能往往是個大問題。我們手上常有大量的資料,像是台北市監視器列表、全台登記工廠列表等等,但數十萬筆的資料要畫得動並不容易,很多網站都只能透過選取局部範圍的方式減少顯示的資料量。這時一個專為地圖繪製打造的服務降臨了- CartoDB ,專門的地圖繪製工具,這次就讓我們來看看如何使用這個工具做地理資訊視覺化。

在 CartoDB 中,地圖 ( Map ) 與資料集 ( Dataset ) 是分開管理的。我們可以使用線上預先提供的資料,也可以自己上傳資料來玩。另一方面,我們可以建立地圖,並把資料集以圖層的方式疊加上去。

註冊好帳號後,我們先來建立一個地圖吧!在帳號主畫面的右上角點選「NEW  MAP」:

CartoDB - NEW MAP 1
接著會提示你一些範例影片,有需要可以點來看;不然則點選 Create Map from Scratch 右方的「CREATE NEW MAP」:

CartoDB - NEW MAP 2

下一步則是選擇地圖要使用的資料,在畫面下方可以看到已經有兩筆資料了 ( partial & untitled_table ) ,但假設我們尚未上傳的話,則可以先建立空白地圖「Create empty map」後稍晚再上傳資料:

CartoDB - NEW MAP 3
然後再點一次建立新地圖,接著看到的就是一個新的空白地圖:

New Map Description
為了要與資料集連結,我們要點選右上角的藍底加號 ( 上圖「增加資料」按鈕 ) ; CartoDB 可接受 Google Drive 、 DropBox 、 Twitter 等等的資料來源,若有已經上傳的資料集也可直接選取。因為我們尚未上傳任何資料集,所以我們自己先來上傳吧!

為了讓 CartoDB 幫我們處理地理資料,含有地理資訊的資料是必須的。我們以內政部提供的不動產實價登錄資料為例,先將資料轉換成 CSV 檔,同時也把資料內的 TWD97 座標轉換成 GWS84 經緯度資料:

  編號, 平均單價, 緯度,               經度
  1,    56790,   24.900450404978617, 121.04203079002734
  2,    35545,   24.865235166619183, 120.98375058934072
  3,    3813,    24.89642058084311,  120.99917841674052
  4,    39333,   24.875302789511338, 120.99502185400195
  5,    228,     24.64559416214912,  121.01922400367464
  6,    490,     24.692714419174756, 121.07796254636216

上例的每筆資料各有三個欄位,分別是該筆交易的平均單價、緯度以及經度。實際我們會上傳一個約 13 萬筆資料的 CSV 檔,這裡只列出其中六筆做為示意。下圖為上傳檔案的畫面:

Upload dataset

匯入之後還有一個重要的步驟要做,為了讓 CartoDB 知道我們資料中哪兩個欄位是對應到經緯度,我們必需要做「Georeference 」的動作;匯入資料後切換到 Map View 時 CartoDB 會提示我們做對應,若沒有提示的話也可以自行到右上方的「Edit」下拉式選單中點選「Georeference layer」:

Georefernece Layer
選取對應的欄位,此例中為 Field_4 ( 經度 ) 與 Field_3 ( 緯度 ):

Georeference
做好 Georeference 後,把地圖拖拉到台灣一帶,會看到類似這樣的地圖:

First Attempt
喔喔,看起來有的資料跑到日本跟菲律賓去了。雖然不是很清楚為什麼,不過實用上資料會有一定的錯誤率,我們可以透過額外的處理來減少資料異常的狀況,這屬於資料爬梳的問題,有機會我們再聊。

在編輯器右方有許多功能可以選擇,其中一個「Wizard」可以快速幫我們設定想要的圖標類型,其中包含了 Cluster 、 Choropleth、 Category 、 Bubble 、 Torque 、 Heatmap 、 Density 等等,我們可以試需求選擇適當的類型:

Marker Wizard

Wizard

比方說,下圖是選擇了 Bubble 類型之後的結果,我們用平均單價 ( 下圖中 「Column」 選項裡的 field_2 ) 做為圈圈的大小:

Set Bubble Chart
使用 Wizard 做出的圖標客製化空間不大,這時我們可以使用 CartoDB 提供的另一個工具 - CartoCSS - 來幫我們做進階的設定。同樣在右邊的工具列可以看到「CSS」字樣的按鈕,選取他之後便會開啟 CSS 編輯器。

從下例我們可以看到右邊即為 CartoCSS 編輯器,其中已經代入了一些值,是 Bubble Chart 所提供的屬性;我們想要將泡泡的顏色也對應到平均單價,於是在每一個欄位中我們都追加一個「marker-fill 」屬性,並各別給與一個不同的 RGB 值,按下下方的「Apply Style」按鈕後,左方的泡泡便更新成有顏色的版本了:

set css to bubble chart
( 關於 CartoCSS 的細節請參考 Mapbox 的這個網頁,小編也沒有玩得很深入,大家一起學習囉! )

把整個地圖拉到彰化雲林一帶來看,高房價的區域密集的集中在北邊:

Price Bubble in Changhwa

你這時可能會想說,看實價登錄物件時用特定條件過濾是蠻重要的功能,CartoDB 能幫我們做到這點嗎?答案是可以的!同樣在右邊的工具列,我們可以使用「filter」工具透過 UI 來調整條件,或者是利用「SQL」工具編寫 SQL 語法來調整顯示範圍。下圖即為利用「filter」工具將實價登錄物件限制在彰化中部以北的樣子:

Filter Items

( 眼尖的你可能會發現為什麼台北資料量很少;因為檔案大小的限制,我們上傳時移掉北部大部份的物件,所以並沒有顯示。 )

到目前為止我們已經弄出了一個還不錯的實價登錄地圖,如果想要分享給朋友的話,點擊右上角的分享鈕,我們可以選擇三種方式來分享地圖。下面我們展示透過 iframe 分享的地圖長的樣子,可以拖動、縮放來瀏覽喔:

很不錯吧!


 小結

常見到房仲網站在地圖上顯示實價登錄物件都需要先選擇區域才能應付得了大量資料的顯示,那為什麼 CartoDB 能做到這麼快速且大量的資料繪製呢?

事實上, CartoDB 在繪入資料跟調整設定的同時都快速的幫我們產生了「圖磚」- 一張張的方塊圖,疊在地圖上拼出我們想要顯示的資訊。由於圖磚本身只是一張圖,不牽涉到大量的資料,所以顯示速度相當快,就不會有大量資料載入的問題了。

當然,使用圖磚製作地圖圖層還會面臨到一些更複雜的問題,例如當我想點選某個圖標時該怎麼辦?利用條件過濾圖標時,圖磚要重新繪製嗎?這些問題其實都有對應的做法,有機會小編再跟大家分享。

優缺點速記

  • 優點
    • 相當快速且方便的工具
    • 能處理相當大的資料,且提供 iframe 直接嵌入
    • 免費即能用到一定的用量
    • 圖標多樣化,並且支援 CartoCSS
    • 可以製作動畫
  • 缺點
    • 介面過於複雜,第一次建立新地圖竟然要連按四次「Create New Map」
    • 上傳原始檔案不等於使用到的儲存空間大小,而免費空間限制在 50MB 以下
      • 不付費無法吃下整個實價登錄列表,所以前面的例子只好砍掉部份資料
    • 付費選項不便宜,要能處理實價登錄物件得花到 4500 元新台幣 / 月
    • 偶而資料欄位分析會出錯

除了快速處理並繪製地圖外, CartoDB 還有很多厲害的功能等著你去挖掘,比方說動畫製作等等,而他另一個誘人的地方就是開放原始碼,所以我們可以自己架 CartoDB!當然考量到建構跟維護的成本,做為一個穩定服務要花費的精力不見得比向 CartoDB 購買服務來得划算,但對一些人 ( 比方說學生、研究人員、開發者等等 ) 來說,這個選項提供了測試、製作報告或學習的機會,相當的方便。

講了這麼多,你有沒有心動了呢?趕快用用看吧!


Written by infographics.tw

6 Comments

Paul

例,先將資料轉換成 CSV 檔,同時也把資料內的 TWD97 座標轉換成 GWS94 經緯度資料:
→應是WGS84經緯度資料

Reply
infographics.tw

實價登錄購買的歷史資料中會有(不確定準確度),網站上提供的當期免費下載資料則沒有;即便如此,仍可以利用模糊地址搭配 Geocoding 取得概略座標。
聽說最近實價登錄開放資料的規格有要再調整,未來不一定仍然是這樣喔。

Reply

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *