數(shù)據(jù)可視化常常需要通過統(tǒng)計圖來展現(xiàn)，不同類型的統(tǒng)計圖有著不同的使用場景以及使用方法。

距離上一次投稿快9個月了（感謝那些給我評論的人，還有給我賞的人），那時候我剛畢業(yè)正在一家醫(yī)院里工作，后來還是想要做一名產(chǎn)品經(jīng)理。于是，在去年的中秋節(jié)我成功獲得了做醫(yī)療大數(shù)據(jù)產(chǎn)品的工作。剛?cè)肼毜臅r候心里特別忐忑不安，怕做不好這份工作，現(xiàn)在也會因為想懂而無從下手的各種技術(shù)變得焦慮。在這半年的時光里，我的工作基本是根據(jù)課題項目的需求畫原型，并且是大數(shù)據(jù)可視化的前端頁面設(shè)計，有時候?qū)㈨椖康男枨髢?nèi)容轉(zhuǎn)換到產(chǎn)品需求，再搭建好頁面結(jié)構(gòu)和框架就會頭疼好幾天。接著將各種統(tǒng)計指標呈現(xiàn)在頁面上，如何美觀而又一目了然地展示這些結(jié)果，并能清晰地實現(xiàn)課題項目的目標，以及完整、直觀、生動地呈現(xiàn)產(chǎn)品要表達的“故事”，這是可視化和交互設(shè)計的重點內(nèi)容。經(jīng)過幾個項目的實踐，我想總結(jié)一下目前自己對可視化圖表和交互設(shè)計上的一些心得，希望收到大家的指點。

回憶以前學(xué)習和制作的統(tǒng)計圖，都是最基本的只有X軸、Y軸的單因素變量數(shù)據(jù)的靜態(tài)圖。現(xiàn)在發(fā)現(xiàn)大數(shù)據(jù)之美就在于可以選擇多種維度、多種角度去發(fā)現(xiàn)數(shù)據(jù)變化規(guī)律，并通過比較分析，又能得到很多不同的結(jié)果。

數(shù)據(jù)可視化，常用統(tǒng)計圖來展現(xiàn)，包括折線圖、柱狀圖、餅圖、扇形圖、散點圖、雷達圖、統(tǒng)計地圖、儀表盤、漏斗圖、字符云等，這些類型經(jīng)過不同的定義和交互設(shè)計，能夠衍生出多種統(tǒng)計圖的表達形式。但是想要熟練應(yīng)用和衍生出統(tǒng)計圖，需要以清晰掌握各類型統(tǒng)計圖的含義和作用為前提，才能不僅滿足需求，更能滿足審美、及行業(yè)或?qū)W科的特性。

根據(jù)我的理解，我將統(tǒng)計圖分成以下5個方面來闡述我的一些工作中的心得體會。

一、折線圖

1. 基礎(chǔ)圖形展示

圖1是最基本的折線圖，如果將折線畫的光滑一點，就變成一條曲線，這時候我們也把它叫做曲線圖，如圖2。

圖1

圖2

2. 作用和價值

不論是折線，還是曲線，一眼看去，腦海就會想接下去的線條會向上，還是向下呢？

因此，折線圖的價值就在于呈現(xiàn)一個或者多個指標變量的發(fā)展和變化趨勢，并且能直觀的知道低谷值和高峰值。例如：股市漲跌、心律變化等場景就可以應(yīng)用折線圖。

3. 變量要求和用法

既然是反應(yīng)趨勢，且畫的線是連續(xù)的，那么自變量一定是可以切分相同間隔的連續(xù)變量或者周期變量。

4. 依據(jù)需求編故事

根據(jù)折線圖的作用和價值，故事的開頭自然是“隨著時間的變化”、“伴隨著年齡的增長”、“在這一段時間，某變量出現(xiàn)了低谷值和高峰值，根據(jù)標準區(qū)間可以進行告警”等。

5. 我的衍生折線圖及交互設(shè)計

如果有指標變量的單位或定義不同，也可以在右邊同樣加另一個Y軸，前提是不進行該指標變量與其他指標變量的比較，只是單獨想看該變量的自身發(fā)展趨勢。圖3，三個因變量單位和定義是一致的（只有一個縱軸），那么在同一年份，可以比較這三者數(shù)值大小。

圖2，將右邊的折線圖看作成一個畫板，點擊左邊的變量就可以出現(xiàn)該指標變量歷年情況，左邊框里統(tǒng)計的是總數(shù)。因此該衍生圖是一種總分效果圖，我覺得交互設(shè)計特別棒的點在于：一張簡單的圖和數(shù)據(jù)，可以像剝洋蔥一樣一層一層的扒開，并且每一層都有不同的內(nèi)容。

二、柱狀圖

1. 基礎(chǔ)圖形展示

柱狀圖又稱條形圖、直方圖、柱形圖，以每個等寬長方形的長度不同來呈現(xiàn)因變量（統(tǒng)計指標）的數(shù)值大小的一種統(tǒng)計圖。通過對數(shù)據(jù)的分類組合，可以出現(xiàn)多個長方形為一組、且每組內(nèi)的指標變量一致的柱狀圖，如圖6。

圖5

圖6

2. 作用和價值

看到柱狀圖，給人的感覺就是想把每條色塊（長方形）進行對比，看看誰高誰低。因此，柱狀圖最大的價值就在于它能夠顯示各組之間的比較情況。

然而如果自變量特征同于折線圖，那么柱狀圖也可以呈現(xiàn)數(shù)據(jù)變化趨勢。這時候就出現(xiàn)和折線圖相同的功能，因此連接每個長方形頂部中點，即能馬上可以做出折線圖。我們高中學(xué)過的正態(tài)分布，也用到柱狀圖來解釋。

3. 變量要求和用法

柱狀圖中每個長方形代表了一組數(shù)據(jù)，即因變量數(shù)據(jù)。每個長方形之間是不會重疊的，會保持良好的距離。因此與折線圖不同的是，柱狀圖的自變量類型可以是分類不連續(xù)的。比如圖6，橫軸的文字是對這三個長方形組成數(shù)據(jù)進行的定義。

4. 依據(jù)需求編故事

突然想到在做畢設(shè)的直方圖時候，如果實驗結(jié)果沒有你想要的那樣，那么故事編為：“雖然這兩組數(shù)據(jù)在統(tǒng)計學(xué)上沒有顯著性差異（P>0.05），但是在數(shù)值上兩者是有差異的，可能由于混雜因素或者系統(tǒng)帶來的誤差，導(dǎo)致并沒有出現(xiàn)顯著性差異。某組的指標在數(shù)值上更多或少，某干預(yù)措施可能對于改善/提高什么是有幫助的，仍需要重復(fù)實驗，并控制誤差?！?/p>

5. 我的衍生統(tǒng)計圖和交互設(shè)計

柱狀圖的衍生方向特別多，交互設(shè)計上也是豐富多彩。根據(jù)我目前做過的項目需求，列出5種不同的使用場景。

1）組數(shù)不多

側(cè)重全部展示每個組的數(shù)據(jù)，每組數(shù)據(jù)結(jié)果在需求上都重要，可以一目了然所有數(shù)據(jù)的大小。這時候無論從美觀，還是需求展示上考慮，組數(shù)不宜過多。例如：

圖7，自變量為地區(qū)，展示每個地區(qū)的指標數(shù)據(jù)。

圖8，自變量為各種費用名稱。頂部的時間軸可以拖動展示每一年的費用情況。

2）組數(shù)很多，但是在需求上每組指標數(shù)據(jù)我們可能只需要把握topN前面的數(shù)據(jù)結(jié)果。

如圖9，自變量為癌癥名稱和地區(qū)，展示了排列前面的某地區(qū)5年生存率較低的癌癥。

3）組數(shù)多，并且還想引入其他變量進行比較，如時間、年齡、性別等，展示各組指標數(shù)據(jù)升降變化。

如圖10，比較兩個年份，不同地區(qū)，發(fā)病率最高的肺癌類型。這張圖描述的故事有：從地區(qū)角度看，可以展示每年每個地區(qū)發(fā)病率最高的肺癌類型，用以解決“某年某地區(qū)肺癌中發(fā)病率最高的類型”，從而對于該地區(qū)的疾控中心可以根據(jù)發(fā)病率最高的類型進行精準干預(yù)；而從時間出發(fā)，可以比較兩個年份之間某地區(qū)發(fā)病率最高的肺癌類型的發(fā)病是升高還是下降，用以解決評價干預(yù)效果等需求。

圖11想要表達的故事和圖10一致，只是變量不一樣。

4）細分因變量（將指標進行分類）

如圖12，把每個年份對應(yīng)的橫軸區(qū)域想像成泳道，在泳道內(nèi)有不同的色塊，不同的色塊代表指標（用藥總費用）的分類情況，并且每個色塊長方形的等寬，長度依據(jù)費用占比來決定。該柱狀圖，不僅可以比較總用藥費用隨著時間的變化，還可以看到這筆錢的大頭去了哪里，也可以看到每一年用的藥物比重變化情況。

5）柱狀圖交互

如圖13，我把交互設(shè)計在時間上（當然可以設(shè)計在很多地方，根據(jù)需求來），通過點擊時間，可以出現(xiàn)下面的信息。這里發(fā)現(xiàn)交互設(shè)計的另一個優(yōu)點，就是可以精煉統(tǒng)計圖的信息量。圖13上面的柱狀圖可以不用標注縱軸的尺度，只用看每個時間段各類指標結(jié)果的數(shù)值大小和變化，具體想要查看具體數(shù)值，我們可以采用點擊或其他觸發(fā)動作直接出一個列表（一張列表，連色塊的定義都有了）。

三、餅圖

1. 基礎(chǔ)圖形展示

餅圖通過將一個圓餅按照數(shù)據(jù)分類的占比劃分成多個扇形區(qū)塊，整個圓餅代表所有分類數(shù)據(jù)的總和，每個扇形區(qū)塊的弧度由該分類數(shù)據(jù)占總數(shù)的比值而定，所有扇形區(qū)塊的占比加起來等于100%。

圖14

2. 作用和價值

餅圖很像切蛋糕，整個蛋糕為總量（100%），而蛋糕上被切成幾塊，每塊的大小，由多少人吃，每個人能吃多少決定。因此，餅圖的價值在于能夠快速了解分類數(shù)據(jù)的占比情況，可以觀察占比多的是哪類數(shù)據(jù)，哪類數(shù)據(jù)占比小，可以忽略不計。

3. 變量要求和用法

餅圖的變量需要能夠按照某個維度，進行分類，也就是餅圖代表的是一種分類資料的占比統(tǒng)計。

4. 依據(jù)需求編故事

根據(jù)餅圖的作用和價值，故事可以有：“下個月減少某方面的開支，增加某方面的投資“；”一半以上的單身女性選擇婚前自己買房，出現(xiàn)了新的社會現(xiàn)象”等。

5. 我的衍生統(tǒng)計圖與交互設(shè)計

環(huán)狀餅圖和半徑不同的餅圖，在日常工作學(xué)習中會經(jīng)常看到。其他的有將每個扇形區(qū)塊進行形狀變形的餅圖，例如花瓣餅圖；還有限定角度范圍的餅圖，例如圖18。

圖17

圖18

四、漏斗形

1. 基礎(chǔ)圖形展示

漏斗圖由高度相同的等腰梯形組成，自上而下的排列是根據(jù)一定的邏輯順序排列的，比如：用戶留存量、用戶轉(zhuǎn)化率、推進業(yè)務(wù)的完成情況等。梯形的面積由該梯形所對應(yīng)的變量數(shù)據(jù)決定。

圖19

圖20

2. 作用和價值

顧名思義，漏斗圖的作用和漏斗類似。生活中看到的沙漏，一開始漏斗里是滿滿的沙子，隨著時間，沙子慢慢漏到了下面，直到?jīng)]有為止。因此，漏斗圖的價值在于呈現(xiàn)一件事發(fā)展狀況的邏輯順序，每到一個時間點或者任務(wù)環(huán)節(jié)或其他，這件事變化如何。從整個漏斗圖可以直觀地看出哪個時間點或者任務(wù)環(huán)節(jié)上出現(xiàn)了問題，漏斗圖的最底部也可以看出該事件最終使以什么狀態(tài)結(jié)束。從而找出問題所在，發(fā)現(xiàn)可優(yōu)化的地方。

3. 變量要求和用法

漏斗圖的變量類型一定是有邏輯順序關(guān)系的，這種關(guān)系還是一種流程上的層級關(guān)系，比如時間順序、事情發(fā)展順序等，適用于事件流程比較規(guī)范、環(huán)節(jié)多、周期長的單流向分析。

4. 依據(jù)需求編故事

根據(jù)漏斗圖的作用和價值，故事會有：“用戶到底在哪個頁面上離開的多，在哪個頁面上停留的多”；“各個招聘環(huán)節(jié)上，哪個環(huán)節(jié)上淘汰的人較多”；“項目進展到最后，哪個環(huán)節(jié)上可以做優(yōu)化”。

5. 我的衍生統(tǒng)計圖和交互設(shè)計

圖21，因為對于癌癥的治療效果評價，要用生存率作為指標，并且每一年的存活的人數(shù)肯定是在遞減的，因此我選擇漏斗圖。通過這個圖可以看整個癌癥人群的生存率變化，也可以分性別、年齡段觀察癌癥的生存率變化。

圖22，漏斗圖的形狀改變了，將等腰梯形設(shè)計成圓形，但是它的作用和漏斗圖一致，當然它也可以有其他用法。因此，統(tǒng)計圖的應(yīng)用脫離不了它的基本使用規(guī)則，但是通過不同角度定義可以衍生出在這個基本用法上的其他用法。

五、儀表盤

1. 基本圖形展示

儀表盤圖表就像汽車的速度表一樣，有一個圓形的表盤及相應(yīng)的刻度，有一個指針指向當前數(shù)值?？潭扰c指標變量所定義的類型有關(guān)，如圖23，因為是率（完成率），構(gòu)成比的關(guān)系，那么刻度的最大值是100%；如果是將指標變量劃分成一種等級，如圖24，那么按照順時針方向?qū)⒌燃墢牡偷礁吲帕小?/p>

圖23

圖24

2. 作用和價值

儀表盤是一種擬物化的表現(xiàn)方式，就像寫作時候用的修辭手法，可以更生動、更直觀、更容易被人們所理解和記住。

我們可以聯(lián)想到生活中遇到的汽車儀表盤、家里的水表、溫度表等，汽車儀表盤可以顯示當前的車速；水表可以顯示當前的用水量；溫度表可以顯示當前的氣溫，因此儀表盤的最基本的價值在于它能呈現(xiàn)某指標變量當前數(shù)值。往往在應(yīng)用的時候還會對指標變量數(shù)值進行等級劃分，從而了解當前數(shù)值在總體上處于什么樣的狀態(tài)，以根據(jù)這種狀態(tài)采取一定的措施，比如當前的溫度該穿什么衣服。此外，儀表盤還有實時監(jiān)測的作用。

3. 變量要求和用法

儀表盤常見的指標變量類型是分類資料的占比情況，如合格率，以及進度類型資料，如完成率、上傳率。

此外還可以度量當前指標數(shù)值在總體中的狀態(tài)，常用到四分位法，將總體的數(shù)據(jù)從小到大排列，然后將四分位（25%、50%、75%、100%）上的數(shù)值計算出，最后根據(jù)這些數(shù)值進行等級劃分。

目前我接觸到的指標是患者當前的健康風險等級，患者的健康風險根據(jù)人群的健康風險值四分位數(shù)劃分的等級，觀察他的健康風險值在哪個等級上。

4. 依據(jù)需求編故事

根據(jù)儀表盤的作用和價值，故事的時間不是從很久很久以前，而應(yīng)該是“當前”“現(xiàn)在”“此時此刻”“當前的數(shù)值，判斷當前的狀態(tài)，根據(jù)狀態(tài)采取相應(yīng)的措施”。

5. 我的衍生統(tǒng)計圖和交互設(shè)計

圖25，健康分險指標，沒有用儀表盤的形狀，但是作用原理和儀表盤一致。此圖的做法就如5.3里所闡述的。

圖26，上傳率指標，可觀察每個業(yè)務(wù)類型數(shù)據(jù)上傳的情況。

六、散點圖

1. 基本圖形展示

散點圖，由X/Y軸和許多的點構(gòu)成，圖上的點是根據(jù)坐標值（X，Y）橫確定的，數(shù)據(jù)點會比較多。

圖27

2. 作用和價值

1）推斷變量關(guān)系、剔除異常數(shù)據(jù)：

散點圖的價值在于根據(jù)每個點的分布情況，推斷和假設(shè)所有點的變量存在什么關(guān)系，主要的關(guān)系分為：正相關(guān)、負相關(guān)、不相關(guān)、線性相關(guān)、指數(shù)相關(guān)等，這時候我們就可以根據(jù)散點圖剔除異常數(shù)據(jù)，將正常的數(shù)據(jù)進行分析。這時候根據(jù)相關(guān)性可以建立一些公式。

2）充分展示每個數(shù)據(jù)：

如果不關(guān)注變量間的關(guān)系，而是觀察個體的數(shù)值在總體中的表現(xiàn)情況，比如占比。那么散點圖就衍化成氣泡圖，氣泡大小由占比情況決定。

3. 變量要求和用法

若是為了推斷自變量和因變量間的關(guān)系，因此首先需要數(shù)據(jù)量多。

若是展示個體表現(xiàn)，那么變量也要是一種分類資料，以求得分類占比情況。

4. 依據(jù)需求編故事

根據(jù)散點圖的作用和價值，故事應(yīng)該會有推測和假設(shè)的意圖“增加某因素，會增加某結(jié)果的發(fā)生（Y=kX+t）”；“隨著時間的過去，傷痛會淡去的（Y=-kX+t）”；“越努力，越幸運（Y=kX²）”。

5. 我的衍生統(tǒng)計圖和交互設(shè)計

目前，我應(yīng)用的是散點圖衍化另一種圖，就是氣泡圖，展示每個數(shù)據(jù)點的情況。氣泡圖可以引入的變量很多，從氣泡的大小、氣泡的顏色來定義，同時可以對每個氣泡的具體情況做交互設(shè)計，展示更多維度的數(shù)據(jù)情況。這時候可能也會聯(lián)想到“字符云”的功能，和圖28 類似。

七、地圖

利用地圖來統(tǒng)計變量數(shù)值，從而解決問題的，我聯(lián)想到了流行病學(xué)經(jīng)典案例——1854年，John Snow利用標點地圖法對倫敦西部西敏市蘇活區(qū)霍亂爆發(fā)的研究，最后根據(jù)水泵的位置，確定霍亂是經(jīng)水傳播的，從而控制了霍亂。因此地圖形式的統(tǒng)計圖價值在于，能夠為某區(qū)發(fā)生某件事（指標變量）的分布規(guī)律提供強力的證據(jù)。

常見的地圖統(tǒng)計圖，有地圖加氣泡的統(tǒng)計圖、地圖加熱力圖的統(tǒng)計圖、地圖等級統(tǒng)計圖等。

圖30

圖31

八、雷達圖

雷達圖也是一種擬物表現(xiàn)手法的統(tǒng)計圖，圖形類似蜘蛛網(wǎng)，圖上的點就像是蜘蛛們從網(wǎng)的中心出發(fā)爬到自己的位置休息。常見的雷達圖會用在評價表上，比如心理學(xué)評價一個人的性格、職業(yè)傾向、個人能力等特征。

此外，雷達圖的功能可以等同于餅圖，各軸上的點表示占比；可以等同于折線圖，各軸上的點表示該指標變量的數(shù)值。如果有兩組以上的數(shù)據(jù)，呈現(xiàn)在雷達圖上，可以比較它們在哪個指標變量上出現(xiàn)差異。個人認為，雷達圖最有價值的地方就是用于評價/評估能力、性能、特性等狀況。

因為雷達圖是一種多邊形，邊不能太多了，太多的話，雷達圖要畫的特別大，才能把變量值展現(xiàn)地清楚，所以指標變量的分析維度太多，不適合用雷達圖。

圖33

九、其他

其他的統(tǒng)計圖還包括樹形圖、關(guān)系圖（如圖33順位變遷圖）、箱形圖等二維圖形，還有用3D展示的統(tǒng)計圖對于指標數(shù)據(jù)結(jié)果的展示更富有表現(xiàn)力。希望以后自己能學(xué)習和應(yīng)用，也希望自己也能在基礎(chǔ)統(tǒng)計圖上衍生出新的統(tǒng)計圖，更希望自己今后能學(xué)習掌握更多的工具，輸出自己的心得體會。

圖34

以上就是我的大數(shù)據(jù)可視化初體驗，有很多不足，繼續(xù)深入學(xué)習吧。

十、總結(jié)

統(tǒng)計圖千變?nèi)f化，同一個統(tǒng)計圖，經(jīng)過不同的設(shè)計和定義，就可以出現(xiàn)新的圖形和展現(xiàn)方式。

但是每個統(tǒng)計圖都有自己獨特作用和使用場景，這種獨特之處才是它最有價值的地方，因此根據(jù)需求，挖掘數(shù)據(jù)指標變量的關(guān)系，才能合情合理的使用最佳的統(tǒng)計圖。前端的展示也是豐富多彩，經(jīng)過不同的觸發(fā)動作，不僅可以深度剖析數(shù)據(jù)，還可以精簡統(tǒng)計圖的展示效果。

最后，更想說大數(shù)據(jù)特別偉大，比如海量的醫(yī)療大數(shù)據(jù)，如果不去挖掘，它們就沉睡在那里，只是每天在數(shù)量上的不斷增加；但是經(jīng)過大數(shù)據(jù)技術(shù)，可以研發(fā)很多的功能產(chǎn)品，回饋各角色與醫(yī)療相關(guān)的人。

本文由 @果凍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議