可視化設(shè)計的精髓之——數(shù)值可視化(上)

16 評論 14263 瀏覽 121 收藏 46 分鐘

本文作者將數(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ū)分清楚兩種情況:

  1. 用戶對數(shù)字本身是有所理解的。高度、深度、速度等等,這種情況下,對數(shù)據(jù)進行可視化的是一種感覺,將這個數(shù)字更形象地傳遞給用戶。
  2. 用戶對數(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)該使用直方圖:

  1. 橫坐標是連續(xù)的數(shù)字區(qū)間;
  2. 縱坐標是計數(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):

  1. 每一句話中,都只有一個括號,代表一個表格的變化維度。只有一個變化維度的,就是第一章介紹的一維表格。
  2. 每句話中的“的”字被著重標出,在“的”字之前的變化維度,都統(tǒng)稱為“主體”,而在“的”字之后的,是需要可視化的指標,我們稱之為“指標”。那么,以上的所有數(shù)據(jù)表格,都可以描述為“主體”的“指標”。
  3. 前面三組數(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很想看下一篇,本篇真是受益匪淺,想知道下一篇什么時候出來?方便加個微信不,多學習學習

    來自美國 回復(fù)
  2. 寫得很好,什么時候出下集?

    來自江蘇 回復(fù)
  3. 很棒

    來自北京 回復(fù)
  4. 期待下一篇,什么時候出,你是如何學習數(shù)據(jù)可視化的

    來自上海 回復(fù)
  5. 頁面點開是空白的。。。

    回復(fù)
    1. 他們產(chǎn)品有bug,坑死了我這篇文章,不然怎么也能上熱門文章的

      回復(fù)
  6. 為什么我刷不出來,通篇白板,無限和4G都是一樣的結(jié)果

    回復(fù)
    1. APP有bug。我自己看到的也是白板,把我這篇文章坑了,好長一篇,花了很長時間啊。。。

      回復(fù)
  7. 很棒

    來自北京 回復(fù)
  8. 好,很好的知識普及文章,對新手來說就是雪中送炭

    回復(fù)
  9. 期待(下)

    回復(fù)
  10. 您好,我是交互設(shè)計學堂(id:jhsjxt)公眾號的小編,您這邊文章太贊了,我想申請轉(zhuǎn)載,請問可以給我們授權(quán)嗎?謝謝。

    來自廣東 回復(fù)
    1. 可以,注明出處和作者

      回復(fù)
  11. 等待下一篇

    回復(fù)
  12. 非常不錯值得收藏

    回復(fù)
  13. 太贊了

    來自江蘇 回復(fù)