作者 | Destiny

來源 | 木東居士

0x00 前言

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

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

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

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

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

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

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

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

1. 離散時間的可視化

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

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

（1）單一柱狀圖

1）適用場景

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

2）不適用場景

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

（2）并列柱狀圖

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

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

（3）堆疊柱狀圖

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

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

• 普通堆疊柱狀圖：展示實際體量。
• 百分比堆疊柱狀圖：展示相對體量。

1）普通堆疊柱狀圖

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

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

2）百分比堆疊柱狀圖

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

（3）散點圖

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

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

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

2. 連續(xù)時間

連續(xù)時間：連續(xù)時間數(shù)據(jù)的可視化和離散時間數(shù)據(jù)的可視化相似。因為就算數(shù)據(jù)是連續(xù)的，我們采集的數(shù)據(jù)大部分還是離散且有限的。

連續(xù)型數(shù)據(jù)和離散型數(shù)據(jù)，在數(shù)據(jù)結(jié)構(gòu)上并沒有差別，區(qū)別在于它們所反映的真實世界的數(shù)據(jù)是否是不斷變化的。如一天當中的氣溫變化，就是連續(xù)型數(shù)據(jù)，因為你在一天中的任何時候都可以進行測量，且氣溫在不同時刻是變化的。

（1）折線圖

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

折線圖主要包括三類：點線圖、折線圖、曲線圖。

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

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

（2）階梯圖

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

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

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

b.當前時間節(jié)點數(shù)值；

c.當前節(jié)點較前一節(jié)點的差值；

（3）擬合曲線圖

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

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

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

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

1.餅圖

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

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

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

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

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

2.環(huán)形圖

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

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

3.百分比堆疊柱狀圖

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

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

4.百分比堆疊面積圖

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

如果從某一點上對堆疊面積圖進行垂直切片，那么就可以得到該時間段上的比例分布情況。

5.矩形樹圖

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

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

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

0xFF 總結(jié)

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

如上所述：

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