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