可視化設(shè)計的精髓之——數(shù)值可視化(上)
本文作者將數(shù)據(jù)與視覺圖形的復(fù)雜關(guān)系梳理清楚,與大家分享可視化設(shè)計的精髓——數(shù)值可視化。
可視化設(shè)計一直是交互和視覺設(shè)計領(lǐng)域里的熱門話題。
可視化設(shè)計從來沒有人梳理清楚數(shù)據(jù)與視覺元素之間的關(guān)系,網(wǎng)上有非常多創(chuàng)意的可視化案例,但往往都只是一些零散的創(chuàng)意點,并不能系統(tǒng)幫助設(shè)計人員做數(shù)據(jù)可視化。
作為對數(shù)據(jù)有著非常深厚的興趣,同時有有著多年交互經(jīng)驗的我來說,自然對數(shù)據(jù)可視化非常感興趣。通過平時的積累,再加上最近一次和部門同事會議討論數(shù)據(jù)可視化獲得的靈感,終于將數(shù)據(jù)與視覺圖形的復(fù)雜關(guān)系梳理清楚。
第一章:數(shù)值可視化的本質(zhì)
第一部分,我們先熱身,從視覺屬性的角度看數(shù)值可視化的本質(zhì)。數(shù)值可視化的本質(zhì)就是用各種視覺屬性來表達數(shù)據(jù)值的大小。視覺屬性有這么幾類:位置、長短、面積、顏色。對應(yīng)視覺設(shè)計的點,線、面和色值。
在此部分,我們介紹各種類圖表時,只介紹最基礎(chǔ)的圖標。其他的很多種形態(tài)各異的圖表都可以圍繞基礎(chǔ)的圖片進行變化,我們將在后面的章節(jié)展開介紹。
1. 通過節(jié)點的位置來表示數(shù)據(jù)值——折線圖
折線圖是數(shù)據(jù)可視化中最常見的圖形之一,折線圖雖然是線圖,但是它的線只是作為點的輔助鏈接,線的長度并不表達實際的信息。真正表達數(shù)據(jù)的是點的相對位置。點里橫坐標越遠時,表示相對值越大。
2. 通過元素的長短來表示數(shù)據(jù)值:柱狀圖
柱狀圖的柱子雖然有寬度,但是寬度并不代表真正的信息,柱狀圖是通過長度來表達數(shù)值的。柱狀圖相比折線圖,更強調(diào)單個數(shù)值的大小,而折線圖更強調(diào)數(shù)值的變化趨勢。
在傳統(tǒng)的圖表分類中,有幾種類似的圖表,都是用長度來表示數(shù)值的:柱狀圖、條形圖、直方圖。在本書中,為了方便大家的理解,我們將柱狀圖當成基本圖形,而將條形圖和直方圖當成是柱狀圖的變式。我們將在后面的章節(jié)詳細介紹柱狀圖及其變式。
3. 通過元素的相對面積來表示數(shù)據(jù)值:餅圖、氣泡圖、面積圖
餅圖是通過在一個圓里面所占面積的大小來表示數(shù)值的,環(huán)形圖是餅圖的變式,它可以在圖的中心表達主題。
氣泡圖也是通過氣泡的大小來表達數(shù)據(jù)值的。
面積圖實際上是折線圖的一種變式。與折線圖不同的是,面積圖是通過折線直線圍成的面積來表示數(shù)值大小的,所以面積圖更強調(diào)的絕對值大小,面積圖的縱軸起點需要為零。
4. 通過顏色來表示數(shù)據(jù)值:熱力圖
熱力圖時通過顏色來表達數(shù)值的。一般來說,熱力圖可以通過兩種顏色的維度來表達數(shù)值:
- 一是顏色的深淺,顏色越深,數(shù)值越大;
- 二是色值的冷暖,顏色越冷,數(shù)值越小,顏色越熱,數(shù)值越大。
通過以上第一部分內(nèi)容的熱身,了解到數(shù)值可是化的本質(zhì)就是通過位置、長短、面積、顏色來表達數(shù)值的大小,所有的數(shù)值可視化都是在這個框架下進行的。
在有的書中, 還講到了角度、斜率、體積、密度、紋理等等元素。本文并不打算介紹太復(fù)雜的分法,太多的元素沒有抓住視覺設(shè)計的本質(zhì),不容易理解。
我們認為從視覺平面設(shè)計的四個基本元素觸發(fā)就可以了,其他的都可以理解為在此基礎(chǔ)之上的延伸。比如說:角度和斜率,最終都與長度或面積有關(guān);體積在平面上與面積是相通的;紋理可以算作顏色的一種;點的密度實際上與點的位置有關(guān)。
從下章開始,我們根據(jù)數(shù)據(jù)結(jié)構(gòu)來看數(shù)據(jù)可視化。在做數(shù)據(jù)可視化之前必須要弄清楚數(shù)據(jù)結(jié)構(gòu),如果不能從數(shù)據(jù)結(jié)構(gòu)出發(fā)來考慮數(shù)據(jù)的可視化,那么你永遠只能“只見樹木,不見森林”。
我們在遇到一個可視化的問題時,需要有數(shù)據(jù)的思維,將你需要可視化的問題抽象成數(shù)據(jù)表格,那么數(shù)據(jù)可視化的問題將不再是一些離散的問題,你的思路也會變得清晰。根據(jù)數(shù)據(jù)結(jié)構(gòu),我們將數(shù)據(jù)的類型分為:單個數(shù)據(jù),一維表格,二維表格。
第二章:單個數(shù)據(jù)的可視化
單個數(shù)值數(shù)據(jù),如速度15km/h,深度10km等,從數(shù)據(jù)的角度上來說是最簡單的,其僅有一個數(shù)值,一眼就能看明白,如果用傳統(tǒng)柱狀圖等圖表表示和直接顯示數(shù)字沒什么太大區(qū)別。
所以,一般單個數(shù)據(jù)的可視化,并不適用傳統(tǒng)圖表方式,其可視化的核心思想在于根據(jù)上下文用擬物的方式,將其與我們現(xiàn)世界中數(shù)值的事物聯(lián)系在一起。
單個數(shù)據(jù)的可視化需要區(qū)分清楚兩種情況:
- 用戶對數(shù)字本身是有所理解的。高度、深度、速度等等,這種情況下,對數(shù)據(jù)進行可視化的是一種感覺,將這個數(shù)字更形象地傳遞給用戶。
- 用戶對數(shù)字本身缺乏背景信息。比如說:空氣質(zhì)量降、水量等等,用戶從他們實際的生活經(jīng)驗中可能無法判斷某個具體的數(shù)值代表什么樣的含義。這種情況下,我們需要可視化的是這種數(shù)據(jù)的背景信息。
1. 僅將數(shù)字形象化
如果是奔跑的速度15km/h,那么可以畫一個運動員跑步的圖來表達這個數(shù)字。
如果是奔跑的速度70km/h,那么就可以畫一只獵豹奔跑,通過模糊的背景來表達奔跑的速度快。如果要描述山的高度5km,就可以畫以座聳入云霄的山,給人一種高山的直觀形象,更多的創(chuàng)意設(shè)計都可以圍繞想象展開。
2. 對數(shù)字進行評價
如果僅僅表達一個數(shù)字是不完整的,那么需要對數(shù)字進行標刻、評價以幫助理解,比如:汽車行駛的速度,分為慢速、中等和超速,如下左圖所示。
同樣的道理,當報告單個降水量數(shù)據(jù)時,人們對于降水量數(shù)據(jù)是缺乏背景信息,不知道50毫米的降水量到底是多還是少,必須輔助以評價信息。在表達評價信息時,你需要根據(jù)背景展開聯(lián)想。比如說:降水量50毫米,我們可能想象到的就是用一個試管接了50毫米深的水。
如右圖所示:
所有的對單個數(shù)據(jù)進行評價的可視化,都可以采用這種方式:先通過擬物的方式畫出評價刻度,然后標明(或指向)當前的數(shù)字值。
第三章:一維表格數(shù)據(jù)可視化
一維表格如下圖所示,數(shù)據(jù)表格中只有一行或者一列數(shù)據(jù)。
一般來說,我們?nèi)绻獙⒁唤M一維表格可視化,那么需要在拿到數(shù)據(jù)后,我們需要對數(shù)據(jù)可視化的目標進行分析,跟進目標可將數(shù)據(jù)分為以下幾類:
- 強調(diào)絕對數(shù)值的數(shù)據(jù);
- 強調(diào)趨勢的數(shù)據(jù);
- 百分比數(shù)據(jù);
- 不同類型的數(shù)據(jù)。
3.1 強調(diào)絕對數(shù)值的數(shù)據(jù)
在現(xiàn)實世界中,很多的數(shù)據(jù)是有倍數(shù)關(guān)系的,數(shù)字的大小就代表了絕對值的大小。比如:收入10000元的就是收入5000元的2倍,GDP一萬億就是五千億的兩倍,這種數(shù)據(jù)稱之為等比數(shù)據(jù)。等比數(shù)據(jù)的絕對值大小是有意義的,當你需要強調(diào)這種數(shù)據(jù)絕對值大小的時候,應(yīng)該用真實的長度,或者面積來表示數(shù)值。
3.1.1 柱狀圖
使用柱狀態(tài)圖來表示這種強調(diào)絕對值大小的數(shù)據(jù)是常規(guī)的方式。柱狀圖的起點從0開始,柱子的長度代表數(shù)據(jù)的大小。如果一個柱子的長度是另一個的兩倍,那么數(shù)值也是另一個的兩倍,非常直觀。
如下圖所示,各行業(yè)平均薪資水平,是適合用柱形圖來表示的。
需要強調(diào)的是,因為柱狀圖的視覺感受就非常強調(diào)單個數(shù)據(jù)的大小,柱狀圖的閱讀者一般視覺會被柱子本身所吸引,不會去注意縱軸的起點,用戶往往會默認柱子的長度代表絕對數(shù)值的大小。所以柱狀圖的縱軸的起點必須從零開始,所有不從零開始的柱狀圖都是對柱狀圖的誤用,甚至有廣告故意使用不從零開始的柱形圖對閱讀者進行誤導(dǎo)性宣傳。
如下左圖所示,實際的使用效果可能不到10%,但是右圖則看起來像是效果翻倍了。如果用戶不仔細看,就會形成效果翻倍的印象。
3.1.2 直方圖?
直方圖與柱狀圖的區(qū)別比較微妙,很多人弄不清楚其中的區(qū)別,誤用和混用的情況非常常見。在視覺外觀上,柱狀圖和直方圖的區(qū)別僅僅是間隙的大小,但是其數(shù)據(jù)本質(zhì)的區(qū)別在于表達連續(xù)的區(qū)間上數(shù)量的分布。
看如下一組數(shù)據(jù):
分別使用柱狀圖和直方圖來表達以上表格:
從圖中可以看出,柱狀圖(上)與直方圖(下)是不同的。如果橫軸是連續(xù)的區(qū)間,那么直方圖更加適合表達一種連續(xù)區(qū)間的數(shù)量分布。
統(tǒng)計學中,直方圖的縱軸要求是計數(shù)數(shù)據(jù),也就是說,直方圖是用于統(tǒng)計某個區(qū)間內(nèi)的對象個數(shù)。
直方圖一般在統(tǒng)計學,數(shù)據(jù)分析和科學實驗領(lǐng)域用的比較多。本書并不是講述統(tǒng)計學的書,我們不去深入探討直方圖。只需要記住當滿足一下兩個條件時,應(yīng)該使用直方圖:
- 橫坐標是連續(xù)的數(shù)字區(qū)間;
- 縱坐標是計數(shù)數(shù)據(jù),統(tǒng)計的是個數(shù)。
以上兩個條件,有一個不滿足時,就不應(yīng)該使用直方圖,而是普通的柱狀圖。
比如說有如下數(shù)據(jù):
上圖中,使用直方圖就是錯誤的,因為縱坐標并不是計數(shù)數(shù)據(jù),使用柱狀圖是正確的。當然,如果想要強調(diào)薪資隨年齡的變化趨勢,還可以使用折線圖,我們將在后面解釋折線圖。
3.1.3 柱狀圖變式:條形圖
我們經(jīng)常能看到一些橫向排版的柱狀圖,我們稱之為條形圖。條形圖的基本功能與柱狀圖是相同的,但是條形圖與柱狀圖最大的區(qū)別在于排版。在英文的排版中,因為文案長度的問題,有的文案很長,所以一般會采用橫向的條形圖。
如圖所示:
條形圖還有一個很大的排版優(yōu)勢,能將文字和條形在一側(cè)顯示,能夠?qū)Ψ诸惛郊诱f明。
因為中文的文案長度都很好控制,所以在中文的圖表中,條形圖相對比較少見。且因為中國的基礎(chǔ)教育中,橫軸表示自變量,縱軸表示因變量數(shù)值,所以很多人都不習慣看條形圖。所以在中國,如果不是因為排版的原因,請慎用這種橫向的條形圖,而在拉丁語系的國家可以多用這種橫向條形圖。
3.1.4 柱狀圖變式:計數(shù)條形圖
計數(shù)條形圖一般是在線下用得比較多,在平面設(shè)計或互聯(lián)網(wǎng)界面中,計數(shù)條形圖可以模擬線下的場景,增加界面設(shè)計的趣味性。
計數(shù)條形圖示例如下:
3.1.5 柱狀圖變式:徑向柱狀圖、徑向條形圖、螺旋圖
某些情況下,為了適應(yīng)排版的區(qū)域,或者增加圖形的趣味性,會對柱形圖進行扭曲變形。
對柱狀圖的橫軸進行扭曲變形,就是徑向柱狀圖,如下圖所示。徑向柱狀圖最大的優(yōu)點就是能在某些區(qū)域內(nèi)能方便排版,第二個優(yōu)點是能將按順序排列的柱狀圖首尾進行對比。
將條形圖的柱子進行扭曲,就是徑向條形圖。與徑向柱狀圖類似,徑向條形圖的最大優(yōu)點仍然是排版。在很多海報或者雜志中,采用這兩種變式,可以是的整個界面更加美觀協(xié)調(diào)。
但是,因為徑向條形圖的圓的內(nèi)環(huán)和外環(huán)之間周長和直徑都不相等,所以不同的人對圖的理解可能有所偏差。徑向條形圖實際上是通過角度,而不是長度來表示數(shù)據(jù)大小的,這一點很可能會對用戶造成混淆。一般情況下需要慎用。
螺旋圖是在徑向柱狀圖的基礎(chǔ)上進一步拓展的,螺旋圖可以用戶表達一個大型的數(shù)據(jù)集合,其適應(yīng)排版的優(yōu)勢更加明顯。并且可以將其立體化設(shè)計,做出一些非常有創(chuàng)意的可視化設(shè)計圖。
徑向柱狀圖、徑向條形圖、螺旋圖幾類柱狀圖的變式,都在某種程度上賦予了柱狀圖新視覺風格和趣味性。但是又部分損失了柱狀圖最大的優(yōu)勢:強調(diào)絕對數(shù)值的大小,這幾種變式都使得柱狀圖柱子的長度不那么容易對比。
3.1.6 柱形圖變式:用擬物代替柱子
傳統(tǒng)的柱狀圖表達數(shù)據(jù)可能會比較枯燥,在平面設(shè)計,海報宣傳頁面中,一般會添加擬物的元素,使得數(shù)據(jù)的表達更加生動。其基本的思路都是圍繞著數(shù)據(jù)主體展開聯(lián)想,用擬物的對象代替柱子。
示例1:如果描述的是足球相關(guān)的內(nèi)容,那么可以用踢球的形象代替柱子。
示例2:如果描述的是星體相關(guān)的內(nèi)容,那么可以用星體的形象代替柱子。
示例3:如果描述的是男女差異,那么可以用男女的形象代替柱子。
示例4:如果是抽煙相關(guān)的數(shù)據(jù),正好用煙頭的形狀代替柱子。
示例5:如果是山的高度,那么可以用山的形態(tài)。
3.1.7 柱形圖變式:按某些維度展開重組設(shè)計
上一節(jié)中,用擬物代替柱子的思路仍然是在柱狀圖的框架下的。但是很多時候,甚至可以拋開柱狀圖的束縛,根據(jù)關(guān)鍵詞展開聯(lián)想。在聯(lián)想的過程中,我們只需要記住第一章中提到的數(shù)據(jù)可視化的本質(zhì):通過位置、長短、大小、顏色四個視覺元素來表示數(shù)據(jù)大小。
示例1:各省葡萄產(chǎn)量(假設(shè)數(shù)據(jù))
這里面有兩個可以展開的點:葡萄和地點。
示例2:城市和省份PM2.5值(假設(shè)數(shù)據(jù))
PM2.5是一個沒有形象的概念,所以可視化的時候,不太可能在PM2.5上面展開。那么這種數(shù)據(jù)只能以地點為關(guān)鍵詞展開,以地圖的方式呈現(xiàn)。
省份在地圖上本身就是一個形狀大小固定的面,可以通過顏色熱力圖來表示數(shù)值(下圖,左)。而城市在全國地圖上只是一個點,不能通過顏色熱力圖來表示,只能創(chuàng)造一個面,在通過面的大小和顏色來表示(下圖,右)。
示例3:各網(wǎng)站訪問量
圖中實際上是造了一張地圖,每個網(wǎng)站相當于地圖上的一個城市,再用一個面的大小代表訪問量,與上一個示例中的右圖本質(zhì)上是一樣的。
示例4:遷徙地圖
網(wǎng)上一些非??犰诺倪w徙地圖,單個城市的遷徙圖的數(shù)據(jù)原型仍然是一維數(shù)組。
對于這組數(shù)據(jù),可以以“地圖”為依據(jù)展開。以地圖為維度展開設(shè)計時,需要表達的是各個城市與北京的連線。連線的長短信息已經(jīng)被城市到北京的距離所用,于是只能用連線的顏色來表示數(shù)值。
需要補充說明的是,這些形式的數(shù)據(jù)可視化提高了數(shù)據(jù)的可讀性和趣味性,但都會在某種程度上損失原來表格中的精度信息。
3.2 強調(diào)趨勢的數(shù)據(jù)
多數(shù)情況下,我們做可視化的目的是為了將數(shù)值的大小表示出來,但是在有的情況下,可視化的目的是為了突出隨時間變化的趨勢。時間是所有數(shù)據(jù)變量里面最具有特殊性的一種,也是最重要的一種。時間變量的形式除了有年,月,日,小時,分,秒等等之外,還有變化形式,如年齡 {1歲,2歲,...} ,年級?{一年級,二年級,…} ,次數(shù) {第1次,第2次,...} 等等。
柱狀圖中,強調(diào)數(shù)據(jù)的絕對數(shù)值,并且將所有的對象變量都一視同仁地處理。當然,柱狀圖也是可以表達時間趨勢的,但是很多情況下折線圖更好。
3.2.1 折線圖
我們來看一下折線圖與柱狀圖的區(qū)別。
第一,折線圖與柱狀圖的視覺強調(diào)不同。對于柱狀圖來說,每根柱子是一個獨立的視覺元素。而折線圖中,一整條線是一個獨立的元素。所以他們側(cè)重點自然有所不同。柱狀圖側(cè)重單個數(shù)據(jù)的大小,而折線圖側(cè)重數(shù)據(jù)的變化趨勢。
第二,柱狀圖的起點必須為零,折線圖的起點可以不為零。為了說明這個道理,需要看一個示例。
如下圖所示,起點為1000的圖表。兩個圖形雖然都表示了趨勢變化,但是左側(cè)的柱形圖柱子的長短很容易讓人去對比它的絕對值,很容易讓人覺得11-2的數(shù)據(jù)是11-5的兩倍,在很多情況下,這會造成嚴重的誤導(dǎo)。但是右側(cè)的折線圖不會給人這樣的問題,折線圖給人的感覺,并不會讓人對比倍數(shù)關(guān)系,而是看趨勢的變化。?
所以對于變化的趨勢相比數(shù)值較小,但又需要強調(diào)趨勢,弱化絕對值的數(shù)據(jù),只能使用折線圖,或折線圖的變式。
3.2.2 折線圖的變式:曲線圖
將數(shù)據(jù)點用貝塞爾曲線連接起來,其功能與折線圖基本上沒有差別,只是在視覺樣式上更加柔和。
3.2.3 折線圖的變式:均線圖
對于數(shù)據(jù)波動較大的情況,如果想要了解它的趨勢,最好的辦法是輔助以均線。均線是計算當前節(jié)點上前后幾天的平均值,均線的波動比原數(shù)據(jù)波動更小,能更好的反應(yīng)趨勢。
均線有很多種不同的算法,我們在此不詳細介紹。需要注意區(qū)分的是,數(shù)據(jù)波動較大的數(shù)據(jù)并不是散點圖。散點圖與折線圖的數(shù)據(jù)邏輯是完全不同的,?我們將在后面介紹散點圖。
3.2.4 折線圖的變式:面積圖
面積圖主要用途也是用來表示趨勢的變化的,但是面積圖會用純色或者漸變色來填充折線圖的區(qū)域。一旦有了顏色的填充,視覺感受就完全不同了,能讓人感受到絕對值的大小。所以面積圖的起點必須為零。所以與柱狀圖有同樣的問題,當趨勢變化很小,但絕對值很大的數(shù)據(jù),只適合用傳統(tǒng)的折線圖,不適合用面積圖。
3.2.5 折線圖的變式:股指走勢圖
股指走勢圖對折線圖做了幾點變化:
- 當點間距很小的時候,根據(jù)格式塔原理,人的視覺就會自動將其連成線,于是折線圖的連接線就可以去掉了。
- 對每個節(jié)點可以大做文章。紅色表示收盤高于開盤,綠色反之。還能表示當天最高值和最低值。
3.3 百分比數(shù)據(jù)
百分比數(shù)據(jù)往往不是原始數(shù)據(jù),而是原始數(shù)據(jù)進過轉(zhuǎn)化而來的。本節(jié)討論的百分比數(shù)據(jù),都是指的在同一個維度下,且沒有重合的數(shù)據(jù)。表中的數(shù)據(jù)加起來,應(yīng)當?shù)扔?00%。
3.3.1 餅圖或環(huán)形圖
一般來說,百分比的數(shù)據(jù)使用餅圖(或環(huán)形圖)的方式表達,這是最常規(guī)的。
環(huán)形圖與餅圖不同點在于環(huán)形圖可以將主題與圖更好地融合。
但是餅圖只是一種保守的表達方式,并沒有什么趣味性。在實際的可視化設(shè)計中,往往會采用其變式。變式應(yīng)該如何變,還是需要根據(jù)上下文的環(huán)境展開聯(lián)想。
3.3.2 餅圖變式:將餅形轉(zhuǎn)化成對象擬物形態(tài)。
示例一:如果是描述人體的成分,那么可視化可以圍繞人形展開,將餅的形狀變成人的形狀。
再比如,如果你想描述一個蘋果的成分占比,那么你可以考慮將餅形換成蘋果的樣式,然后在這基礎(chǔ)之上做設(shè)計。
示例二:如果你想描述各類行業(yè)人群占比,那么你可以考慮畫出100個人,各類行業(yè)的人用不用樣式的圖形,如左下圖所示;而當你想描述各類槍殺案件槍支的來源,下右圖所示。
總之,這些設(shè)計的思路都是以基本的餅圖為出發(fā)點,然后根據(jù)描述的對象展開聯(lián)想,對象是什么樣子,就把餅圖更換成它的圖形,然后圍繞它的圖形做設(shè)計。
需要注意的是,有重合的數(shù)據(jù)不能使用這種方式在一張圖里表達,比如:一群人中女人48%,老年人30%。這兩個百分比數(shù)據(jù)是不能出現(xiàn)在一個圖里的。
3.4 同一對象不同類型數(shù)據(jù)
當你需要對一個人的運動能力進行多方面評估的時候,有以下一維數(shù)據(jù):
這組數(shù)據(jù)可視化的時候,也不能使用柱形圖,原因仍然是因為比例關(guān)系。速度90分,耐力60分,并不能說明速度是耐力的1.5倍。而如果畫成柱狀圖,就很容易讓人對比他們的絕對數(shù)值。
而使用折線圖,并不能說是完全錯誤的,但使用折線圖也不夠恰當。一般折線圖要求各個數(shù)據(jù)是同質(zhì)的,但是人在各方面的特質(zhì)其實并不是一類的數(shù)據(jù),每個數(shù)據(jù)都應(yīng)該擁有自己的縱軸。所以通過雷達圖的方式表達更合適。并且雷達圖相當于對每個數(shù)據(jù)做了一個背景評價。
關(guān)于一個一維表格上的各個數(shù)據(jù)是否是同質(zhì)的問題,一般來說可以這么判斷:有單位,并且相同單位的數(shù)據(jù)才是同質(zhì)的。單位不同的數(shù)據(jù)是不同質(zhì)的。沒有單位的數(shù)據(jù),一般來說都是不同質(zhì)的。還有一些人為定的得分的數(shù)據(jù),都是沒有單位的數(shù)據(jù)。比如各種類型的測試,只要是不同的測試,那么得分都是不同質(zhì)的數(shù)據(jù)。
另外, 雷達圖不僅僅可以用于不同同質(zhì)的數(shù)據(jù)。雷達圖有一個很大的優(yōu)點是能夠根據(jù)形態(tài)來判斷一個事物在各方面的綜合素質(zhì),所以有時候?qū)τ谕|(zhì)性的數(shù)據(jù)也會用雷達圖,每個雷達圖代表一個個體,雷達圖的形態(tài)對比個體的差異。
第四章:數(shù)據(jù)邏輯解析
如果你想對數(shù)據(jù)可視化有更深入的理解,本章的內(nèi)容對你非常有用。對于對邏輯不太感興趣的人來說,本章的內(nèi)容可能稍微有點難以理解。
在上一章中,對一維表格可視化進行了比較簡單的講述。但是,細心的讀者可能會發(fā)現(xiàn)有幾個問題:
- 直方圖和柱狀圖僅僅只是在形態(tài)方面的差異嗎?他們的內(nèi)在本質(zhì)到底有什么不同?
- 介紹雷達圖的時候,說了一組數(shù)據(jù)中還存在有不同質(zhì)的數(shù)據(jù),那么是否所有不同質(zhì)的數(shù)據(jù)都可以用雷達圖表示?
- 描述數(shù)據(jù),計數(shù)統(tǒng)計數(shù)據(jù),百分比數(shù)據(jù)都有什么不同,他們到底是怎么來的?
我們再次找出之前例子中的一維表格,這些看起來都是一維表格的數(shù)據(jù),到底邏輯上有什么區(qū)別呢?
4.1 表格的變化維度
表格中,第一個數(shù)據(jù)是“11月1日的股指收盤點數(shù)”,第二個數(shù)據(jù)是“11月2日的股指收盤點數(shù)”,以此類推。我們會發(fā)現(xiàn),整個表格其實就是“ {11月1日,11月2日,11月5日,…} 的股指收盤點數(shù)”。括號中的內(nèi)容在數(shù)據(jù)表格中是可以變化的,所以我們稱之為表格的變化維度,這個例子中表格的變化維度為“日期”。
我們再來看另一個表格:
這個表格可以概況為“ {互聯(lián)網(wǎng)行業(yè),金融業(yè),制造業(yè),…} 的平均薪資水平”,表格的變化維度為行業(yè)
以下這個表格可以概況為:“ {沈陽,南充,天津,…} 遷往北京的人口數(shù)量”。
以下這組數(shù)據(jù),可以概況為:“小李同學的?{技術(shù)得分,力量得分,速度得分,…} ”
把以上四組一維表格放到一起,我們來看看有什么特點:
- {11月1日,11月2日,11月5日,…} 的股指收盤點數(shù)
- {互聯(lián)網(wǎng)行業(yè),金融業(yè),制造業(yè),…} 的薪資水平
- {沈陽,南充,天津,…} 遷往北京的人口數(shù)量
- 小李同學的{技術(shù),力量,速度,…}
我們發(fā)現(xiàn):
- 每一句話中,都只有一個括號,代表一個表格的變化維度。只有一個變化維度的,就是第一章介紹的一維表格。
- 每句話中的“的”字被著重標出,在“的”字之前的變化維度,都統(tǒng)稱為“主體”,而在“的”字之后的,是需要可視化的指標,我們稱之為“指標”。那么,以上的所有數(shù)據(jù)表格,都可以描述為“主體”的“指標”。
- 前面三組數(shù)據(jù),括號都在“的”字前面,表格變化的維度是“主體”,而后一組數(shù)據(jù),維度是“指標”。
“指標”分為同質(zhì)和不同質(zhì)。比如南京市的 {出口額,投資額,進口額} ,這三個指標都是金額,他們是同一類的數(shù)據(jù),我們稱之為同質(zhì)的。但是有的指標,如身高,體重,他們單位都不相同,這種數(shù)據(jù)就是不同質(zhì)的。
還有一種數(shù)據(jù)是沒有單位的,或者是人造的得分,比如:技術(shù),力量等,這種數(shù)據(jù)之間,都是不同質(zhì)的。不同質(zhì)的數(shù)據(jù),我們不應(yīng)當用一個縱坐標軸來表示它,如果這幾個不同質(zhì)的數(shù)據(jù)還有可比性的話,那么,最合適的方式是使用雷達圖。如果這幾個不通質(zhì)數(shù)據(jù)沒有可比性的話,就應(yīng)該把他們拆解成獨立的數(shù)據(jù)來表示。
補充說明:到底什么樣的指標叫具有“可比性”的呢?
技術(shù)、力量、智商等等,是不同類的數(shù)據(jù)。這些數(shù)據(jù)都是分數(shù)越高越強 {好} ,他們都是單向的,所以他們是具有可比性的,可以出現(xiàn)在同一張雷達圖中。同樣的,如果幾個指標都是越低越強 {好} 的,那么他們也是具有可比性的。但是身高,體重,很明顯,數(shù)值既不是越大越好,也不是越小越好,所以身高和技術(shù),智商在一起就不是具有可比性的。
但是也有特例,我們經(jīng)常會看到對籃球運動員的綜合素質(zhì)評估的雷達圖里面就有身高,力量,技術(shù)等等。其實這里面也就隱含了一個假設(shè):在一定范圍內(nèi)籃球運動員的是越高越好,于是就和其他的指標一樣都成單向的了,所以在一起是可比性的數(shù)據(jù)。
所以當表格的變化維度是“指標”的時候,需要分為兩種情況:有可比性的和沒有可比性的。有可比性可以在一個雷達圖中可視化,如某人的?{技術(shù),力量,智商,顏值} ;而沒有可比性的則不能再一個雷達圖中,需要拆解成多個獨立數(shù)據(jù)單獨可視化。比如,某人的?{身高,體重,顏值,智商} 這組數(shù)據(jù)就不能在一個雷達圖中。
4.2 百分比數(shù)據(jù)
上一節(jié)中我們描述了變量的定義,并區(qū)分了幾種數(shù)據(jù)的類型。然而,我們會發(fā)現(xiàn)還有很多的數(shù)據(jù)類型并不是以上的那些數(shù)據(jù)類型。比如百分比數(shù)據(jù)。百分比數(shù)據(jù)并不是原始的數(shù)據(jù),一定是通過某種方法計算轉(zhuǎn)化過來的。
我們?nèi)匀豢蠢樱?/p>
- {11月1日,11月2日,11月5日,…} 的股指收盤點數(shù)
- {互聯(lián)網(wǎng)行業(yè),金融業(yè),制造業(yè),…} 的平均薪資
- {沈陽,南充,天津,…} 遷往北京的人口數(shù)量
- {一班,二班,三班,…} 的捐款金額
我們看看這幾組數(shù)據(jù)的“指標”分別是:股指點數(shù),薪資水平,人口數(shù)量,捐款金額。那么這幾種指標有什么不同呢?
最大的不同點在于是否可以累加,比如說:股指點數(shù),把每天的點數(shù)累加在一起沒有意義,所以股指點數(shù)是不可累加的;同樣平均薪資水平也是不可累加的。但是遷往北京的人口數(shù)量卻是可以累加的,累加起來就是遷往北京的人口總數(shù),這個數(shù)據(jù)是有意義的。同樣,捐款金額也是可以累加的指標,累加在一起等于捐款總額。
所以存在兩種類型的指標:可累加和不可累加。
對于可累加的數(shù)據(jù)是,我們可以將其轉(zhuǎn)換為另一種數(shù)據(jù)形式,那就是百分百數(shù)據(jù)。
我們只要用每個數(shù)字,除以這一組數(shù)字累加和,就能把這組數(shù)據(jù)轉(zhuǎn)換為百分百數(shù)據(jù)。
那么這組數(shù)據(jù)就可以表述為: {沈陽,南充,天津,…} 遷往北京的人口數(shù)量的百分比,于是這組數(shù)據(jù)就變成了百分比數(shù)據(jù)。同樣,捐款金額轉(zhuǎn)化為百分比數(shù)據(jù)后,就成了: {一班,二班,三班,…} 的捐款金額的百分比。這些百分百數(shù)據(jù),都可以使用餅圖及其變式來可視化。
對于不可累加的數(shù)據(jù),其內(nèi)在數(shù)據(jù)邏輯就決定了,這組數(shù)據(jù)不能直接轉(zhuǎn)化為百分百數(shù)據(jù)。
4.3 計數(shù)數(shù)據(jù),計數(shù)百分比數(shù)據(jù)
對于任何一組一維表格,都可以轉(zhuǎn)化為計數(shù)數(shù)據(jù)。根據(jù)指標的區(qū)間,來統(tǒng)計對象的數(shù)量。
我們可以看到, {11月1日,11月2日,11月5日,…} 的股指收盤點數(shù),點數(shù)這個指標,是一系列的數(shù)字,我們可以給這個數(shù)字劃分區(qū)間,然后計算落在每個區(qū)間的天數(shù)。比如說以上數(shù)據(jù)中,990點及以下的有1天,990-999的有2天,1000-1009的有2天,1010及以上的有1天
于是,就將以上描述數(shù)據(jù),轉(zhuǎn)化為了計數(shù)數(shù)據(jù),如下表所示:
以上一維表格可以表述為:收盤 {990點及以下,990-999,1000-1009,1010及以上} 的天數(shù)。
同樣的, {互聯(lián)網(wǎng)行業(yè),金融業(yè),制造業(yè),…} 的薪資水平這組一維表格,也可以轉(zhuǎn)化為計數(shù)數(shù)據(jù)。薪資水平8000及以上的有2個行業(yè),6000-7999的有2個行業(yè),6000以下的有2個行業(yè)
以上一維表格可以表述為:薪資水平 {6000以下,6000-7999,8000及以上} 的行業(yè)個數(shù)。
同理,其他的描述數(shù)據(jù),都可以轉(zhuǎn)化為這樣的計數(shù)數(shù)據(jù)。如:遷入北京人口 {10萬及以上,8-9.9萬,8萬以下} 的城市個數(shù)。
這樣,所有的一維表格,都可以根據(jù)值的區(qū)間劃分轉(zhuǎn)化為計數(shù)數(shù)據(jù)。對于以上的這些計數(shù)數(shù)據(jù),變量的值是一個連續(xù)的區(qū)間,那么這類數(shù)據(jù)適合用沒有間隙的直方圖來表示,而不是普通的柱狀圖。
計數(shù)數(shù)據(jù)是可累加的,可以轉(zhuǎn)換為按百分比計算的數(shù)據(jù)。
4.4 二維表格
二維表格是指的有兩個變化維度的表格。我們來看一個二維表格的例子:
上表的表達式為: {城市A,城市B,城市C} ?{1月,2月,…} 的GDP值。表達式中,有兩個括號,這兩個變量都在“的”字前面,都是“主體”。我們用字母代替對象,表達式可以抽象為: {A1,A2,…} ?{B1,B2,…} 的具體指標。再來看另一個二維表格:
上表的表達式為: {七歲,八歲,九歲,…} 男童的 {平均身高,平均體重} 。表格中,仍然是有兩個變化維度。表達式可以抽象為: {主體1,主體2,…} 的 {指標1,指標2,…}
所以,二維表格的基礎(chǔ)類型可以分為兩類:
- 第一類,表達式: {A1,A2,…} ?{B1,B2,…} 的單個指標。如 {城市A,城市B,城市C} ?{1月,2月,…} 的GDP值
- 第二類,表達式: {主體1,主體2,…} 的 {指標1,指標2,…} 。如 {七歲,八歲,九歲,…} 男童的 {身高,體重}
這兩類二維表格,在邏輯上有著較大的區(qū)別,需要分開介紹。
因篇幅原因,二維表格數(shù)據(jù)的可視化我們將在后面的文章中介紹。
本文由 @ArvinNing 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
很想看下一篇,本篇真是受益匪淺,想知道下一篇什么時候出來?方便加個微信不,多學習學習
寫得很好,什么時候出下集?
很棒
期待下一篇,什么時候出,你是如何學習數(shù)據(jù)可視化的
頁面點開是空白的。。。
他們產(chǎn)品有bug,坑死了我這篇文章,不然怎么也能上熱門文章的
為什么我刷不出來,通篇白板,無限和4G都是一樣的結(jié)果
APP有bug。我自己看到的也是白板,把我這篇文章坑了,好長一篇,花了很長時間啊。。。
很棒
好,很好的知識普及文章,對新手來說就是雪中送炭
期待(下)
您好,我是交互設(shè)計學堂(id:jhsjxt)公眾號的小編,您這邊文章太贊了,我想申請轉(zhuǎn)載,請問可以給我們授權(quán)嗎?謝謝。
可以,注明出處和作者
等待下一篇
非常不錯值得收藏
太贊了