作者 | Destiny

來源 | 木東居士

0x00 前言

第1篇文章《數(shù)據(jù)可視化過程》發(fā)出后，通過居士收到一些讀者的反饋，大家的共同心聲是，希望在后續(xù)的文章中，結(jié)合具體的業(yè)務(wù)場景，多分享一些實(shí)例及其優(yōu)缺點(diǎn)。多謝大家的意見，也感謝大家的支持，后續(xù)會(huì)不斷改進(jìn)，輸出更多干貨。

在數(shù)據(jù)可視化的過程當(dāng)中，根據(jù)數(shù)據(jù)間的關(guān)系選擇合適的圖表，是保證數(shù)據(jù)可視化效果的關(guān)鍵。今天這篇文章，主要分享以下兩類數(shù)據(jù)關(guān)系的可視化：

• 時(shí)序數(shù)據(jù)可視化；
• 比例型數(shù)據(jù)可視化；

0x01 時(shí)序數(shù)據(jù)可視化

時(shí)序數(shù)據(jù)，是指任何隨著時(shí)間而變化的數(shù)據(jù)，如一天中氣溫隨時(shí)間的變化。

要進(jìn)行時(shí)序數(shù)據(jù)的可視化，我們首先需要了解「時(shí)間」所具有的特征：

• 有序性：時(shí)間都是有序的，事件之間有先后順序。
• 周期性：許多自然或商業(yè)現(xiàn)象都具有循環(huán)規(guī)律，如季節(jié)等周期性的循環(huán)。
• 結(jié)構(gòu)性：時(shí)間的尺度可以按照年、季度、月、日、小時(shí)、分鐘、秒等去切割。

「時(shí)間數(shù)據(jù)」按是否連續(xù)可分為：離散型時(shí)間和連續(xù)型時(shí)間兩類，時(shí)間類型的差異決定了圖表的表現(xiàn)形式也不同。

1. 離散時(shí)間的可視化

離散時(shí)間：數(shù)據(jù)來源于具體的時(shí)間點(diǎn)或者時(shí)間段，且時(shí)間數(shù)據(jù)的可能取值是有限的。

對(duì)于分布在離散時(shí)間的數(shù)據(jù)的可視化，可以采用柱狀圖、堆疊柱狀圖、散點(diǎn)圖來表示，下面分別來看下三種圖形來進(jìn)行離散時(shí)間可視化的適用場景和不適用場景。

（1）單一柱狀圖

1）適用場景

• 適合表示離散時(shí)間數(shù)據(jù)的趨勢，且數(shù)據(jù)條個(gè)數(shù)一般不超過12條。
• 適用于單類別數(shù)據(jù)的時(shí)間趨勢表示，即系列值單一的數(shù)據(jù)。

2）不適用場景

• 不適合展示連續(xù)時(shí)間的變化趨勢。
• 不適合數(shù)據(jù)條過多的離散時(shí)間的趨勢展示。

（2）并列柱狀圖

單一柱狀圖，是表示某一系列數(shù)值在離散時(shí)間上的可視化方式。當(dāng)需要對(duì)比某一離散時(shí)間上的多個(gè)系列，以及展示隨時(shí)間的變化趨勢時(shí)，并列柱狀圖是一種選擇。

但是要注意一點(diǎn)，并列柱狀圖的屬性系列，通常不能超過3條，否則圖表橫向空間會(huì)比較擁擠，展示的效果也不好。

（3）堆疊柱狀圖

單一柱狀圖，是表示各個(gè)離散時(shí)間點(diǎn)總體數(shù)值的一個(gè)方式。但是，當(dāng)我們想知道各個(gè)離散時(shí)間點(diǎn)總體的構(gòu)成部分，是如何隨著時(shí)間而變化的，這個(gè)時(shí)候，就需要引入堆疊柱狀圖。

堆疊柱狀圖，按照堆疊的部分，展示的是實(shí)際體量還是相對(duì)體量，可以分為兩類：

• 普通堆疊柱狀圖：展示實(shí)際體量。
• 百分比堆疊柱狀圖：展示相對(duì)體量。

1）普通堆疊柱狀圖

假設(shè)某電影院想分析，2019年上半年個(gè)月的票房情況，同時(shí)也想知道各個(gè)月的國產(chǎn)片和外國片共貢獻(xiàn)的票房分別為多少，這種情況下，我們可以用普通的堆疊柱狀圖來表示，具體如下：

普通堆疊柱狀圖，整體的構(gòu)成部分，最好不要超過5項(xiàng)。若實(shí)際構(gòu)成項(xiàng)大于5個(gè)時(shí)，需要做適當(dāng)?shù)臍w類，以保證圖表重點(diǎn)突出。

2）百分比堆疊柱狀圖

若影院想知道上半年各月，國產(chǎn)片和外國片的貢獻(xiàn)占比隨時(shí)間的變化情況，這個(gè)時(shí)候就可以使用百分比堆疊柱狀圖。

（3）散點(diǎn)圖

散點(diǎn)圖，通常用來表示兩個(gè)變量間的相關(guān)關(guān)系。在表示離散時(shí)間數(shù)據(jù)時(shí)，其表達(dá)的是某一變量隨時(shí)間的變化關(guān)系。

柱狀圖是用高度作為數(shù)值的映射，而散點(diǎn)圖則是用位置來作為數(shù)值的視覺通道。

注意：當(dāng)有多個(gè)系列列時(shí)，不不適合?用散點(diǎn)圖來表示時(shí)間趨勢，因?yàn)槎鄠€(gè)系列列的圓點(diǎn)同時(shí)出現(xiàn)時(shí)，很難將其中某個(gè)系列列視為?一個(gè)整體，?比較起來很吃?力力。此時(shí)除了了把顏?色作為映射的視覺通道之外，也可以給各個(gè)系列列選擇不不同的數(shù)據(jù)標(biāo)記，如正?方形、圓、三?角形、菱形等。

2. 連續(xù)時(shí)間

連續(xù)時(shí)間：連續(xù)時(shí)間數(shù)據(jù)的可視化和離散時(shí)間數(shù)據(jù)的可視化相似。因?yàn)榫退銛?shù)據(jù)是連續(xù)的，我們采集的數(shù)據(jù)大部分還是離散且有限的。

連續(xù)型數(shù)據(jù)和離散型數(shù)據(jù)，在數(shù)據(jù)結(jié)構(gòu)上并沒有差別，區(qū)別在于它們所反映的真實(shí)世界的數(shù)據(jù)是否是不斷變化的。如一天當(dāng)中的氣溫變化，就是連續(xù)型數(shù)據(jù)，因?yàn)槟阍谝惶熘械娜魏螘r(shí)候都可以進(jìn)行測量，且氣溫在不同時(shí)刻是變化的。

（1）折線圖

折線圖用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化。在折線圖中，一般水平軸（X軸）用來表示時(shí)間的推移，并且間隔相同；而垂直軸（Y軸）代表不同時(shí)刻的數(shù)據(jù)的大小。

折線圖主要包括三類：點(diǎn)線圖、折線圖、曲線圖。

• 點(diǎn)線圖：當(dāng)數(shù)據(jù)集中的數(shù)據(jù)項(xiàng)有限，不超過12個(gè)時(shí)，采用此種點(diǎn)線圖比較合適。有時(shí)候，對(duì)應(yīng)日期的數(shù)據(jù)點(diǎn)上方，會(huì)直接顯示數(shù)值。
• 折線圖：當(dāng)數(shù)據(jù)集中的數(shù)據(jù)項(xiàng)比較多，大于12條時(shí)，采用點(diǎn)線圖，會(huì)讓整條線上的點(diǎn)很密集，影響看數(shù)據(jù)的趨勢，此時(shí)采用折線圖是不錯(cuò)的選擇。
• 曲線圖：相比于折線圖，曲線圖相鄰節(jié)點(diǎn)的連線更加平滑，可視化效果也更加美觀。

從點(diǎn)線圖中，可以觀察出4種趨勢：長期性趨勢、季節(jié)性趨勢、周期性趨勢、不規(guī)則波動(dòng)。

（2）階梯圖

階梯圖常用來表示，某兩個(gè)相鄰的時(shí)間節(jié)點(diǎn)，后一個(gè)節(jié)點(diǎn)的數(shù)據(jù)相對(duì)于前一個(gè)節(jié)點(diǎn)數(shù)據(jù)的升降變化，常用于商品價(jià)格變動(dòng)、股票價(jià)格波動(dòng)、稅率變化等場景中。

在階梯圖中，有三個(gè)關(guān)鍵的值：

a.前一時(shí)間節(jié)點(diǎn)數(shù)值；

b.當(dāng)前時(shí)間節(jié)點(diǎn)數(shù)值；

c.當(dāng)前節(jié)點(diǎn)較前一節(jié)點(diǎn)的差值；

（3）擬合曲線圖

若我們想要研究數(shù)據(jù)隨時(shí)間的變化所表現(xiàn)出來的整體趨勢時(shí)，可以根據(jù)多個(gè)離散點(diǎn)（T1,D1）、（T2,D2）….、（Tn,Dn），擬合一個(gè)最接近的一個(gè)連續(xù)函數(shù)關(guān)系。

擬合曲線圖，在數(shù)據(jù)預(yù)測中應(yīng)用較多。比如，某一電商網(wǎng)站要預(yù)測今年雙十一的GMV，那么它可以根據(jù)往年每月的交易額趨勢，今年每月與去年同期的數(shù)據(jù)等多個(gè)變量，去擬合出交易額與時(shí)間等其他因素所滿足的關(guān)系。具體要考慮哪些因素，這個(gè)和數(shù)據(jù)模型的搭建息息相關(guān)，此處不做延伸。

0x02 比例型數(shù)據(jù)可視化

比例數(shù)據(jù)，通常是按照類別、子類別、群體進(jìn)行的劃分。對(duì)于比例型數(shù)據(jù)，我們進(jìn)行可視化的目的，是為了尋找整體中的最大值、最小值、整體的構(gòu)成分布、以及各部分之間的相對(duì)關(guān)系。

1.餅圖

當(dāng)構(gòu)成整體的數(shù)據(jù)項(xiàng)較少時(shí)，采用餅圖是一種不錯(cuò)的選擇，餅圖是通過角度來映射各類別對(duì)應(yīng)的數(shù)值。

但是，現(xiàn)實(shí)的數(shù)據(jù)情況是，一個(gè)維度下的屬性值數(shù)量，通常會(huì)比較多，如果在餅圖中全部展示出來，一方面會(huì)使整個(gè)餅圖顯得雜亂，沒有重點(diǎn)，另一方面也失去了可視化的美感。

因此，對(duì)于餅圖來說，建議扇區(qū)個(gè)數(shù)最大值在5～7個(gè)之間。當(dāng)數(shù)據(jù)項(xiàng)超過一定數(shù)量時(shí)，可以按照占比，把排名最末的幾項(xiàng)歸位「其他」。我通常的做法是：

• 當(dāng)數(shù)據(jù)項(xiàng)n<=6時(shí)，直接顯示各扇區(qū)原始類別的名稱。
• 當(dāng)數(shù)據(jù)項(xiàng)n>6時(shí)，直接顯示占比排名TOP5扇區(qū)的原始類別名稱，剩余的數(shù)據(jù)項(xiàng)則歸為「其他」。

當(dāng)然，餅圖中最大可展示的分類項(xiàng)個(gè)數(shù)可以根據(jù)實(shí)際情況確定，但是對(duì)于一個(gè)數(shù)據(jù)產(chǎn)品內(nèi)部，建議標(biāo)準(zhǔn)統(tǒng)一，這樣前后端同學(xué)會(huì)在進(jìn)行數(shù)據(jù)、前端開發(fā)工作時(shí)，可以進(jìn)行標(biāo)準(zhǔn)化，提高復(fù)用性和開發(fā)效率。

2.環(huán)形圖

餅圖通過各扇區(qū)角度去映射各分類項(xiàng)對(duì)應(yīng)的數(shù)值，「環(huán)形圖」則通過各弧形的長度來衡量數(shù)值。

環(huán)形圖中心部位是空的，可以放置標(biāo)簽、整體數(shù)值、平均數(shù)值或其他內(nèi)容。環(huán)形圖中，數(shù)據(jù)項(xiàng)的分類和餅圖類似，就不在贅述。

3.百分比堆疊柱狀圖

當(dāng)比例數(shù)據(jù)中存在多個(gè)父系列，每個(gè)父系列又由多個(gè)子類構(gòu)成，且各個(gè)系列的子類相同時(shí)，此時(shí)展示比例數(shù)據(jù)，可以采用百分比堆疊柱狀圖。

• 各個(gè)系列對(duì)應(yīng)的柱形條的高度是相同的，頂部刻度都為100%。
• 每根柱形條內(nèi)部，各子項(xiàng)柱形條的高度，代表在該系列中的占比。
• 當(dāng)各系列的子類數(shù)目較少時(shí)，可以直接在矩形內(nèi)部展示占比；當(dāng)數(shù)目較多時(shí)，建議隱藏。
• 當(dāng)各系列的子類目較多時(shí)，為了保證重點(diǎn)突出和視覺效果，需要對(duì)子類目進(jìn)行歸類，歸類方法參照餅圖。

4.百分比堆疊面積圖

當(dāng)比例數(shù)據(jù)中存在多個(gè)父系列，且父系列的數(shù)據(jù)類型為時(shí)間，要分析父系列的各構(gòu)成部分占比隨時(shí)間的變化趨勢，此時(shí)可以采用堆疊面積圖來表示比例關(guān)系的變化。

如果從某一點(diǎn)上對(duì)堆疊面積圖進(jìn)行垂直切片，那么就可以得到該時(shí)間段上的比例分布情況。

5.矩形樹圖

矩形樹圖，是一種基于面積的可視化方法。外部矩形代表父級(jí)類別，內(nèi)部矩形代表子類別。相比于其他表示比例型的數(shù)據(jù)，矩形樹圖更適合展示具有樹狀結(jié)構(gòu)的數(shù)據(jù)。

樹狀結(jié)構(gòu)，簡單理解，就是首先按一級(jí)分類來觀測各構(gòu)成部分的比例，然后再看某個(gè)一級(jí)分類下，是由哪些二級(jí)分類構(gòu)成的，依次類推，逐步細(xì)化，可以直到葉子結(jié)點(diǎn)。

若用矩形樹圖來表示具有多個(gè)層級(jí)結(jié)構(gòu)的比例數(shù)據(jù)，通常需要使用一些交互方式來輔助數(shù)據(jù)的展示。比如，單擊對(duì)應(yīng)區(qū)塊進(jìn)行下鉆，懸停展示具體數(shù)值和比例，使用面包屑進(jìn)行層級(jí)的跳轉(zhuǎn)等。

0xFF 總結(jié)

在可視化圖表選擇之初，我們首先要明確的是，我們希望從圖表中獲取什么信息。然后，根據(jù)數(shù)據(jù)的特征、數(shù)據(jù)之間的關(guān)系，選擇合適的可視化圖表。

如上所述：

• 時(shí)序數(shù)據(jù)，主要目的是研究數(shù)據(jù)隨時(shí)間的變化，這種變化包括總量的變化、構(gòu)成部分的變化、以及變化的趨勢和規(guī)律。
• 比例數(shù)據(jù)，區(qū)別于其他數(shù)據(jù)類型的一個(gè)關(guān)鍵，在于它是為了尋求整體中的各個(gè)構(gòu)成部分，及其相互關(guān)系。