數據視覺化 (Data visualisation)

當我們呈現越多政府服務的詳細數據時，越需要確保數據視覺化後變得更容易理解，更有視覺吸引力，並促進後續的作為。要做到這一點，我們需要一個一致的視覺語法，應用於 GDS 和跨不同政府部門。

引言

本指南制訂 4 個原則用於呈現數據視覺化，並提供檢核表來幫助你達成這個目標。我們加了一些例子來說明 GDS 如何運用這些原則，希望能夠幫助你了解適當的使用情境。提醒一下，未來若遭遇新的挑戰時，也許某些原則和範例可能會做些調整。

4 個原則：

1. 說出故事
2. 選擇適當的視覺化呈現和樣板
3. 創造你的視覺化圖表
4. 開放與誠實

最佳實踐

市場上已有不少最佳實踐的例子，例如 The Economist 有其獨特的資訊圖表設計風格，使讀者很容易識別及了解他們的畫面資訊，而且他們每天都發布新的數據圖表在 Graphic Detail 這個網站單元中 。
我們將從許多不同機構組織的精華中，嘗試建構出最佳實踐的設計指南。

GDS 的例子

GOV.UK 績效平台 藉著創新的視覺化數據來幫助政府以數據做出決策 (以 D3.js 繪製)。下面的例子比較了 GOV.UK 與兩個被其取代的網站之每週訪客數。

說故事

為了有效地闡述數字背後的故事，我們需要了解受眾和資料數據。

使用視覺化的前提是幫助故事更加清晰呈現，萬一無法更清楚呈現，千萬別為了視覺化而視覺化。實際上，大多數情況採用編排良好的表格或清楚的文字，可以傳達出比圖形更準確的資訊。如果只有很少的數據點（如：最高稅率所得稅下降5％，其他不變），寫個句子遠比畫張圖更加容易理解。如果每個項目必須精確地閱讀（到幾位小數），那麼表格會是較佳選擇。

好的表格應該能清楚呈現，整齊排列。數據具有相同的小數位或進位原則，並依照邏輯次序排序，有助於閱讀。不要過度使用不同字體，並確保清楚地標示引用來源。

若數據資料是最重要的訊息重點，那麼視覺化呈現會是不錯的選擇。數據視覺化之後必須能自己說出自己的故事，不要一次說太多，什麼都想說，等於什麼都沒說。保持圖表簡單，刪除不必要的項目，也不要使用專有名詞。

某些情況下，你還是需要仰賴文字解釋。不過，文字不該只是再重複一次在視覺化圖表中已被表達的意義。如果圖表標題下的夠好，
可以加強數據的故事性和減少額外的文字。

檢核表

1. 誰是你的目標受眾？
2. 他們需要多少細節？
3. 數據說了甚麼故事？
4. 你需要視覺化嗎？

選擇適當視覺化呈現和樣板

有很多方法可以把資料變成視覺呈現，但是選到合適的視覺化形式，才有助於清楚表達故事，或提出有力論述或觀點。

大多數電腦應用軟體都有部分數據視覺化的功能。此外，網路上也有很多視覺化的工具：例如這篇文章 22 free tools for data visualization and analysis 介紹了很多免費的視覺化工具，或者參考 GDS 製作出來的 資訊圖表指南(PDF)

每種圖表都有它的優點。下面是 5 種核心圖表與其模版，我們藉著這份 (Google 試算表 ）來幫助說明：

柱狀圖

優點 – 項目比較，或小數目時段比較。

• 負值顯示低於x軸。
• 如果需要的話，目標應是單行且可見的，但不能太厚。
• 柱體堆疊限制在3段。

長條圖

優點 – 項目比較，特別是項目很多或具有很長的名子。

• 從最大到最小排列長條圖順序（除非有很好的理由，如：數據必須按字母表示）。
• 負的值顯示在y軸的左側。

折線圖

優點 – 比較一段時間內或單個項目間的變數（如：網站流量 v.s. 網站效能）

• 將數據限制於4組內。
• 保持軸標籤的水平。
• 使用線點區別化數據類型（只用虛線表示預測和估計）。

圓餅圖

優點 – 簡易總額分配圖。謹慎使用，尤其柱型圖或長條圖往往更好。最多表現2段資料，以避免混淆。

• 最大的部分應該是由12點方向，順時針延伸。
• 直接標註圖表，避免文字在餅圖內。

散布圖

優點 – 顯示許多項目間變數的關係（如：容量與花費間的大量業務）

• 項目限制在兩種以下，以避免混淆。
• 繪製趨勢線（如果需要）。趨勢線應該是單一的實線。

更多協助你選擇正確圖表的資訊在這裡 。最重要的是，不要混淆你的聽眾。

檢核表

1. 哪些視覺化是可以用的？
2. 你為數據選擇了正確的視覺化嗎？
3. 資訊圖表 呢 ？

範例

選擇正確的視覺化是非常重要的，在GDS，我們撿視了性能dashboard上的視覺化方式。如下面的例子所示，有著很多項目的圓餅圖變得不清楚。因此我們使用了一個堆疊的長條圖，更好地呈現數據。

設計前

• 難以比較很多項目。
• 圖表因為太多顏色顯得混亂。
• 該圖將成本回收費用設為負值，無法合適地顯示在圓餅圖裡。

設計後

• 長條圖顯示較為清晰。
• 容易地比較和排序可讓數據提供快速的洞察力。
• 長條圖表提供了圓餅圖中無法被顯示的訊息。（負值）

創造你的視覺化圖表

創建圖表時，請記住這些有用的提示：

• 將軸起點設為零，除非有很好的理由不這麼做（如：數據被聚集在很高的值）
• 別嘗試一次說太多，限制數據組的數量
• 如果需要的話，把圖例說明以相同的排序方式放在圖表頂部
• 將圖表空間最大化，移除任何不必要的元素（chartjunk）
• 將計量單位顯示於圖表標題或軸上，避免同時顯示
• 保持簡單的色調，不重複、不交替使用、不使用對比色 – 使用GDS的顏色調色盤
• 報告一個數據集合時使用相同的顏色

保持單純的視覺化將有助於數據訴說自己的故事。

Chartjunk是視覺化中任何會使用到墨水，且明顯地降低清晰程度的元素。避免：

• 3D 效果
• 邊界
• 不必要的軸線
• 隨機顏色或背景
• 不必要的文字

了解你的受眾，才能給予他們適量的輔助訊息。外部或者非技術人員將需要更多的解釋，但內部或專家的觀眾可能覺得乏味。別用文字單純地為了重複數據已表示的訊息。

視覺化應避免過多的數據。只包含相關的訊息。如果這種趨勢是明顯的，別畫趨勢線。有時，只把重點放在高價值的物品可能是較有效的（如果你是有選擇性的，試著開放和清楚這一點）。

拙劣的顏色選擇可以改變視覺化中對數據的理解。例如，紅色會強烈的聯想到負面表現，最好避免用於正/正常的數字。

色盲的使用者難以區別數據集之間的差異。直接標示於圖表和使用不同的線條樣式將有幫助。如果你的圖表是可能被列印的，使用不同灰階是很重要一環，因為不是所有的用戶都有高質量的印表機。

檢核表

1. 你刪除 chartjunk 了嗎？
2. 你挑選了正確數量的輔助資料嗎？
3. 你數據是適量的嗎？
4. 你有沒有使用GDS的調色板？
5. 你的色調對於色盲和灰階的使用者友善嗎？
6. 你的色調適合數據的嗎？

範例：GDS 績效儀表板

以下由 GDS 資深管理 dashboard 的範例，展示如何避免 chartjunk 和限制數據集的數量以增進視覺化效果

設計前

圖示說明了四分之一的展示空間。Y軸表示£而非£m。資料段落指出資料特性和時間下的對稱性，因此選擇鮮艷的顏色並沒有添加額外的訊息。長條圖和折線混合呈現太多資訊使之非常混淆。

設計後

太多堆疊列提供了許多不必要的訊息。設計後圖表已經被合理的簡化來配合它的受眾。軸線都已標準化。圖表說明重新配置在頂部，給予圖表本身更多的空間。厚重的格線和軸線都被除去，為了更加清晰的顯示重要訊息。

開放與誠實

“我們希望透明化成為政府眾多業務中，絕對核心的部份。”- Francis Maude

開放及透明化支持著Open Data White Paper 。同樣的，我們的開放式公共服務議題是建立於透明化之上。採購數據建立信任和信譽。提供聯繫方式表示了所有權，也有利於協作和資訊共享。

當展示數據時，注意軸線及尺度。選擇性地呈現數據，卻不明瞭擷取的目的，可能使數據被錯誤的呈現。考慮視覺化內容可能被發佈地方。例如，如果與其他視覺化內容一起發佈，讀者可能假設的尺度是一致的。這可能會改變你的數據如何被理解。

檢核表

1. 你的數據是否引用於某個URL？
2. 是否提供了聯繫細節（如mailto link）？
3. 確定數據是內部還是公開使用？
4. 你有的數據是公開且透明的嗎？

範例

• 圖表只顯示選擇過的幾個數據點
• 特定小範圍的y軸誇大了數據的起伏
• Y軸開始於60，但圖表表示數據已經達到可表示的最低值

• Y軸已被格式化，以顯示全部數據範圍。
• 數據的波動可在更廣的數據系列及脈絡中顯現。

延伸閱讀

更多關於 績效平台 Performance Platform 。

這個 chart chooser 圖表選擇器 是Andrew Abela 從 Gene Zelazny 的經典書籍 “Saying it with Charts” 中建構出的。Juice Analytics 的 interactive tool 可以引導你一步一步的挑選出合適的資訊圖表。

Brain Suda 的 A Practical Guide to Designing with Data 教你如何使用數據吸引觀眾。2012 DIBI 研討會上，Brian Suda 演講介紹他這本書的內容，可參考這個影片連結：Brian Suda – Visualising Data。

Dona M. Wong 的 The Wall Street Journal, Guide to Information Graphics則詳細說明了呈現數據時，「哪些該做 do’s」與「哪些別做 don’ts」的注意事項。

Edward Tufte 的 The Visual Display of Quantitative Information 是創新的數據視覺化方法，並介紹了 chartjunk 的概念。這是 Edward Tufte 討論他的理論用於視覺思考和分析設計的影片連結 Edward Tufte: Beautiful Evidence (Highlights) 。

這篇從Peltier Tech blog的文章涵蓋了10圖表設計原則。

Flowing Data 部落格是數據視覺化的新聞來源。

翻譯：湯世璟
校稿：Richard, Amy Hsu, James Chu
原始出處：https://www.gov.uk/service-manual/user-centered-design/data-visualisation.html