視覺化 Visual your data - 06 客製化底圖

客製化繪圖其實對於每家企業一點都不陌生,舉凡精準機房網路架構圖、電話交換機配置圖…等,都是按照辦公室/工廠現場的坪數來做繪製的。好!讓我們來發想更多的應用情境吧!如果你是一名醫生需要檢查病患在關節損傷/分析病人牙齒各個部位發生狀況的頻率;亦或是想要在飛機/遊輪/演唱會/電影院…等各種販賣座位的情境下,提供每個售票員能可以有一個畫面可以滿足客戶要買靠窗/靠走道/搖滾區/正中間/三個人比肩相鄰…等需求,就是本文想要介紹的,如何透過 BI報表工具的視覺化功能,來進行進階的分析?
 

在開始之前,要問各位一個問題,為何要以地圖來顯示?直/橫條圖難道不好嗎?然而在視覺化的佈局理念,第一步就是先發展主要圖形,接著才是加入文字、顏色、圖例、大小…甚至是第二種附屬的圖形,例如組合圖 (在Power BI叫 Line and clustered column chart,在Tableau叫 Combination chart),這些添枝加葉的動作才是第二步。或是Symbol map地圖上呈現出 Pie Chart的二層資訊…
如果第一步走錯了,可能會誤導你的讀者。雖然你的地圖很漂亮,但是能提供的資訊並不夠深入,甚至還不能回答「空間的問題」,造成不預期的誤導讀者結果,讓他們無法聚焦在探索未來的機會或是未來的風險。
如果它的確是一個空間問題,例如台灣哪些縣市的香蕉外銷成績最亮眼?接下來可以優化物流的動線…或是,台北市哪個行政區的 Covid-19確診數最嚴重?接下來可以規劃通勤動線來減低被感染的機會…除了之前第四章介紹過的二個常用的地圖,還有哪些效果也不錯的地圖呢?包含了點分佈圖(Point distribution map)、熱度圖(Heatmap/ Density map)、流線圖(Flow map/ Path map)、蜘蛛圖(Spider map/ Origin-destination map)…
 

接下來再提一個單位換算的重要概念…在地球儀上是具有經度東西各180,緯度南北各90的界線。對比於真實的世界,它的背後是有一個比例尺的概念,例如每一個經度間距是111公里。若覺得觀念上不是很清晰,可以回頭再看一下第五章的細節。

以下將分別用 Power BI 與 Tableau 來做示範,但由於 Power BI 需要使用第三方的 Synoptic panel 的解決方案,而且限制比較多,所以我們留到最後,先談 Tableau。若是對於地圖的操作沒有那麼的熟悉,可以回頭複習一下第四章
 
一、以像素尺寸來進行:
以 Tableau 為例,當我們要使用自帶背景時,就需要選擇百分比對應(X=0~99;Y=0~100)或是背景圖片的像素尺寸(例如1024*627,就是X=1024;Y=627 的 Landscape 水平圖像),在下圖中,就是透過 BI工具,將辨公室員工分機表做出來的樣子
 

承上,假設 MIS接到任務,需要提供會議室的租借系統,所以他們收集了以下資訊:會議室名稱、編號、分機、是否支援線上會議、容量、座標X/Y(其中最後一筆有資料遺漏)

首先我們要把X拖到 Columns,Y拖到 Rows,然後就可以應用 Map中第二個選項

在下面的視窗中,把底圖選進去,並且把圖片的像素填入

當你把 Room Name拖至 Detail中,系統會自動以Shape的呈現方現,把會議室的配置圖畫出來。接下來我們要把 Shape改成 Circle 以方利美化工作的進行(跟 Symbol map類似),我再把Room Capacity拖進Size,在尺寸、顏色、Tooltip上做調整,就能做出以下的效果。美中不足的就是右下角有一個 1Null 的警告

這個遺漏值,你可以攤開工程設計圖,找外包、水電、工程師、同事…來解決,但其實,我們也可以應用 Point Annotation 的功能,自己來解決。因為在你面前,就是一張具有比例尺概念的配置圖

當你從 Point Annotation中取得的 X/Y座標後,就可以填回Excel 資料集,一但你在 Tableau Desktop按下 Refresh後,這個點就能被畫出來

二、以百分比來進行:
我們再加碼一個醫療診所的分析,基礎於上一個範例,我們知道要先將底圖載入,只是這次的座標是用百分比的相對值,而非像素的絕對值

雖然 Valid暫時會顯示 No,只要你拖一個 Dimension 進去就會正常了

所以我們除了要把 Location X與 Location Y拖至右上角之外,還需要把彙總函式由 SUM 改成 AVG,並且將 Location of injury 拖進 Detail,以及把 Number of records拖進 Size。順便也把座標列隱藏掉…

再來是右下角的 5 nulls的警告,歸零沒有用,所以我們點選 Fiter data 把它們排除掉

在這個情境中加號可能會比圓形還好,所以我想改一下,然後既然是受傷,我就用紅色表示

經過美工,我就能用 Laso 套索工具,分別將正面與背面受傷最多的部位選出來,你可以在 Tooltip看到肩膀有27次的受傷記錄,同理下背部也是一樣

三、使用更專業的高精度地理資料集:
當你遇到以地理資訊為主題的議題,或是地理資訊的重要性高於其他項目時的繪製報表需求,你將會需要使用更高精度的 Spatial file地理資料集來做為資料源。目前二大陣營能支援的格式,包括了:Shapefiles、MapInfo tables、KML (Keyhole Markup Language) files、GeoJSON files、TopoJSON files、Esri File Geodatabases。平心而論 Tableau 在這個部份稍微領先,因為它可以直接使用以上所有的格式,細節可以參考官網的說明。而 Power BI 可能會需要搭配第三方的 GIS工具,把這些格式進行前處理,所幸這些格式的互相轉換,在第三方是很成熟的。
但是,這些高精度地理資料集到底能應用在什麼厲害的情境呢?主要有三大類型:

1、將地標(例如著名建築、機場、車站、公園、社區、學校…) 以圓形或點來呈現,例如探索花東地區每一個火車站的使用頻率…(待會會示範給大家看)
2、將區域(農場、礦區、油井、山脈、湖泊…) 以多邊形來呈現,例如探索台灣不同縣市的人口分佈…
3、將具有線性特徵(河流、道路、鐵路、高速公路…) 以線性軌跡來呈現,例如探索居住在高速公路周邊與某個地區本地居民在收入上的差異
某個政府官員,想了解英國地區在特定年份在鐵路方面使用狀況的分析,以利他能規劃未來的施政方針,包含鐵路網路的分佈與每個車站進/出的人數。當我們接到使用者的請求時,你要先判斷鐵道資訊並不在原生 Tableau的功能中,需要引入外部的 Spatial file來輔助。基礎於原先的Estimates of station usage資料,再加上Station point空間資料,才能做到更細部的分析  

首先要先找到 mapping key,就是車站名稱

並確認有 Point 型別的 Geometry欄位(若它不是地圖符號,可以手動做指定)可以用

當我們將 Geometry 拖進 Detail 中,系統除了會彙總資料(較 high level的資訊,而非明細),並且也會自動產生經緯度

將 Network route 拖進Color,來區別不同區域線路;將Station name 拖進 Detail,讓地圖內含細節的資訊;將2015-2016 Entries & Exits 拖進 Size,來觀察車站進/出的人數

因為歐洲有許多相鄰的國家,所以要在地圖圖層中加入海岸線、國界、國名,來輔助地圖的閱讀

我們就能回答委託人 Stratford international / Ashford international / Ebbsfleet international / Barking 四個較著名的車站中,在 Ashford international 有著最高的進/出人次

四、雙軸地圖:
當你有 High level 與 details 不同顆粒度的資料,又想一起呈現在地圖上時,你可以將原來的值在 Rows 上面複製一份然後做雙軸。當你複製一份資料時,地圖會變成上/下二張相同的地圖。(如果你是在 Columns 複製,會是左/右二張相同的地圖),以下圖為例,是要配置一張藍色的 Filled map 來表示日本的國土,然後疊上一張日本機場的 Symbol map (把Airport 從City的 Table拖進 Detail 的 Mark中),細節可以參考官網的說明

五、經緯度客製化:下圖是應用上述的地圖雙軸技巧,將高雄市三民區的85個里人口分佈,與某個市場調查的供需結果做疊合的範例。

在進行客製化之前,我們需要先了解產品的限制與可以發揮的空間。基礎於前面二篇(標準地圖地圖地址轉換),我們已經了解 Tableau 可以自動解析地址然後轉換為相關的地理型態,有時是資料有雜訊,所以它沒有轉換成功;有時是它不支援較低階的層次(洲際或是國家是相對高階的層次),所以你無法把擠在一起的資料點(例如左邊本館里或是中間一點的安東里就是明顯地鶴立雞群,Tableau 預設會幫你做排版,顯示數值最大的資料點),應用類似 Hex六邊形重朔手法來優化它,取而代之,只能新增一個像 A3這種大尺寸儀表板的大版面來擺放。
以下圖的高雄市三民區資料集為例,行政區與村里這二個較低層級的階層,光是高雄市的行政區當 Tableau 在解析時,我在用 2021.4版本時,就有6個行政區不認識,需要額外手動輸入經緯度。至於村里就更低階了,只有自帶經緯度一途才能呈現。

接下來要介紹,如何自動產生的經緯度?以及如何對自帶的經緯度做正確地設定。由於村里太低階 Tableau 無法辨識,所以我換了一個高雄市全區的資料集。

你可以看到一開始縣市&行政區都是被視為 Abc文字型態,所以不會有自動產生的經緯度。接下來我們只需要對著行政區按右鍵,選擇地理角色/城市,Abc就會變成地球符號,然後在度量值Measure (分隔線以下)區域出現經度(產生)與緯度(產生)。當你分別雙擊這二種物件,Tableau 就會自動畫成地圖,而且不需要去麻煩經度該放在 Column 還是Row?最後再把行政區拖拉至標籤即可完成 Symbol map

如果我們要使用自帶的經緯度時,你將會遇到幾個可能的問題,系統辨識成 Abc 的 Dimension,要改成 Measure時,要選連續還是離散?彙總方式要選總合或是平均?這裡建議你切到資料來源頁籤,先將字串改成空間,此時數值會變成Null,別擔心這只是暫時的,然後再改成數字(十進制),然後再選擇地理角色,將 Longitude 設定成經度,另一個依此類推。再重覆上一個步驟的動作,就能畫成一模一樣的結果,而且不會有連續/離散&總合/平均問題要訣擇,是不是很方便?
** Tips:你也可以在工作簿直接將自帶的經緯度,直接按右鍵,選到地理角色中的經度與緯度,當你將自帶經緯度拖到Column或Row時,出現AVG(經度)也都能畫的出地圖,我是因為常在幫人做教育訓練,需要處理的比較細緻,如果你想快速開發,這樣做方便也省事!

至於 Power BI:
一、Synotic Designer

其他:
找時間我再補充 Hex 六邊形的重朔手法,可以如何抽取地形地貌的特徵,以宏觀而非鉅細靡遺的呈現,例如應用在細節太多或是標籤互相擋住的場景。以及 Tableau map layer 的新功能…

結論:
雖然報表工具已經透過 3D的渲染、視覺化元件之間的互動、手持裝置的 App 支援…等功能的提供,來協助企業去管理與優化自身的商業流程。若,大家能再善用進階的地圖功能,就能讓 IT在管理機房、會議室、工廠、產線…時覺得更有趣;可以讓醫生在喘不過氣的門診人生之餘,能透過分析病患在不同身體部位的出現趨勢,來發表學術論文或是轉換成其他的衍生型商機(保健產品);可以讓飛機/遊輪/演唱會/電影院…等各種販賣座位的售票員,都能透過視覺化的顯示,減少人為的錯誤,提供更多的輔助資訊,進而能鼓舞士氣與提昇工作效率。
總之,讓各行各業,都能採用這樣的好技術,把更多的歡樂元素添加到我們的工作與生活中,豈不快哉…

李秉錡 Christian Lee
Once worked at Microsoft Taiwan