GDS Digital Service Manual 中文翻譯網站 (beta)
by HPX-GOV 英國政府數位服務研究小組 GDS Study Group

數據視覺化 (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 試算表 )來幫助說明:

柱狀圖

柱狀圖 - 圖片1

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

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

長條圖

條形圖 - 圖片2

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

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

折線圖

折線圖 - 圖片3

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

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

圓餅圖

餅圖 - 圖片4

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

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

散布圖

散點圖 - 圖片5

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

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

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

檢核表

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

範例

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

設計前

壞餅圖 - 圖片6

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

設計後

良好的堆積圖 - 圖片7

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

創造你的視覺化圖表

創建圖表時,請記住這些有用的提示:

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

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

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

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

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

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

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

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

檢核表

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

範例:GDS 績效儀表板

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

設計前

可憐的棧欄 - 圖像8

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

設計後

良好的折線圖 - 圖片9

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

開放與誠實

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

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

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

檢核表

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

範例

壞的折線圖 -  image10

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

良好的折線圖 - 圖片11

  • 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

請留言

你的email信箱不會被發布出來. Required fields are marked *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料