1 of 43

資料視覺化(6~9章)

@前端讀書會

上德 aka Thunder Boy, 2020/8/21

2 of 43

第六章將數量視覺化

第七章分佈的視覺化：直方圖和密度圖

第八章視覺化分佈：經驗累積分佈函數和Q-Q圖

第九章一次將多個分佈視覺化

本書總計29章，內容豐富大推！

3 of 43

長條圖(bar chart)

一組類別的數值（定性的量依據一個分類變數）視覺化
替代方案為點數和熱圖

4 of 43

常見問題

每個長條的標籤佔用大量的水平空間，常見的處理方式旋轉標籤但這種方式並不美觀

改良

5 of 43

分組長條圖

定性的量依據兩個分類變數而變化
上圖：關心的是「種族群體的收入水平差異（分別針對特定年齡組）」�註：作者不喜歡這張圖
下圖：關心的是「種族群體收入水平的總體模式」

6 of 43

分組資料將圖表拆開

分組圖表（前頁）中，位置很容易閱讀，但顏色需要費較多心力
將分組長條圖拆開的優點是可以避免顏色對照的心力
不過作者認為使用哪種方式是喜歡的問題（作者偏好拆開的方式）

7 of 43

堆疊長條圖

當堆疊長條所代表的數量加總之合是一個有意義的數量時會很實用
前例當中，年收入值中位數總和並不是一個有意義的值，因此不適合使用此圖。右圖合適範例為鐵達尼號中的乘客數量

8 of 43

點圖

長條圖的一個重要限制是他們必須從零開始，讓長條長度與所示的量成比例
對某些資料集的視覺呈現上會很模糊，以左下圖為例，眼睛會被吸引到長條的中間而不是未端。右下圖使用點圖視覺上可以變得更明確

9 of 43

熱圖

適用於非常大量的資料集
較難明確呈現確切數值，但在視覺呈現上非常卓越
右圖可以觀察出美國雖然較早普及使用網際網路，但是在2016年的使用率卻相對較低（排序條件為首次上升到20%以上的年份）

10 of 43

直方圖

特定變數在資料集當中之分佈的狀況（x軸為連續資料）
矩形寬度必需一致

11 of 43

直方圖矩形寬度改變視覺

如果矩形寬度太小視覺上會過於雜亂，主要趨勢可能被模糊
如果矩形寬度太大，則資料分佈中的較小特徵可能會效失（例如右圖中10歲左右的下降趨勢）

12 of 43

近年來直方圖常被密度圖取代

從18世紀起，直方圖一直是熱門的視覺化選項，因為很容易透過手工產生。近年代由於電腦的計算能力，直方圖越來越常被密度圖取代

13 of 43

密度圖的核密度估計

繪製適當的連續曲線來將資料的機率分佈視覺化，此曲線需要從資料中估計，最常用在這個估計過程的方法稱為「核密度估計」(kernel density estimation)
在核密度估計中，會使用名為帶寬(bandwidth)的參數控制

14 of 43

密度圖帶寬的選擇

如果帶寬太小，視覺上很亂
如果帶寬太大，資料分佈中較小特徵可能會效失

註：資料集的資料點愈多，密度圖通常非常可靠且資訊豐富。但是對於僅有幾個點的資料集來說，他可能會產生誤導

15 of 43

多個分佈視覺化 – 重疊直方圖（不良）

好幾組資料同時視覺化
「重疊直方圖」很容易和「堆疊直方圖」混淆→→看不出來長條是從顏色變化開始，還是從零開始？？？

16 of 43

重疊直方圖使用半透明（還是不良）

雖然有改善… 但看起來很像是三種顏色
總之就是不推

17 of 43

多個分佈視覺化 – 重疊密度圖

重疊密度圖通常沒有重疊直方圖的問題

18 of 43

將重疊密度圖拆分開來

某些時候重疊密度圖會因為線條接近視覺上不夠理想，將圖形拆分開可以比較容易比較
改使用總計數量做重疊比較

19 of 43

年齡金字塔（兩個單獨的直方圖）

如果為兩組資料，金字塔式的直方圖也是好的視覺化

20 of 43

多個分佈視覺化，密度圖通常比直方圖更好

21 of 43

經驗累積分佈函數(ECDF)

前面介紹的直方圖和密度圖，都是「對資料的解讀」，而非「資料本身的直接視覺化」
使用ECDF不需要像密度圖使用參數選擇，直接呈現所有資料
不常被使用，但受統計學家歡迎

22 of 43

有趣的例子

每個點代表一個學生，而線條則呈現了任何可能的分數所觀察到的最高學生排名
制定分數「等級邊界」時使用ECDF就很方便，此例中可以讓80分以上的學生獲得B、79以下的獲得C
如果分界點設為77分，則76分的學生可能會跟老師討價還價。而如果設為81分，80分的三位學生可能會來討價還價

23 of 43

… 跳過的小章節

章節 - 高度偏斜的分佈、分位圖。統計被當掉的我看不太懂所以就跳過了

24 of 43

多個分佈視覺化

較多數量的組別進行視覺化時，例如：一次呈現12個月份的氣溫分佈。前述介紹的直方圖及密度圖都不合適
合適的視覺化包括箱形圖、小提琴圖和脊線圖
使用「反應變數」(response variables)、及「分組變數」(grouping variables)來思考多個分佈視覺化

25 of 43

直軸的分佈視覺化

將平均值或中位數呈現為點，並透過誤差帶呈現平均值或中位數周圍的變化
右圖範例是常見的視覺化，但是是「不良」的方式
此視覺化移失大量的資訊，無法呈現真實的資料分佈方式

26 of 43

箱形圖

↓將資料劃分為四分位數

27 of 43

箱形圖常被小提琴圖取代

箱形圖是由統計學家John Tukey在70年代發明的，具有高度資訊量且易於手工
近年來由於電腦的計算能力，可以被小提琴圖取代，提供更加細緻的資料圖像，尤其是可以精確地呈現雙峰資料

28 of 43

小提琴圖

Y值起點和終點分別為資料的最小值和最大值
寬度為點密度

29 of 43

帶狀圖

小提琴圖明顯的缺點是可能使無資料的地方看起來有資料
直接將單個資料繪製成點，此視覺化稱為「帶狀圖」(strip charts)

30 of 43

帶狀圖使用抖動(jittering)將點展開

帶狀圖的點會有重疊在一起的問題
在x維度中添加一些隨機雜訊沿x軸將點展開，這種技巧稱為抖動(jittering)

31 of 43

Sina圖

結合帶狀圖及小提琴圖

32 of 43

脊線圖(1)

呈現隨著時間推移的分佈趨勢，脊線圖往往效果特別好

33 of 43

脊線圖(2)

34 of 43

脊線圖(3)

35 of 43

我的心得

36 of 43

寫得好啊！

然後…

來看看蛛思好了

37 of 43

蛛思案例：觀點聚類分析

我覺得這張圖做成橫向的是正確的設計，這樣標題文字空間擺放得很好
依照書裡面的建議，可以考慮把「長條圖」改為「點圖」

38 of 43

蛛思案例：熱詞分析

我覺得這張圖做成堆疊長條圖是ok的，但顏色的選擇和順序可能有點問題。在這裡情緒應該是可以視為「有序的離散資料」，應為正面→中立→負面
如果要檢視各別情緒數量就會不容易比較，這時候使用「分組長條圖」可能會比較適合

39 of 43

蛛思的情緒分析分佈討論

蛛思的情緒資料只有三種：「正面」、「中立」、「負面」，但這個分類應該是後端演算法計算結果再做分類的，如果後端能保留數值（連續性的），前端的視覺化就能做更豐富的變化
如情緒分數是連續性的，前頁的「熱詞分析」應該做成「小提琴圖」

40 of 43

其他案例：各類自付差額醫材價差倍數分佈

https://www.thenewslens.com/article/136880?fbclid=IwAR0IhFf6QFCX4MKlTbYmEusoncjX1t7J5AkCT5j0FN24ultoRnkgSCTLvVk

我覺得這個點圖蠻有趣的

41 of 43

蛛思案例：頻道聲量趨勢

蛛思這張圖主要呈現「趨勢」，所以我覺得設計是ok的
但我覺得可以參考前一張關鍵評論設計的點圖，可以換可思考方式：如果要呈現「分佈」，可以把時間維度拿掉，可用「點圖」來呈現聲量的分佈