連環15關,輕松玩轉數據可視化

5 評論 4874 瀏覽 135 收藏 17 分鐘

本文從數據間的這三點關系:比較、構成、分布、聯系進行講解,告訴大家如何能使數據可視化更高效。

大數據時代,數據驅動決策。處理不好龐大、復雜的數據,其價值將大打折扣。

那如何縮短數據與用戶的距離?讓用戶一眼Get到重點?讓老板為你的匯報方案鼓掌?

本文通過連環15關,層層深入,傳你數據匹配圖形神功,讓數據可視化更高效。

(注:以下數據基于公司業務,非真實數據)

無論數據總量和復雜程度如何,數據間的關系大多可分為三類:比較 / 構成 / 分布&聯系。

一、比較

基于分類 / 時間的數據對比,通常需用到比較型圖表。用戶通過圖表輕松識別最大/最小值,查看當前和過去的數據變動情況。

常見場景:哪個地區的收件量最多?今年的收入和去年相比如何……

連環15關,輕松玩轉數據可視化

條目少 – 柱狀圖

比較條目較少時,如5個地區收件量的對比,可選用柱狀圖表示。

連環15關,輕松玩轉數據可視化

▲柱狀圖

連環15關,輕松玩轉數據可視化

條目多- 條形圖

當條目較多,如大于12 條,移動端上的柱狀圖會顯得擁擠不堪,更適合用條形圖。一般數據條目不超過 30 條,否則易帶來視覺和記憶負擔。

連環15關,輕松玩轉數據可視化

▲條形圖

連環15關,輕松玩轉數據可視化

看趨勢 – 折線圖

當X軸為連續數值(如時間)且注重變化趨勢時,則適用折線圖。

連環15關,輕松玩轉數據可視化

連環15關,輕松玩轉數據可視化

▲折線圖

連環15關,輕松玩轉數據可視化

擴大差異 – 南丁格爾玫瑰圖

除柱狀圖外,有無更新穎的表現方式呢?那就屬南丁格爾玫瑰圖了。

連環15關,輕松玩轉數據可視化

▲南丁格爾玫瑰圖

由于扇形的半徑和面積是平方的關系,南丁格爾玫瑰圖會將數值之間的差異放大,適合對比大小相近的數值。它不適合對比差異較大的數值,因為數值過小的類目會難以觀察。

此外,因為圓有周期性,玫瑰圖也適于表示周期 / 時間概念,比如星期、月份。依然建議數據量不超過 30 條,超出可考慮條形圖。

連環15關,輕松玩轉數據可視化

雙向 – 雙向條形圖

前面的例子都是單維度比較,當比較正反兩類甚至更多維度的數據時,可試嘗試雙向條形圖,下圖為各大區的重點地區的收派件量的對比。

連環15關,輕松玩轉數據可視化

▲雙向條形圖

用顏色區分大區,空心/實心區分收件量和派件量,既能整體比較大區,又能詳細對比地區的情況

打怪升級,再加點難度。在雙向圖上再增加一個維度,如下表,比較 5 個地區的利潤及相應的收入和成本。請先思考一下,再下滑看推薦圖表。

連環15關,輕松玩轉數據可視化

▲業務數據

連環15關,輕松玩轉數據可視化

▲雙向條形圖(多維度)

通過圖形一眼就能看出深圳區的利潤低于廣州區,即使它的收入高于廣州區,但成本相對來說高于廣州區。

連環15關,輕松玩轉數據可視化

目標達成 – 子彈圖

實際業務中,常要考察指標的達成情況,如收入達標情況及所處區間(優、良、差),如下表,你會怎么可視化呢?動手畫一畫吧!

連環15關,輕松玩轉數據可視化

▲業務數據

連環15關,輕松玩轉數據可視化

▲子彈圖

子彈圖,因為像子彈射后帶出的軌道。相較于儀表盤,它能夠在狹小的空間中表達豐富的數據信息,在信息傳遞上有更大的效能優勢。

若還要比較4個季度的收入情況,只需用不同顏色區分。如下圖,一眼便知第二季度表現較好,而第一季度則不佳。

連環15關,輕松玩轉數據可視化

▲子彈圖

連環15關,輕松玩轉數據可視化

性能 – 雷達圖

對于一些多維的性能數據,如綜合評價,常用雷達圖表示。指標得分接近圓心,說明處于較差狀態,應分析改進;指標得分接近外邊線,說明處于理想狀態。

連環15關,輕松玩轉數據可視化

▲雷達圖

以上就是“比較”類的常用圖表

▼可歸納如下▼

連環15關,輕松玩轉數據可視化

此表并非一成不變的“鐵表”,相互之間還會串聯交叉,大家還需靈活應用。

二、構成

部分相較于整體,一個整體被分成幾個部分。這類情況會用到構成型圖表,如五大區的收件量占比、公司利潤的來源構成等。

連環15關,輕松玩轉數據可視化

單層 – 餅狀圖

第1關中,對比5個地區的收件量時用到了柱狀圖。若看占比情況,餅狀圖更合適。

連環15關,輕松玩轉數據可視化

▲餅狀圖

如果變成 17 個地區,會怎樣?

連環15關,輕松玩轉數據可視化

像不像彩色七星瓢蟲?

所以餅圖分類一般不超過 9 個,超過建議用條形圖展示。

除餅圖外,環形圖(甜甜圈圖)亦可表示占比,其差異是將餅圖的中間區域挖空,在空心區域顯示文本信息,比如標題,優勢是其空間利用率更高。

連環15關,輕松玩轉數據可視化

▲環形圖

連環15關,輕松玩轉數據可視化

分層 – 環形圖、旭日圖

對于管理層而言,需先把握大局和重點。比如大區負責人需一眼看到重點地區及重點分部的情況(如下圖),如何展示?

連環15關,輕松玩轉數據可視化

連環15關,輕松玩轉數據可視化

▲環形圖

連環15關,輕松玩轉數據可視化

▲旭日圖

這個叫旭日圖(感受到陽光了嗎?),逐層下鉆看數據,大區的重點地區及相應分部的構成情況一目了然。

連環15關,輕松玩轉數據可視化

累計趨勢 – 堆疊面積圖

接下來,看看數值構成隨時間變化的案例:第一大區(包含四個重點地區)近四年收入構成的趨勢要如何可視化?自己想一想,再下滑看推薦方案。

連環15關,輕松玩轉數據可視化

▲業務數據

連環15關,輕松玩轉數據可視化

▲堆疊面積圖

推薦方案是堆疊面積圖,可以展現分量(地區)對于總量(大區)的貢獻,并顯示總量(大區)的變化過程。需要說明的是,地區收入的起點并非從 y=0 開始,而是在下面的地區基礎上逐層疊加,最后組成一個整體。

連環15關,輕松玩轉數據可視化

累計比較 – 堆疊柱狀圖

如果將上圖X軸的標簽文字(即年份)和圖例(即地區)互換(如下圖A),用來看每個地區近四年的收入構成,用哪個圖更合適?

連環15關,輕松玩轉數據可視化

連環15關,輕松玩轉數據可視化

▲堆疊柱狀圖

是不是覺得都OK?那圖中 X1 有何含義?堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現累加值。差別在于,堆疊面積圖的 x 軸是連續數據(如時間),堆疊柱狀圖的 x 軸是分類數據。此案例中的 x 軸是非連續的分類數據,因此用 B 方案更適合。

連環15關,輕松玩轉數據可視化

累計增減 – 瀑布圖

若想表達兩個數據點間數量的演變過程,可使用瀑布圖。開始的一個值,在經過不斷的加減后,得到一個值。瀑布圖將這個過程圖示化,常用來展現財務分析中的收支情況。

連環15關,輕松玩轉數據可視化

▲瀑布圖

以上就是“構成”類常用圖表

▼可歸納如下▼

連環15關,輕松玩轉數據可視化

三、分布 & 聯系

通過分布 & 聯系型圖表能看到數據的分布情況,進而找到某些聯系,如相關性、異常值和數據集群。

常見使用場景:客戶的年齡段分布?單票成本與收件量的關系?

連環15關,輕松玩轉數據可視化

兩個變量 – 散點圖

仍以業務為例,下圖為全國網點的單票成本/收入分布情況。

連環15關,輕松玩轉數據可視化

▲散點圖

單單這樣看,可能看不出什么,如果加兩條平均線就不一樣了。

連環15關,輕松玩轉數據可視化

加了平均線,就知道哪些網點高于平均線,哪些低于平均線。但網點那么多,總不能逐個點擊查看是哪個大區的,給散點加上顏色后,就很有意義了。

連環15關,輕松玩轉數據可視化

通過此圖,可以看出哪些大區單票利潤較低,急需提升,比如廣泛聚集于右下角的第四大區,單票收入低于平均線,單票成本卻高于平均線。

連環15關,輕松玩轉數據可視化

三個變量 – 氣泡圖

大家都知道,網點總利潤除了和單票利潤有關,還和體量(即收件量)有關,用散點的面積大小表示收件量,就變成了氣泡圖。

連環15關,輕松玩轉數據可視化

▲氣泡圖

連環15關,輕松玩轉數據可視化

結合地圖 – 熱力圖

氣泡圖與地圖結合可演變為熱力圖。通過熱力圖,能看到哪些網點收派件量較多,需進行資源調配。

連環15關,輕松玩轉數據可視化

▲熱力圖

以上是 “分布&聯系”類的常用圖表

▼可歸納如下▼

連環15關,輕松玩轉數據可視化

小結

當我們拿到數據后,先提煉關鍵信息,明確數據關系及主題,再選擇合適的圖表進行可視化。希望下圖能給各位一些參考(結合可視化專家Andrew Abela的圖表選擇指南,進行了簡化調整)。

數據可視化設計只要多練習、多總結,總有一天會得心應手的!

連環15關,輕松玩轉數據可視化

 

作者:SF_UED,順豐科技用戶體驗設計部,簡稱SFUED (SF. Tech User Experience Design)是順豐科技的核心設計團隊,負責順豐相關產品的用戶體驗設計與研究。微信公眾號:SFUED

本文由 @SF_UED 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 像一些子彈圖,玫瑰圖,雙向條形圖可以用EXCEL做出來嗎

    回復
    1. 拿echarts代碼改改,然后放在原型生成的html代碼里面去

      來自安徽 回復
  2. 學習了

    回復
  3. 簡直了,感謝大神的歸納總結和分享

    回復
  4. 這個漲知識了

    來自北京 回復