本文聚焦的是視覺化中顏色如何傳遞資料資訊。可別小瞧了這一技能,視覺化是一圖看懂,還是一團漿糊,可能就是顏色有沒有用對。

作者 Lisa 為了講清楚這個主題,整整寫了4篇文章,這裡給大家帶來一份精華版,一起來看看吧~

一、什麼是色階?

在資料視覺化的過程中,我們離不開和顏色打交道。例如為不同類別的資訊賦予不同的顏色,或是在地圖中製作有梯度的色彩漸變。

如果你用顏色進行資料視覺化,那麼你用到的色相調色盤和顏色漸變就會形成標註資料的色階。這是因為二者都與資料有著對應關係:例如每一個色相對應著一個特定的類別,而每一種顏色對應著一個特定的數值區間。

別找了,最全資料視覺化配色指南在這

而色階又可以分為類別色階、連續色階和發散色階,它們分別對應不同資料型別:

1. 類別色階

所謂色相,就是我們五歲時就知道的“不同的顏色”:紅,黃,藍……這些顏色可以很好地用來為那些沒有天然優劣之分的東西進行分門別類,比如國家、種族、性別、行業——這也是為什麼用於分類它們的類別色階也被稱為“無序色階”。

別找了,最全資料視覺化配色指南在這

⌂ FiveThirtyEight 圖表圖例中的色相

別找了,最全資料視覺化配色指南在這

⌂ The Economist 圖表圖例中的色相

小貼士:

記得要給你的色相賦予不同的明度,這對於色盲讀者來說尤為重要。

2. 單一方向的連續色階

連續色階就是由亮到暗或由暗到亮的漸變。它們能很好地把從低到高的數字數字化,比如收入、溫度或年齡。

別找了,最全資料視覺化配色指南在這

⌂ New York Times 圖表圖例中的連續色階

別找了,最全資料視覺化配色指南在這

⌂ Datawrapper 圖表圖例中的連續色階

小貼士:你可以在你的連續漸變中使用一種色調(例如從淺藍到深藍色),但在這裡展示的幾乎所有的例子都使用了多種色調(例如從淺黃到深藍色)。使用兩種甚至更多的色調可以增加漸變部分之間的顏色對比,使讀者更容易區分它們。

3. 雙方向的發散色階

發散色階(也稱為雙極色階或雙端色階)的顏色刻度和連續的顏色刻度是一樣的-但不是單一從低到高變化,而是有一個明亮的中間值,然後向刻度不同色調的兩端逐漸變暗。

發散色階經常被用來刻畫消極/積極的價值取向、選舉結果或李克特量表(強烈同意、同意、中立、不同意、強烈不同意)。

別找了,最全資料視覺化配色指南在這

⌂ Axios 圖表圖例中的發散色階

別找了,最全資料視覺化配色指南在這

⌂ Opportunity Atlas 圖表圖例中的發散色階

連續色階和發散色階都是定量色階。

4. 突出/弱化●●●●●

對於任何色階,無論是類別色階、連續色階,還是發散色階,你都可以重點強調那些你認為對你的讀者或故事特別重要的資料類別:

別找了,最全資料視覺化配色指南在這

⌂ 來自《衛報》這張圖強調了“0%”部分的未分類梯度

別找了,最全資料視覺化配色指南在這

⌂ 來自 The Pudding 的這張圖弱化了“text”部分的顏色分類

別找了,最全資料視覺化配色指南在這

⌂ 來自彭博社的這張圖,突出了中國

除了強調,你也可以弱化一些類別,比如雜項、其他或者無資料。它們通常是灰色的:

別找了,最全資料視覺化配色指南在這

⌂ FiveThirtyEight 的這張圖就補充了“無資料”的已分類梯度

我們接下來關注的問題是:什麼時候應該使用哪種色階?

二、何時定性?何時定量?

別找了,最全資料視覺化配色指南在這

我們先來看看適用於90%情況的答案:

1. 當你的資料沒有內在排序時,使用類別色階

如果你無法對顏色編碼後的變數進行大小排序,使用類別色階,反之如果可以排序,使用連續色階或發散色階。

例如變數是行業或國別,如伊朗、摩洛哥、巴基斯坦,應該使用不同的色相,因為摩洛哥和巴基斯坦無法進行大小排序,反之亦然。

別找了,最全資料視覺化配色指南在這

如果你想對失業率,如3。4%,1。4%,2%,這樣的資料進行顏色編碼,就要使用一個定量的色階,連續色階或者發散色階。

別找了,最全資料視覺化配色指南在這

這並不僅僅是用不同方法區分文字與數字的問題,如在李克特量表和衣服尺碼錶中都有內在的排序,這些也是定量尺度。所以當你把它們視覺化的時候也一定要考慮使用定量的色階。

別找了,最全資料視覺化配色指南在這

讓我們再深入一點。

2. 使用明暗強調內在的排序

在你的分類之下總會有一些數字,如各州的失業率或是子類的計數,你可以使用定性的色階來展示這些潛在的值。

下面的樹狀圖就是一個很好的示例:

別找了,最全資料視覺化配色指南在這

你可以像左圖那樣,在樹狀圖中透過不同的色相給你的類別上色(如定義國家或行業)。但如果像右圖一樣透過色塊的尺寸大小對應明暗變化來上色,你的樹狀圖的可讀性會更好,不會看起來花裡胡哨。

別找了,最全資料視覺化配色指南在這

左邊的樹狀圖試圖同時做太多的事情,即使有一個很好的顏色圖示,閱讀這樣的圖表也是一個挑戰。

在大多數圖表型別中,避免使用未被編碼的值(例如位置或順序)著色。如果你想給圖表中潛在的值上色,請確保這些值在無顏色的情況下也是清晰可見的,這樣這個圖表才會易於理解。

別找了,最全資料視覺化配色指南在這

我不想給你們留下用一個尚未編碼的潛在變數著色總是一個糟糕的決定的印象。下面是《經濟學人》的一個反例:

別找了,最全資料視覺化配色指南在這

⌂ 圖表來自2019年6月8日,《經濟學人》的“谷歌演算法”詳細頁面

讓我們看看左上角的散點圖:這張散點圖是用它的數值來著色,而不需要用位置、長度等來視覺化。

散點圖是為數不多的用根據數值上色效果就能很好的圖表。我認為這是因為散點圖類似於符號圖,讀者習慣於看到根據資料上色的點。

儘管如此,我們還是花了幾秒鐘才能理解《經濟學人》的這張圖表。但右上角的散點圖就容易理解多了,因為它是雙重編碼的:政治意識形態透過位置(左右)和明暗雙重顯示。

如果沒有右上角和下方柱狀圖,要迅速理解左上角的散點圖是很困難的。

到目前為止,我們已經學習了樹形圖、柱狀圖和散點圖,下面還有折線圖的例子:

別找了,最全資料視覺化配色指南在這

在這兩個折線圖中,明暗變化都用於在第一個日期對摺線順序進行雙重編碼。但是右邊的圖表中,更容易看到這一點,因為在整個圖表中線條的順序是相同的,左側的圖表會使我們感到困惑。

3. 使用明暗變化區分子類別

還有更多的理由建議我們使用定量色階而不是定性色階來給定性數值上色。比如,區分子類別。以下是經濟學家的圖表展示:

別找了,最全資料視覺化配色指南在這

⌂ 圖表來自《經濟學人》,按宗教信仰分組的被佔領土人口

這張圖裡,一級分類有猶太人(藍色)和阿拉伯人(黃色),子分類是地區,以不同明度的藍色和黃色表示。

4. 使用色調來區分強調和弱化的區域

顏色分類不必具有相同的重要性,如果你想突出顯示一個類別,可以用一種色調(通常是灰色)的陰影為所有其他類別著色:

別找了,最全資料視覺化配色指南在這

這張圖表基本上把類別(已婚、單身、離婚、喪偶)分成了子類別,又透過不同色調明暗把它們分成更大的類別。正如我們剛才看到的,子類別內的陰影不會迷惑讀者——所以這個圖表也不會。

5. 用陰影使分類顏色減少,便於色盲人群閱讀

在資料視覺化行業中有一條準則——從業者要讓他們的視覺化資料對於視力受損的讀者也可以理解。

這條準則的意思是顏色應該具有不同的亮度級別,以便在將它們轉換為灰度時可以輕鬆區分。

別找了,最全資料視覺化配色指南在這

此外,

僅使用一種色調,你的老闆(或讀者)就不會抱怨它看起來“太五顏六色”了。

如果你正在做一個嚴肅的話題的視覺化,那麼這種單色調方式可能會排在你優先順序列表的首位。

更容易理解和專業的表達,會說服你在分類時相比於選擇不同色相更有可能選擇同一色相,只是透過明暗色調來區別。英國的《金融時報》就是這樣做:

別找了,最全資料視覺化配色指南在這

但當嘗試這麼做的時候還有一些要點要牢記。

首先,要做好一些讀者會為你的著色進行“合理化”解釋的準備。

即使這並不是你的本意,他們還是可能搜尋一些使用漸變的緣由。如“美國用一種更暗的色調展示是因為它有更高的值”或是“因為這對故事來說更重要。”因此,不要隨意地著色。

其次,根據經驗,編碼條目時使用的漸變越多,閱讀就越困難。

辨認2-3個相同顏色的明暗漸變還是較為可行的。但如果是4、5、6個不同的漸變讀者就會放棄,尤其是如果它們是無序的、沒有被直接標記、或只使用一個色相(淺藍到深藍)而不是多個色相(淺黃到深藍)的情況下,(讀者會更容易放棄)。

別找了,最全資料視覺化配色指南在這

第三,如果你確實想使用漸變,如果在引入第二種顏色沒有意義的情況下,請保持一種顏色的漸變。

有一個示例。為了避免使用一個顏色的太多漸變,《金融時報》有時會展示多個顏色的漸變。

別找了,最全資料視覺化配色指南在這

這樣的效果並不好。“非洲/中東”和“其他”是不是屬於藍色區域(歐洲、亞太、美國)之外的另一個類別?這份圖表的作者或許並沒有想讓讀者這樣理解這份圖表,但讀者的確會有這樣的猜測。

三、何時一個色系?何時兩個色系?

如果你決定應使用定量色階而不是分類色階的話,還有兩個問題要討論。第一個問題,你應該使用順序色階還是發散色階?

1.如果有一個有意義的中間節點,就使用兩端發散的明暗色階

別找了,最全資料視覺化配色指南在這

如果中間值有意義,請使用多種顏色。那可能是:

零,例如正負經濟增長

50%,例如兩個選擇之間的投票

平均年齡或中位數,例如,年齡中位數以下

商定的閾值,例如低於或高於貧困線的收入水平

目標,例如收入高於和低於季度目標

這聽起來很容易,但是,很多時候中間值是什麼並不清楚,或者根本沒有中間值。舉個例子:

別找了,最全資料視覺化配色指南在這

⌂ 日常活動中歌曲的動機品質,圖表來自 PepMusic

這個專案的開發者決定不用配色對這些活動進行編碼,而是用耗盡的程度來分類,並採用定量色階:

別找了,最全資料視覺化配色指南在這

然後,他們決定其他們的色階是發散的,這意味著色階有一箇中間點:“正常/平均”程度的疲憊型別(辦公室、早餐、晚餐)。他們也可以不設中間值——睡眠是零疲勞,跑步是非常疲勞,這樣的話他們的變化應該是從亮到暗。

別找了,最全資料視覺化配色指南在這

注意,

使用發散色階主要有兩個優點:第一,強調極端情況;第二,使讀者看到更多的資料差異。

2. 使用發散色階可以強調極端值

如果你的故事強調一個最大值,就選擇連續色階;如果你的故事同時關注最低和最高值,就選擇發散色階。

設想你寫了一篇關於網際網路的主要構成是歐洲、美國、日本、澳大利亞和其他西方國家,並且這些國家和地區從中受益頗多的故事。為了說明你的觀點,下面這幅用連續色階製作的地圖很適合作為插圖。它強調了數值最高的國家:

別找了,最全資料視覺化配色指南在這

但如果你的故事是關於在非洲和亞洲只有少數人使用網際網路,你或許就想用一個發散色階來展示你的資料:

別找了,最全資料視覺化配色指南在這

3. 使用發散的明暗,讓讀者看到資料中的更多差異

和連續色階相比,使用發散的明暗變化會讓你看到資料中更多的差異。這是因為你表現出一個梯度的數量範圍是連續漸變的數量範圍的一半。

你可以在上面的地圖上看到, 淺藍色漸變在順序色階地圖中佔0至100%,但在發散色階地圖圖中僅佔50%至100%。10%或20%點的差異在發散色階地圖中變得更加明顯。

將俄羅斯和土耳其比較一下,按照連續色階,儘管它們之間相差16%,但土耳其在地圖上看起來只比俄羅斯略淺一點點。

別找了,最全資料視覺化配色指南在這

在發散色階的地圖中,差異會更加明顯——俄羅斯仍然是類似的藍色,但土耳其看上去顏色更淺,更接近米色,這表明它更接近中間點。

別找了,最全資料視覺化配色指南在這

四、何時分類?何時不分類?

要使用定量色階,除了要注意是用順序色階還是發散色階,你需要考慮是否要把資料分級(即歸類,也稱分類、階梯化、量化、分等級、統計或使其離散),還是不分級(即讓其保持未歸類的,也稱連續的)。

別找了,最全資料視覺化配色指南在這

1.如果資料已分類,請使用分類的色階

首先,如果你的資料是非連續的,請不要使用連續的色階。這意味著,當可視化有天然排序的資料時,例如李克特量表、服裝尺寸、官銜等,請使用分類的色階。

未分類的色階會讓人誤認為兩個相鄰選項之間還有別的選項,但其實並沒有。

別找了,最全資料視覺化配色指南在這

2.如果想要表達統計範圍,就使用分級色階

使用分類的色階會比未分類的色階更容易表明觀點。你可以將具有相同顏色的數值和區域進行分組,以便讀者可以快速瞭解你想表達的觀點。

製圖師邁克爾·多布森(Michael Dobson)在1980年代大力倡導分類地圖。他稱它是“更簡單、更高效的通訊裝置”。分類地圖肯定會更簡單,因為簡化是分類地圖的核心。但這是否也會更有效?這取決於你要傳達的內容。

別找了,最全資料視覺化配色指南在這

如果您想傳達非常有限的資訊,分類地圖是一個不錯的選擇。製圖師麥凱瑟琳(Mr。 庫爾森(Coulson)在1991年指出,只要地圖具有統計目標,例如顯示:

“中等家庭收入排最後百分之十的縣域”

“癌症死亡率高於平均水平兩個標準差以上的區域”

如果某個縣的失業率高於全國平均水平(如上圖所示)

分類是實現這一目標的方法。“分類系統定義了自己,相比地圖的整體模式,重點是哪些資料單元屬於特定的預定義類別。” 如果你希望讀者檢視某些區域是否在統計範圍內,請使用分類色階。

但是一旦你想展示一種普遍現象 ,如“溫度在南部比北部高”或“我們的收入是今年高於去年”,未分類地圖可能是更好的選擇。

這是同一張失業地圖,其色階有所不同:

別找了,最全資料視覺化配色指南在這

相比上一張,這張地圖讓人們更難看清各個縣屬於哪個統計範圍——即它們的失業率低於或高於全國失業率。

3.用未分類色階呈現細微差別的檢視

正如上面的兩張地圖所清楚顯示的,與未分類的地圖相比,分類的地圖顯示的細微差別要小。

未分類的地圖會提供更真實、更細緻的失業率檢視。朱迪思·泰納(Judith A。 Tyner)在她的《地圖設計原理》中寫道:“未分類的等值線圖可以最精確地表示資料模型。”

展示資料的複雜性本身就是一個崇高的目標。

如果展示覆雜性在你的優先順序中名列前茅,請使用未分類的地圖。

但是分類地圖也可以或多或少地產生細微差別。你顯示的類別越多,地圖就變得越細緻入微。僅顯示兩個類別的失業率地圖是個極端的例子。這裡我們提供了一份有六個檔次的地圖,3個高於全國平均水平的檔次和3個低於全國平均水平的檔次。

別找了,最全資料視覺化配色指南在這

與只有兩個分類的地圖相比,此地圖顯示的差別更加細微–但與未分類地圖相比還是略遜一籌。

4.如果你懶得向讀者解釋,請使用未分類色階

未分類的圖中能體現出的那些你觀察到的細微差別可以讓讀者看到一些對僅僅對他們很重要的資訊。

比如,未分類圖能讓讀者更容易看到:

…邊界區域。在分類地圖中,通常將它們與數值稍高或稍低的區域放在一起。

…不同類別之間的過渡是平穩的還是突兀的。

…作為讀者我感興趣的地區的數值與相鄰地區相比到底是更高還是更低。

舉個例子,讓我們放大南達科他州-下圖正中央的地區。南達科他州的失業率比周圍大多數州都更接近全國平均水平(所以它的藍色更淺)。在未分檔的地圖上,我們可以看到,那些與其他州接壤的南達科他州縣的失業率都要高於接壤的外州的區縣。

別找了,最全資料視覺化配色指南在這

別找了,最全資料視覺化配色指南在這

⌂ 上圖:資料分六個等級的地圖,下圖:未分級的地圖

在分檔地圖中,這些細微的差異是不可見的。讀者無法知道南達科他州的標為深藍色的縣的失業率是否比周圍其他州標為深藍色的縣更高還是更低。

5.如果如果想讓讀者讀取數值,請使用分類色階

分檔地圖使讀者雖然只能讓讀者讀取一個範圍(例如6%和7%之間),但是卻可以幫助他們更好的領會這份資料。我們在幾小節前已經提到過的麥格和庫爾森(Mak and Coulson)在1991年的一項研究中得出結論:“分級地圖在估計數值的測試中比未分級地圖在統計結果上有著非常顯著的優勢。”

讓我們再次看看南達科他州:

別找了,最全資料視覺化配色指南在這

別找了,最全資料視覺化配色指南在這

⌂ 上圖:資料分六個等級的地圖,下圖:未分級的地圖

在上面的分檔地圖中,你可以確保正確閱讀某一區域的值處在哪個範圍-而在未分檔的地圖上,你只能對值域有“合理的猜測”。你的猜測可能在很小的區間裡(“接近6%”,而不是“介於5%和6。9%之間”),但他們仍只是猜測。

當然,數值的可讀性也取決於到底有多少類:你定義的類別越多,讀者讀出正確數值的可能性就越小。

因此

,如果你希望讀者讀出特定的數值範圍,請選擇僅包含幾個類的分類地圖。

這在你展示靜態地圖(例如在列印或 PDF報表中)這種人們沒有辦法透過工具或者滑鼠懸停獲得補充資訊的時候尤為重要。

編譯略有刪改,原文連結:

https://

blog。datawrapper。de/whi

ch-color-scale-to-use-in-data-vis/https://blog。datawrapper。de/quantitative-vs-qualitative-color-scales/https://blog。datawrapper。de/diverging-vs-sequential-color-scales/https://blog。datawrapper。de/classed-vs-unclassed-color-scales/

關於億信華辰

億信華辰是中國專業的智慧資料產品與服務提供商,一直致力於為政企使用者提供從資料採集、儲存、治理、分析到智慧應用的智慧資料全生命週期管理方案,幫助企業實現資料驅動、資料智慧,已積累了8000多家使用者的服務和客戶成功經驗,為客戶提供資料分析平臺、資料治理系統搭建等專業的產品諮詢、實施和技術支援服務。

別找了,最全資料視覺化配色指南在這

歡迎關注公眾號:億信華辰Pro

-讓資料驅動進步-