本文源自與一個產(chǎn)品經(jīng)理的對話。為什么“一圖勝千言”呢?如果語言是一維的,那么圖像就是二維或多維的, 降維打擊體現(xiàn)在一個“勝”字。如果將圖像使用自然語言進行表達看作一種數(shù)據(jù)降維的方式, 那這種降維能力可能是需要訓練的。不同的人面對同一幅圖可能有不同的表達,對于數(shù)據(jù)產(chǎn)品而言, 有沒有數(shù)據(jù)與圖像之間的內(nèi)在關(guān)系模式呢?
習慣上, 我們會學習圖表的特點,進而找到不同圖表適用于表達哪些數(shù)據(jù)類型。但是,在工作中, 我們經(jīng)常遇到的是已知數(shù)據(jù)指標,如何在Dashboard上呈現(xiàn)這些數(shù)據(jù)。不論是產(chǎn)品經(jīng)理、設(shè)計師還是工程師,理解怎樣的數(shù)據(jù)通過怎樣的圖像表達比較合適都是有意義的。
數(shù)據(jù)類型是老生常談,從數(shù)據(jù)維度來看,有單變量和多變量,從變量自身來看,有離散和連續(xù)的區(qū)別。從數(shù)據(jù)類型出發(fā),面向需要表達的指標,老碼農(nóng)嘗試對常見的可視化圖例進行了梳理。
一、單變量的可視化
如果我們關(guān)注單一變量的指標變化,可以優(yōu)先考慮直方圖以及箱形圖。
1.直方圖
直方圖(Histogram),又稱質(zhì)量分布圖,是一種統(tǒng)計報告圖,由一系列高度不等的縱向條紋或線段表示數(shù)據(jù)分布的情況。
數(shù)據(jù)類型:單變量的序列。
使用場景:表達單變量的序列分布。
表達形態(tài):數(shù)據(jù)被分為相等的區(qū)間,高度一般表達數(shù)據(jù)的頻率。
圖片
局限:不適合跨數(shù)據(jù)組的比較。
2.箱形圖
箱形圖(Box-plot)又稱為盒式圖或箱線圖,是一種用作顯示一組數(shù)據(jù)分散情況資料的統(tǒng)計圖。因形狀如箱子而得名。在各種領(lǐng)域也經(jīng)常被使用,常見于品質(zhì)管理。
數(shù)據(jù)類型:單變量的連續(xù)值
使用場景:數(shù)據(jù)的分布及異常值檢測
表達形態(tài):用矩形代表4分位間距,中值由框內(nèi)的一條線表示,異常值繪制為單個點。
圖片
局限:當數(shù)據(jù)是分類的或顯示隨時間變化的趨勢時,避免使用箱形圖。
二、兩個變量的可視化
如果關(guān)注兩個變量關(guān)系,我們可以優(yōu)先考慮散點圖及其變體氣泡圖。
3.散點圖
散點圖(scatter plot)一般用在回歸分析中,數(shù)據(jù)點在直角坐標系平面上的分布圖,散點圖表示因變量隨自變量而變化的大致趨勢,據(jù)此可以選擇合適的函數(shù)對數(shù)據(jù)點進行擬合。
數(shù)據(jù)類型:兩個連續(xù)變量
使用場景:表達兩個連續(xù)變量的關(guān)系
表達形態(tài):一個變量代表橫軸,另一個變量代表縱軸
圖片
局限:不適用于相關(guān)性不強的數(shù)據(jù),也不適合比較多個類別。
氣泡圖
氣泡圖(bubble chart)是可用于展示三個變量之間的關(guān)系,一般可視為散點圖的變體。
使用場景:表達兩個變量在第三個維度之間的關(guān)系
表達形態(tài):氣泡圖與散點圖相似, 但加入了一個表示大小的變量,氣泡由大小指示相對重要的程度
圖片
局限:氣泡的大小不能沒有意義,且不適合比較多類別的更多維度。
對于更一般的情況,多個變量的數(shù)據(jù)可以劃分成離散型和連續(xù)型兩種。
三、多個離散變量的可視化
多個離散變量一般表達不同的類別,不同類別之間的關(guān)系一般包括:
- 類別標量大小
- 內(nèi)部組成
- 類別相對于整體的占比
- 類別之間的層次關(guān)系
- 類別之間的線性依賴
- 類別之間的多屬性對比
4.柱狀圖
柱狀圖(bar chart),又稱長條圖、條圖、條狀圖、棒形圖,是一種以長方形的長度為變量的統(tǒng)計圖表。
數(shù)據(jù)類型:類別數(shù)值
使用場景:跨類別的數(shù)量比較
表達形態(tài):使用長方條表示數(shù)據(jù),長度代表數(shù)量,可以是垂直方向的,也可以是水平方向的。
圖片
局限:不適合類別太多的場景,也不適合連續(xù)數(shù)據(jù)的表達。
堆積柱狀圖
堆積柱形圖(stacked bar chart)的特點是它能將每根柱子進行分割,可以顯示大類目下的細分類目占比情況。
數(shù)據(jù)類型:類別及內(nèi)部元素的數(shù)值
使用場景:表達不同類別的對比,包括各類別內(nèi)部的組成
表達形態(tài):堆疊的矩形來表示類別,里面的小方塊表示每個類別內(nèi)部的元素,小方塊的長度代表元素的值,堆疊而成矩形代表類別的值。
圖片
局限:每個類別內(nèi)的元素不能太多,一般不大于6。
5.多納圖
實際上,餅圖是更為常見的,英文為Sector Graph,又名Pie Graph。餅圖顯示一個數(shù)據(jù)系列 中各項的大小與各項總和的比例。多納圖(donut chart),是餅圖的一種變體。
數(shù)據(jù)類型:類別的占比。
使用場景:表達不同類別的百分比。
表達形態(tài):餅圖的另一種表達,每一個局部環(huán)代表了該類別的總體占比。
圖片
局限:不適合類別太多以及跨組比較。
6.樹狀圖
樹形圖(tree map)是樹的數(shù)據(jù)結(jié)構(gòu)的圖形表示形式,以父子層次結(jié)構(gòu)來組織對象,是枚舉法的一種表達方式。
數(shù)據(jù)類型:層次型的類別。
使用場景:表達數(shù)據(jù)的層級關(guān)系以及占比。
表達形態(tài):一般用線條和節(jié)點表示。這里給出的是一種變體,以嵌套的矩形表達數(shù)據(jù),矩形大小表達占比的值,另外,顏色可以表達額外的信息。
圖片
局限:不適合類別過多的場景, 也不適用于離散變量之間沒有層級關(guān)系的場景。
7.雷達圖
雷達圖(Radar Chart),也稱為蜘蛛圖,星圖,網(wǎng)圖,極坐標圖或Kiviat圖,是以從同一點開始的軸上表示的三個或更多個定量變量的二維圖表形式來顯示多變量數(shù)據(jù)的圖形方法。軸的相對位置和角度通常是無信息的。
數(shù)據(jù)類型:多變量的多個維度。
使用場景:表達復雜變量的整體性能,以及多個維度的整體特性。
表達形態(tài):多個軸代表多個維度,不同顏色線代表不同的變量,軸上的點組成的面積形狀代表整體衡量。
圖片
局限:不適用于低維場景,一般維數(shù)大于4,也不適用于變量太多的場景。
8.漏斗圖
漏斗圖(funnel chart)類似于漏斗的形狀,其中每個部分逐漸變窄。分段垂直排列,以顯示層次結(jié)構(gòu)。在漏斗圖中,每個分段對應(yīng)于順序過程中的一個步驟或階段。它們說明了數(shù)據(jù)點在各個階段中的進展。
數(shù)據(jù)類型:具有階段性的類別。
使用場景:流程的處理,例如銷售、轉(zhuǎn)化和客戶旅程等。
表達形態(tài):每個遞減的梯形代表一個類別的階段,每個梯形的比例寬度代表了該類別的值。
局限:不適合數(shù)據(jù)連續(xù)的場景,以及非單一順序流程。
四、多個連續(xù)變量的可視化
對于連續(xù)型的多變量,一般應(yīng)用于時間序列分析。
9.線狀圖
線狀圖(line chart)把特定時間單位內(nèi)的變量值以點的形式標在坐標系中,并連點成線。
數(shù)據(jù)類型:時間序列的數(shù)據(jù)。
使用場景:表達數(shù)據(jù)的趨勢。
表達形態(tài):點線形式,橫軸表達時間,縱軸表達數(shù)據(jù)的值。
局限:不適用于數(shù)據(jù)之間沒有關(guān)系或沒有邏輯順序。
面積圖
面積圖(area chart)是線狀圖的擴展,又稱區(qū)域圖,強調(diào)數(shù)量隨時間而變化的程度,也可用于引起人們對總值趨勢的注意。
數(shù)據(jù)類型:多個連續(xù)的變量。
使用場景:數(shù)據(jù)隨時間的大小或容量變化。
表達形態(tài): 現(xiàn)狀圖的變體,線與橫軸之間的面積強調(diào)了變量的體積或大小。
局限:不適用于多變量序列有交叉重疊的場景。
10.熱力圖
熱力圖(heatmap)又稱熱圖,以特殊高亮的形式顯示某一區(qū)域。對于一般網(wǎng)站而言,常見熱圖共有點擊熱圖、注意力熱圖、分析熱圖、對比熱圖、分享熱圖、浮層熱圖和歷史熱圖等七種。
數(shù)據(jù)類型:多個連續(xù)的變量。
使用場景:以顏色密度表達變量之間的關(guān)系,典型的是兩個變量之間的關(guān)系。
表達形態(tài):兩個變量分別是x、y軸,顏色深淺代表對應(yīng)點的值的大小。
。
局限:不適用于變量無關(guān)的場景,以及離散變量及其對比。
五、小結(jié)
在dashboard的設(shè)計中,有太多的可視化圖例可以選擇,而且很方便通過echart等前端庫來實現(xiàn)。
可視化表達的選擇方式依賴于所要呈現(xiàn)的數(shù)據(jù)及指標類型,這涉及一個相對簡單的數(shù)據(jù)建模過程。我們可以考慮是單變量還是多變量中的相關(guān)指標,然后根據(jù)數(shù)據(jù)是否連續(xù)型做進一步的篩選,進而選擇相對合適的可視化方法,本文梳理了10個常見的可視化圖例。當然,適用于多變量的可視化方法在一般條件下也可降維使用。