B端可視化: 圖表設(shè)計(jì)(2)

10 評(píng)論 14416 瀏覽 159 收藏 40 分鐘

編輯導(dǎo)語(yǔ):在B端可視化中,往往會(huì)涉及到圖表設(shè)計(jì)。圖表不僅能夠比文字更簡(jiǎn)潔的描述出我們所想要表達(dá)的內(nèi)容,還能讓我們更加的直觀看到我們所需要的數(shù)據(jù)庫(kù)被建立,將一些事物中隱藏的聯(lián)系進(jìn)行關(guān)聯(lián),讓我們的文章內(nèi)容更的嚴(yán)謹(jǐn),數(shù)據(jù)可信度更高。

本篇文章主要講述選擇圖表和常見(jiàn)的圖表類型這兩個(gè)部分。

1. 圖表的選用

我們做數(shù)據(jù)分析的有句話叫“一圖勝千言”,圖表是展現(xiàn)數(shù)據(jù)的一種重要展現(xiàn)形式,選對(duì)了圖表就能幫助我們更加快速、直觀的傳達(dá)數(shù)據(jù)信息。

那如何挑選合適的圖表呢?在我看來(lái)大致分為三步:

  1. 確定核心內(nèi)容:明確要用圖表傳達(dá)的核心信息;
  2. 判斷比較關(guān)系:判斷數(shù)據(jù)之間的比較類型(如占比、數(shù)量、趨勢(shì)等);
  3. 選擇圖表類型:選擇對(duì)應(yīng)含義的圖表(如餅圖、柱狀圖、折線圖等)。

很多朋友在判定和選擇圖表類型時(shí)會(huì)不知所措,但其實(shí)你只需要記住一句話:決定圖表形式的不是數(shù)據(jù),而是你要傳達(dá)的信息。

1.1 確定核心內(nèi)容

同一組數(shù)據(jù)用不同的角度看,有不同的主題,比如下面這組數(shù)據(jù):

從另一個(gè)角度看同樣是5月份的數(shù)據(jù),你還可能會(huì)將側(cè)重點(diǎn)放在每個(gè)產(chǎn)品占銷售額的百分比上。那你的圖表主題應(yīng)該是“5月份,產(chǎn)品 A 占公司產(chǎn)品總銷售額的比例位居首位”。

綜上所述,選擇合適圖表的關(guān)鍵,最初也是最重要的,就是明確要用圖表傳達(dá)的核心信息。

1.2 判斷比較關(guān)系

在實(shí)際工作中需要用圖表反映數(shù)據(jù)的場(chǎng)景五花八門,但按數(shù)據(jù)關(guān)系分類無(wú)非以下幾種情況,給大家簡(jiǎn)單舉幾個(gè)例子:

  • “預(yù)計(jì)在今后 10 年多的時(shí)間里,銷售額將增長(zhǎng) ”對(duì)應(yīng)的關(guān)系為時(shí)間趨勢(shì);
  • “雇員的最高工資額在 30000 到 35000 美元之間 ”對(duì)應(yīng)的關(guān)系為頻率分布;
  • “汽油并不是牌子越響價(jià)格越高其性能就越好”對(duì)應(yīng)的關(guān)系為相關(guān)性;
  • “9 月份里,6 個(gè)區(qū)域的營(yíng)業(yè)額大致相同”對(duì)應(yīng)的關(guān)系為排名對(duì)比;
  • “銷售部經(jīng)理在他的領(lǐng)域內(nèi)只花費(fèi)了他 15% 的時(shí)間”對(duì)應(yīng)的關(guān)系為占比。

1.3 選擇圖表類型

國(guó)外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示,但其實(shí)結(jié)合我自己的經(jīng)驗(yàn),考慮到日常企業(yè)的數(shù)據(jù)分析場(chǎng)景,圖中有些圖表使用頻率是非常低的。

所以我在此基礎(chǔ)上結(jié)合自己多年的經(jīng)驗(yàn),總結(jié)出了常用商務(wù)圖表的選擇指南,總體我認(rèn)為這是會(huì)更適合商務(wù)圖表展示,而且會(huì)更接地氣,適合大家參考使用。

2. 常見(jiàn)的可視化圖表

2.1 折線圖

2.1.1 定義

折線圖是通過(guò)線條的波動(dòng)(上升或下降)來(lái)顯示連續(xù)數(shù)據(jù)隨時(shí)間或有序類別變化的圖表,常用于反映數(shù)據(jù)隨著時(shí)間推移而產(chǎn)生的變化趨勢(shì)。

2.1.2 適用場(chǎng)景

橫軸為連續(xù)類別(如時(shí)間)且注重變化趨勢(shì)、預(yù)測(cè),適用于折線圖。

舉個(gè)例子:比如想看2020年上半年商品的營(yíng)業(yè)額情況,并對(duì)走勢(shì)做一個(gè)分析。由于每個(gè)月份的商品營(yíng)業(yè)額相關(guān)的,它們代表一種數(shù)據(jù)在不同時(shí)間下的數(shù)據(jù)值,因此我們可以用折線圖將它們連接起來(lái)。

但如果想看2020年上半年北京、上海、廣州、深圳四個(gè)省份的營(yíng)業(yè)額情況,由于每個(gè)省份的營(yíng)業(yè)額是不相關(guān)的,所以我們不能隨便用折線圖來(lái)替代柱狀圖。

2.1.3 使用建議

2.1.3.1 使用合適的時(shí)間間隔,使鋸齒狀的線條平滑

如果折線圖上下浮動(dòng)過(guò)于劇烈,那么可以嘗試?yán)L(zhǎng)時(shí)間間隔,比如不每天采樣而以周為單位來(lái)采樣。用戶不太原因去閱讀鋸齒狀的線條,或者說(shuō)他們不會(huì)喜歡這樣的圖表。

但是如果有強(qiáng)需求說(shuō)是一定要在某個(gè)范圍,這條略過(guò)。

2.1.3.2? 善用數(shù)據(jù)點(diǎn)標(biāo)記、特殊標(biāo)記

當(dāng)有些特定的數(shù)值特別重要時(shí),我們可以在線條上標(biāo)注出他們,但全部標(biāo)清數(shù)據(jù)點(diǎn)在大多數(shù)情況下標(biāo)記出來(lái)的意義不大,從視覺(jué)上來(lái)看會(huì)顯得非?,嵥?。

2.1.3.3 分清主次關(guān)系,加強(qiáng)數(shù)據(jù)感知

若對(duì)比數(shù)據(jù)較多,為了避免信息繁雜。可采用實(shí)線的強(qiáng)弱和色彩的對(duì)比來(lái)區(qū)分主次內(nèi)容,讓用戶更關(guān)注在主折線,獲取主數(shù)據(jù)的波動(dòng)感知。

  • 知識(shí)擴(kuò)展:折線圖與曲線圖的區(qū)別;
  • 折線圖:更關(guān)注于點(diǎn)的數(shù)據(jù),相對(duì)短的一段時(shí)間數(shù)據(jù)隨時(shí)間變化的趨勢(shì);
  • 曲線圖:更關(guān)注點(diǎn)構(gòu)成的線點(diǎn)數(shù)據(jù),一段時(shí)間內(nèi)整體數(shù)據(jù)隨時(shí)間變化的趨勢(shì)。

曲線圖是折線圖中的一種,當(dāng)圖表數(shù)據(jù)點(diǎn)過(guò)于密集時(shí),使用曲線圖更能表達(dá)數(shù)據(jù)隨時(shí)間變化的趨勢(shì)、周期性。

2.2 面積圖

2.2.1 定義

面積圖又叫區(qū)域圖,是一種隨有序變量的變化,反映數(shù)值變化的統(tǒng)計(jì)圖表,原理與折線圖相似。它在折線圖的基礎(chǔ)上多了一個(gè)面積概念,填充的區(qū)域可以表示“累積”的含義(當(dāng)X軸為連續(xù)的數(shù)值時(shí))。

2.2.2 適用場(chǎng)景

當(dāng)注重隨時(shí)間的趨勢(shì)變化和累計(jì)的值時(shí),適用于面積圖。

例如:想要查看今年10月和去年10月每日的商品營(yíng)業(yè)額走勢(shì),并對(duì)整月?tīng)I(yíng)業(yè)額進(jìn)行比較,這時(shí)就可以采用面積圖。但當(dāng)自變量不是順序性的變量,則不適合用面積圖。

2.2.3 使用建議

2.2.3.1 使用透明填充色

透明度可以很好的幫助使用者觀察不同序列之間的重疊關(guān)系,沒(méi)有透明度的面積會(huì)導(dǎo)致不同序列之間相互遮蓋減少可以被觀察到的信息。

2.2.3.2 當(dāng)X軸數(shù)據(jù)較少,考慮其他圖表

當(dāng)數(shù)據(jù)值相距很遠(yuǎn)時(shí),區(qū)域是模糊不清的,此時(shí)不太適合使用面積圖展示。

如下方示例雖然仔細(xì)分析能確定只展示了兩個(gè)類別,乍一看,很可能會(huì)誤以為圖表上顯示三種不同的顏色,但使用分組柱狀圖就可以很好解決這個(gè)問(wèn)題。

2.2.3.3 不要超過(guò)4個(gè)數(shù)據(jù)系列

面積圖只適合展現(xiàn)少量的數(shù)據(jù),最多建議不要超過(guò)四個(gè)類別,否則就會(huì)導(dǎo)致非常難以識(shí)別。因此在多個(gè)類別下,要盡量避免使用面積圖,采用相似圖表來(lái)表示,比如折線圖。

2.3 堆疊面積圖

2.3.1 定義

堆疊面積圖與面積圖類似,都是在折線圖的基礎(chǔ)上,將折線與自變量坐標(biāo)軸之間區(qū)域填充起來(lái)的統(tǒng)計(jì)圖表。

唯一的區(qū)別是堆疊面積圖有多個(gè)數(shù)據(jù)系列,它們一層層的堆疊起來(lái),每個(gè)數(shù)據(jù)系列的起始點(diǎn)是上一個(gè)數(shù)據(jù)系列的結(jié)束點(diǎn)。

2.3.2 適用場(chǎng)景

適用于觀察多變量隨時(shí)間的變化情況,且既能看到整體趨勢(shì)又能看到各變量的構(gòu)成情況。

2.3.3 使用建議

2.3.3.1 盡量不要對(duì)Y軸進(jìn)行裁切

為了保證數(shù)據(jù)傳遞的準(zhǔn)確性,在適用堆疊面積圖時(shí),盡量不要對(duì)Y軸進(jìn)行裁剪。

2.3.3.2 不要超過(guò)7個(gè)數(shù)據(jù)系列

當(dāng)數(shù)據(jù)系列過(guò)多時(shí),往往造成難以觀察,所以建議使用堆疊面積圖時(shí)數(shù)據(jù)系列最好不要超過(guò)7個(gè)。

2.3.3.3 變化量大的數(shù)據(jù)置于上方

建議堆疊面積圖中把變化量較大的數(shù)據(jù)放在上方,變化量較小的數(shù)據(jù)放在下方會(huì)獲得更加的展示效果。

2.3.3.4 不適合帶有負(fù)值的數(shù)據(jù)系列

堆積面積圖要展示部分和整體之間的關(guān)系,所以不能用于包含負(fù)值的數(shù)據(jù)的展示。

2.4 柱狀圖

2.4.1 定義

柱狀圖,是一種使用矩形條,對(duì)不同類別進(jìn)行數(shù)值比較的統(tǒng)計(jì)圖表。使用垂直或水平的柱子的長(zhǎng)短對(duì)比數(shù)值大小,其中一個(gè)軸表示需要對(duì)比的分類維度;另一個(gè)軸代表相應(yīng)的數(shù)值。

在柱狀圖上,分類變量的每個(gè)實(shí)體都被表示為一個(gè)矩形(通俗講即為“柱子”),而數(shù)值則決定了柱子的高度??v向柱狀圖的柱是垂直方向的,如圖:

橫向柱狀圖的柱是水平方向的,又稱條形圖,如圖:

2.4.2 適用場(chǎng)景

柱狀圖最適合對(duì)分類的數(shù)據(jù)進(jìn)行比較,尤其是當(dāng)數(shù)值比較接近時(shí),由于人眼對(duì)于高度的感知優(yōu)于其他視覺(jué)元素(如面積、角度等),因此使用柱狀圖更加合適。

如下圖所示,5組數(shù)據(jù)的數(shù)值很接近,若采用餅圖,這無(wú)法直觀的進(jìn)行比較,右邊的柱狀圖則能更好地傳遞圖表信息。

2.4.3 使用建議

2.4.3.1 使用合適的寬度去適配柱條的寬度

當(dāng)柱子太窄時(shí),用戶的視覺(jué)可能會(huì)集中在兩個(gè)柱中間的負(fù)空間,而這里是不承載任何數(shù)據(jù)的。寬度推薦使用在1/2 柱寬到 1 柱寬之間,但也要視情況而定。

2.4.3.2 不推薦采用全圓角

保證柱形圖有精確的圓角,以確保柱形頂部精確測(cè)量柱形的長(zhǎng)度;全圓角則有可能歪曲可視化圖表的表達(dá)。

2.4.3.3 避免適用過(guò)多的顏色

柱形圖一般比較一組分類數(shù)據(jù),柱子的高低已經(jīng)傳遞了相關(guān)信息,不必通過(guò)顏色來(lái)區(qū)分,所以建議使用相同的顏色或同一顏色的不同色調(diào),過(guò)多的顏色會(huì)增加理解成本。

如果需要強(qiáng)調(diào)某個(gè)數(shù)據(jù)時(shí),可以使用對(duì)比色或者變化色調(diào)來(lái)突出顯示有意義的數(shù)據(jù)點(diǎn)。

2.4.3.4 采用有序排列,軸標(biāo)簽右對(duì)齊

對(duì)多個(gè)數(shù)據(jù)系列排序時(shí),如果不涉及到日期等特定數(shù)據(jù),最好能符合一定的邏輯用直觀的方式引導(dǎo)用戶更好的查看數(shù)據(jù)。

可以通過(guò)升序或降序排布,例如按照數(shù)量從多到少來(lái)對(duì)數(shù)據(jù)進(jìn)行排序,也可以按照字母順序等來(lái)排布。總之,按照邏輯排序可以一定程度上引導(dǎo)人們更好地閱讀數(shù)據(jù)。

2.4.3.5 標(biāo)簽直接顯示在柱體上

條形圖還可以通過(guò)省略橫軸和縱軸,并直接在柱子上表明數(shù)值,來(lái)降低數(shù)據(jù)墨水比,進(jìn)一步提高信息的獲取效率。

2.5 堆疊柱狀圖

2.5.1 定義

堆疊柱狀圖(Stacked Column Chart),又稱堆疊柱形圖,是一種用來(lái)分解整體、比較各部分的圖表。

它是柱狀圖的擴(kuò)展,不同的是,柱狀圖的數(shù)據(jù)值為并行排列,堆疊柱圖則是一個(gè)個(gè)疊加起來(lái)的。它可以展示每一個(gè)分類的總量,以及該分類包含的每個(gè)小分類的大小及占比,并且這些子類別一般用不同的顏色來(lái)指代。

2.5.2 適用場(chǎng)景

對(duì)比不同類別數(shù)據(jù)的數(shù)值大小,同時(shí)對(duì)比每一類別數(shù)據(jù)中,子類別的構(gòu)成及大小。

例如下圖顯示的是每種化妝品在各個(gè)產(chǎn)品的銷售情況,通過(guò)堆疊柱狀圖,我們可以很清晰低對(duì)比同一種化妝品到底在哪個(gè)城市銷量更好。

2.5.3 使用建議

2.5.3.1 縱向堆疊柱狀圖 – 最多不要超過(guò)6個(gè)數(shù)據(jù)

堆疊柱狀圖最好的展示效果是每個(gè)組只包含兩到三個(gè)類別,最多不要超過(guò)6個(gè),因?yàn)樘嗟臄?shù)據(jù)系列會(huì)很容易讓人眼花繚亂, 如下圖:

2.5.3.2 數(shù)值標(biāo)簽居中對(duì)齊

堆疊條狀圖的數(shù)值建議在圖形之間,居中對(duì)齊,在圖形左側(cè)容易產(chǎn)生誤解。

2.5.3.3 避免用堆疊柱狀圖展示包含負(fù)數(shù)的數(shù)據(jù)

由于要分析部分?jǐn)?shù)據(jù)在整體中的占比,避免用堆疊柱狀圖展示包含負(fù)數(shù)的數(shù)據(jù)。因?yàn)橹拥母叨缺仨殲檎龜?shù),有負(fù)數(shù)則無(wú)法直觀顯示在圖上。

2.5.3.4 數(shù)據(jù)標(biāo)簽特別長(zhǎng)時(shí),采用水平堆疊柱狀圖

大多數(shù)的堆疊柱狀圖都是垂直繪制的,但是如果你的數(shù)據(jù)標(biāo)簽特別長(zhǎng)時(shí),考慮更好地展示效果,可以選擇使用水平堆疊的方式。

2.6 分組柱狀圖

2.6.1 定義

分組柱狀圖,又叫聚集柱狀圖。

跟柱狀圖類似,使用柱子的長(zhǎng)短來(lái)映射和對(duì)比數(shù)據(jù)值。每個(gè)分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區(qū)別各個(gè)分類,各個(gè)分組之間需要保持間隔。

2.6.2 適用場(chǎng)景

對(duì)比不同分組內(nèi)相同分類的大小,對(duì)比相同分組內(nèi)不同分類的大小。其中,分組個(gè)數(shù)不要超過(guò) 12 個(gè),每個(gè)分組下的分類不要超過(guò) 6 個(gè)。

2.6.3 使用建議

2.6.3.1 數(shù)據(jù)的數(shù)值差異大,建議使用雙軸

分組柱狀圖適合比較多組數(shù)值差異不大的數(shù)據(jù),比如,對(duì)于要同時(shí)查看一個(gè)數(shù)值和百分比的時(shí)間趨勢(shì),雙軸圖就派上大用場(chǎng)了。

為了瀏覽起來(lái)更直觀,建議用柱圖來(lái)表示數(shù)值類數(shù)據(jù),用線圖來(lái)表示百分比。

2.6.3.2 組之間的間距 > 柱子之間的間距

分組柱狀圖強(qiáng)調(diào)組的概念,組是一個(gè)個(gè)重復(fù)單元。按照格式塔原理,每?jī)蓚€(gè)分組之間的間距要大于組內(nèi)不同系列之間的間距,以免造成視覺(jué)上錯(cuò)誤的歸類和區(qū)分。

2.7 雙向柱狀圖

2.7.1 定義

雙向柱狀圖是使用正向和反向的柱子顯示類別之間的數(shù)值比較,其中分類軸表示需要對(duì)比的分類維度,連續(xù)軸代表相應(yīng)的數(shù)值,分為兩種情況,一種是正向刻度值與反向刻度值完全對(duì)稱;另一種是正向刻度值與反向刻度值反向?qū)ΨQ,即互為相反數(shù)。

同樣的,可分為垂直方和水平兩個(gè)方向,其中水平雙向柱狀圖又叫正負(fù)條形圖。

2.7.2 適用場(chǎng)景

雙向柱狀圖一般用于正負(fù)兩份相反數(shù)據(jù)的對(duì)比,例如一周內(nèi)個(gè)人收入和支出的統(tǒng)計(jì),其中收入為正數(shù),支出為負(fù)數(shù)。

使用雙向柱狀圖可以很明確的對(duì)收入和支出做出對(duì)比,并能從單個(gè)系列中分析收入和支出的數(shù)值及波動(dòng)。

2.7.3 使用建議

2.7.3.1 不適合不含相反含義的數(shù)據(jù)

雙向柱狀圖多用于展示含相反含義的數(shù)據(jù),因此要避免不具有正負(fù)含義的數(shù)據(jù)使用而造成的誤解。

如下圖人口統(tǒng)計(jì)圖表中使用雙向柱狀圖一邊繪制男性一邊繪制女性,只是單純的兩類不同數(shù)據(jù)的對(duì)比,并不存在負(fù)數(shù)。這種情況將兩個(gè)數(shù)據(jù)序列繪制成一個(gè)分組柱狀圖是更合適的。

2.7.3.2 采用色彩差異較大的顏色

向柱狀圖正向和負(fù)向的數(shù)據(jù)具有對(duì)比性,因此一般選用差值較大的具有對(duì)比性的顏色,保證高效的獲取有效的信息。

2.8 餅圖

2.8.1 定義

餅圖,或稱餅狀圖,是一個(gè)劃分為幾個(gè)扇形的圓形統(tǒng)計(jì)圖表。在餅圖中,每個(gè)扇形的弧長(zhǎng)(以及圓心角和面積)大小,表示該種類占總體的比例,且這些扇形合在一起剛好是一個(gè)完全的圓形。

2.8.2 適用場(chǎng)景

餅圖主要用于展現(xiàn)不同類別數(shù)值相對(duì)于總數(shù)的占比情況,尤其是想要突出表示某個(gè)部分在整體中所占比例,且該部分所占比例達(dá)到總體的25%或50%時(shí),很適合用餅圖。

2.8.3 使用建議

2.8.3.1 分塊數(shù)量盡量控制在5個(gè)以內(nèi),最多不要超過(guò)9個(gè)

餅圖不適用于多分類的數(shù)據(jù),因?yàn)殡S著分類的增多,每個(gè)切片的面積變小,視覺(jué)區(qū)分度隨之降低。

當(dāng)數(shù)據(jù)類別較多時(shí),我們可以把較小或不重要的數(shù)據(jù)合并成第五個(gè)模塊命名為”其它”。如果一定要保證數(shù)據(jù)的完整性和準(zhǔn)確性,此時(shí)選擇柱狀圖或堆積柱狀圖或許更合適。

2.8.3.2 切片大小相似時(shí),建議采用柱狀圖或南丁格爾玫瑰圖

由于人類對(duì)“角度”的感知力并不如“長(zhǎng)度”,在需要準(zhǔn)確的表達(dá)數(shù)值(尤其是當(dāng)數(shù)值接近、或數(shù)值很多)時(shí),餅圖常常不能勝任,因此當(dāng)各類別數(shù)據(jù)占比較接近時(shí)(如下左圖),我們很難對(duì)比出每個(gè)類別占比的大小。

此時(shí)建議選用柱狀圖或南丁格爾玫瑰圖(如下右圖)來(lái)獲取更好的展示效果。

2.8.3.3 正確放置切片位置,提高圖表可讀性

大多數(shù)人視覺(jué)習(xí)慣是按照順時(shí)針和自上而下的順序去觀察。因此在繪制餅圖時(shí),建議從12點(diǎn)鐘開(kāi)始沿順時(shí)針右邊第一個(gè)分塊繪制餅圖最大的數(shù)據(jù)分塊,有效的強(qiáng)調(diào)其重要性。

其余的數(shù)據(jù)分塊有兩種建議:一種是按照數(shù)據(jù)大小依次順時(shí)針排列;另一種在12點(diǎn)鐘的左邊繪制第二大的分塊,其余的分塊按照逆時(shí)針排列,最小的分塊放在底部。

讓用戶的視線焦點(diǎn)集中在上半部分,增強(qiáng)獲取信息的速度。

2.9 環(huán)形圖

2.9.1 定義

環(huán)形圖,又叫做甜甜圈圖,是由兩個(gè)及兩個(gè)以上大小不一的餅圖疊在一起,挖去中間的部分所構(gòu)成的圖形。

2.9.2 適用場(chǎng)景

適用于展示分類的占比情況,與餅圖用法相似,但環(huán)圖相對(duì)于餅圖空間的利用率更高,比如我們可以使用它的空心區(qū)域顯示文本信息,比如標(biāo)題等。

2.9.3 使用建議

2.9.3.1 不適用于分類過(guò)多的場(chǎng)景

關(guān)于環(huán)圖不適用分類過(guò)多的場(chǎng)景,否則閱讀會(huì)將很差(如下圖)。

可行的辦法:一是將一些不重要的變量合并為“其他”,避免扇區(qū)超過(guò)5個(gè);二是改用條形圖或者表格。尤其是,如果你想讓讀者清楚的閱讀到每一條數(shù)據(jù),選用表格會(huì)更加直截了當(dāng)。

2.9.3.2 不適用于分類占比差別不明顯的場(chǎng)景

下圖中游戲公司的不同種類的游戲的銷售量相近,所以不太適合使用環(huán)圖,此時(shí)可以使用柱狀圖。

2.10 南丁格爾玫瑰圖

2.10.1 定義

南丁格爾玫瑰圖又名雞冠花圖、極坐標(biāo)區(qū)域圖,盡管外形很像餅圖,但它是用半徑來(lái)反映數(shù)值大小的(而餅圖是以扇形的弧度來(lái)表示數(shù)據(jù)的)。

2.10.2 適用場(chǎng)景

對(duì)比不同分類的大小,且各分類值差異不是太大時(shí)。由于半徑和面積之間是平方的關(guān)系,視覺(jué)上,南丁格爾玫瑰圖會(huì)將數(shù)據(jù)的比例夸大。

2.10.3 使用建議

2.10.3.1 分類過(guò)少的場(chǎng)景,直接用餅圖或者環(huán)圖來(lái)表示

如下圖展示一個(gè)班級(jí)男女同學(xué)的個(gè)數(shù),這種場(chǎng)景下,使用餅圖或者環(huán)形圖比用南丁格爾玫瑰圖更合適。

2.10.3.2 希望精確的比較數(shù)值大小時(shí),推薦使用柱狀圖

南丁格爾玫瑰圖是將數(shù)值映射到半徑上,而扇形的面積和半徑是平方關(guān)系,因此視覺(jué)上看,數(shù)值的差異會(huì)被擴(kuò)大。

因此,當(dāng)數(shù)值差異較大、或者希望精確的比較數(shù)值大小時(shí),推薦使用柱狀圖。

下面使用南丁格爾玫瑰圖展示各個(gè)省份的人口數(shù)據(jù),這種場(chǎng)景下使用玫瑰圖不合適,原因是在玫瑰圖中數(shù)值過(guò)小的分類會(huì)非常難以觀察,推薦使用條形圖(橫向柱狀圖)。

2.11 散點(diǎn)圖

2.11.1 定義

散點(diǎn)圖,又名點(diǎn)圖、散布圖、X-Y圖,它是將所有的數(shù)據(jù)以點(diǎn)的形式展現(xiàn)在平面直角坐標(biāo)系上的統(tǒng)計(jì)圖表。它至少需要兩個(gè)不同變量,一個(gè)沿x軸繪制,另一個(gè)沿y軸繪制,每個(gè)點(diǎn)在X、Y軸上都有一個(gè)確定的位置。

2.11.2 適用場(chǎng)景

散點(diǎn)圖適用于分析變量之間是否存在某種關(guān)系或相關(guān)性。其中,相關(guān)性包含正相關(guān)(兩個(gè)變量值同時(shí)增加)、負(fù)相關(guān)(一個(gè)變量值增加另一個(gè)變量值下降)、不相關(guān)、線性相關(guān)、指數(shù)相關(guān)、U形相關(guān)等。

2.11.3 使用建議

2.11.3.1 盡量為散點(diǎn)圖添加趨勢(shì)線

通過(guò)添加趨勢(shì)線,可以更好的讓用戶感受數(shù)據(jù)的變化,人們不會(huì)愿意接受未處理的數(shù)據(jù),往往傾向于接受已經(jīng)被處理好的數(shù)據(jù)結(jié)果。但需要注意的是最多2條趨勢(shì)線,以免干擾正常的數(shù)據(jù)的閱讀。

2.11.3.2 數(shù)據(jù)量過(guò)少時(shí),不推薦使用散點(diǎn)圖

散點(diǎn)圖只有有足夠多的數(shù)據(jù)點(diǎn),并且數(shù)據(jù)之間有相關(guān)性時(shí)才能呈現(xiàn)很好的結(jié)果。如果一份數(shù)據(jù)只有極少的信息或者數(shù)據(jù)間沒(méi)有相關(guān)性,那么繪制一個(gè)很空的散點(diǎn)圖和不相關(guān)的散點(diǎn)圖都是沒(méi)有意義的。

2.11.3.3 用顏色、形狀來(lái)區(qū)分不同的數(shù)據(jù)類別

如果數(shù)據(jù)包含不同系列,可以給不同系列使用不同的顏色,例如藍(lán)色代表男性,紅色代表女性,并增加圖例標(biāo)注出藍(lán)色代表的含義。

幫助用戶快速獲取相關(guān)信息。但要注意,要避免數(shù)據(jù)分類過(guò)多的情況,過(guò)多的數(shù)據(jù)分類,會(huì)導(dǎo)致無(wú)法快速識(shí)別,失去可視化的意義和價(jià)值。

2.12 氣泡圖

2.12.1 定義

氣泡圖是顯示變量之間相關(guān)性的一種圖表,由笛卡爾坐標(biāo)系(直角坐標(biāo)系)和大小不一的圓組成,可以看作是散點(diǎn)圖的變形。

與散點(diǎn)圖不同的是,氣泡圖是一個(gè)多變量圖,它增加了第三個(gè)數(shù)值即氣泡大小的變量,在氣泡圖中,較大的氣泡表示較大的值??梢酝ㄟ^(guò)氣泡的位置分布和大小比例,來(lái)分析數(shù)據(jù)的規(guī)律。

2.12.2 適用場(chǎng)景

一般而言,氣泡圖需要3個(gè)變量,其中2個(gè)決定了氣泡在笛卡爾坐標(biāo)系中的位置(即x,y軸上的值),另外一個(gè)則通過(guò)氣泡的大小來(lái)表示。

當(dāng)然,氣泡圖也可以容納更多維的數(shù)據(jù),例如用第4個(gè)變量決定氣泡的顏色、透明度等。

特殊地,氣泡圖也可以用于二維數(shù)據(jù),即y軸和氣泡大小使用同一維度的數(shù)據(jù)(y軸和氣泡大小的雙視覺(jué)編碼)。

這種情況下,相比于柱狀圖它能達(dá)到更美觀的目的。例如,下圖表示了2014年每個(gè)季度的銷售額。x軸代表時(shí)間,y軸和氣泡大小代表了銷售業(yè)績(jī)。

2.12.3 使用建議

2.12.3.1 氣泡的大小應(yīng)體現(xiàn)為面積,而非半徑

繪制氣泡圖時(shí),需注意氣泡的大小是映射到面積而不是半徑或者直徑繪制的。

以下圖為例,如果兩個(gè)數(shù)值是1:2的關(guān)系,如果按照半徑1:2來(lái)繪制,那么實(shí)際的圓面積,將會(huì)是1:4的比例,這就夸大了數(shù)據(jù)之間的差異。

2.13 雷達(dá)圖

2.13.1 定義

雷達(dá)又叫戴布拉圖、蜘蛛網(wǎng)圖。它是一種顯示多變量數(shù)據(jù)的圖形方法。通常從同一中心點(diǎn)開(kāi)始等角度間隔地射出三個(gè)以上的軸,每個(gè)軸代表一個(gè)定量變量,各軸上的點(diǎn)依次連接成線或幾何圖形。

每個(gè)變量都有一個(gè)從中心向外發(fā)射的軸線,所有的軸之間的夾角相等,同時(shí)每個(gè)軸有相同的刻度,將軸到軸的刻度用網(wǎng)格線鏈接作為輔助元素,連接每個(gè)變量在其各自的軸線的數(shù)據(jù)點(diǎn)成一條多邊形。

2.13.2 適用場(chǎng)景

雷達(dá)圖對(duì)于查看哪些變量具有相似的值、變量之間是否有異常值都很有用。雷達(dá)圖表也可用于查看哪些變量在數(shù)據(jù)集內(nèi)得分較高或較低,因此非常適合顯示性能(見(jiàn)下圖)。

同樣,雷達(dá)圖也常用于排名、評(píng)估、評(píng)論等數(shù)據(jù)的展示。

2.13.3 使用建議

2.13.3.1 多邊形數(shù)量控制在五個(gè)左右

一個(gè)雷達(dá)圖包含的多邊形數(shù)量是有限的,如果有五個(gè)以上要評(píng)估的事物,無(wú)論是輪廓還是填充區(qū)域,都會(huì)產(chǎn)生覆蓋和混亂,使得數(shù)據(jù)難以閱讀。

2.13.3.2 控制變量的數(shù)量

如果變量過(guò)多,也會(huì)造成可讀性下降,因?yàn)橐粋€(gè)變量對(duì)應(yīng)一個(gè)坐標(biāo)軸,這樣會(huì)使坐標(biāo)軸過(guò)于密集,使圖表給人感覺(jué)很復(fù)雜,所以最佳實(shí)踐就是盡可能控制變量的數(shù)量使雷達(dá)圖保持簡(jiǎn)單清晰。

2.14 漏斗圖

2.14.1 定義

漏斗圖,形如“漏斗”,在開(kāi)始和結(jié)束之間由N個(gè)流程環(huán)節(jié)組成。

漏斗圖總是起始于100%的數(shù)量,并在各個(gè)環(huán)節(jié)依次減少,每個(gè)環(huán)節(jié)用一個(gè)梯形來(lái)表示,整體形如漏斗。與餅圖一樣,漏斗圖呈現(xiàn)的也不是具體的數(shù)據(jù),而是該數(shù)據(jù)相對(duì)于總數(shù)的占比、漏斗圖不需要使用任何數(shù)據(jù)軸。

2.14.2 適用場(chǎng)景

漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長(zhǎng)、環(huán)節(jié)多的單流程單向分析,通過(guò)漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說(shuō)明問(wèn)題所在的環(huán)節(jié),進(jìn)而做出決策。

其中,數(shù)據(jù)是要有序的,彼此之間有邏輯上的順序關(guān)系,階段最好大于3個(gè)。

2.14.3 使用建議

2.14.3.1 數(shù)據(jù)要邏輯上的順序關(guān)系

漏斗圖不適合沒(méi)有邏輯關(guān)系的數(shù)據(jù),換句話說(shuō),如果數(shù)據(jù)不構(gòu)成“流程”,那么不能使用漏斗圖。例如,想要展示不同游戲類型的銷量對(duì)比,用漏斗圖就是不合適的。

2.14.3.2 梯形的高度、面積都是有意義的,不應(yīng)想當(dāng)然的篡改

漏斗圖作為一種統(tǒng)計(jì)圖表,漏斗圖的“長(zhǎng)相”,本質(zhì)上是由數(shù)據(jù)決定的。在傳達(dá)數(shù)據(jù)時(shí),漏斗圖是通過(guò)“面積”表示的,對(duì)于人眼來(lái)說(shuō),面積的識(shí)別本來(lái)就不太容易。

如果我們?cè)谥谱髀┒穲D時(shí),再人為的改變漏斗中每一個(gè)梯形的高度,那么識(shí)別起來(lái)就十分困難。以下圖為例,抹掉數(shù)字后,你幾乎不可能知道第一層是第二層的三倍。

3. 后記

以上就是本篇文章的全部?jī)?nèi)容,關(guān)于可視化相關(guān)的知識(shí)還有很多沒(méi)有涉及到,例如可視化圖表的配色、商務(wù)儀表盤、以及其他的圖表運(yùn)用場(chǎng)景等等都還未講到。歡迎留言,我會(huì)根據(jù)情況,先對(duì)其進(jìn)行整理。

參考文獻(xiàn):

螞蟻數(shù)據(jù)可視化

數(shù)據(jù)可視化實(shí)驗(yàn)室a”>?vis.baidu.com

設(shè)計(jì)師要了解的數(shù)據(jù)可視化 —— 基礎(chǔ)篇

本文由 @Nick 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 您好,方便聯(lián)系下,開(kāi)個(gè)培訓(xùn)課程不?付費(fèi)的,坐標(biāo):福州某互聯(lián)網(wǎng)公司。如有意愿,請(qǐng)加Q:756591621

    來(lái)自福建 回復(fù)
  2. 比個(gè)心?

    來(lái)自四川 回復(fù)
  3. 2.5.3.2的圖文是不是搞錯(cuò)了,文字說(shuō)的是居中對(duì)齊比較好,但是圖片顯示上表示的是“居左”是“V”

    來(lái)自遼寧 回復(fù)
  4. 謝謝您。

    回復(fù)
  5. 太厲害了 要畫(huà)這么多圖,費(fèi)心了。

    來(lái)自廣東 回復(fù)
  6. 圖是用啥畫(huà)的呀

    來(lái)自上海 回復(fù)
    1. figma

      回復(fù)
  7. 點(diǎn)個(gè)贊

    來(lái)自廣東 回復(fù)
  8. 厲害

    來(lái)自福建 回復(fù)
  9. 這也太秀了吧

    來(lái)自新疆 回復(fù)