讀書筆記 - 資料視覺化常用圖表整理

過年期間跟圖書館借了一批課外讀物，推薦其中這本：

優點是淺顯好讀，連我這種資料視覺化門外漢也能順順翻閱完。書裡圖表範例的設計及質感很好，看起來非常舒服。

書裡舉了許多實例，教你何種設計叫好，怎樣算醜，哪種叫糟，以及如何會搞砸，一目了然。

其中我最愛第五章，作者彙整了常用的數據分析圖表，儼然是套資料視覺化百科圖鑑。就算這輩子不一定有機會用到，能增廣見聞充實素養，想必也是極好的。

整理這篇心得時發現作者 Claus O. Wilke 已把整本書放在網路上(真是佛心來著，膜拜~)，這篇文章的圖例都引用自該網站。

以下我將書中介紹到圖表列舉成清單，整合說明跟圖例。說明部分我偷懶，交給 LLM 看圖生成(提示詞如下)再人工修潤，由於僅作個人回憶備忘，恕不保證精準及專業性，有興趣深入了解的同學請自行參考原作。

你是一個資料視覺化專家，現在要開始一連串的圖表說明任務，
稍後使用者會上傳照片，請識別每張上傳照片中的圖表，條列說明圖表名稱及簡短介紹。
範例： 1. 累積密度圖：展示數據的累積分布情況，橫軸表示數據範圍，縱軸表示累積頻率。 

資料視覺化圖鑑來惹...

1. 長條圖（垂直）：展示不同項目的值，橫軸表示不同項目，縱軸表示數據值。
2. 長條圖（水平）：同垂直長條圖，改橫向表示。
3. 散點圖：展示兩個變量之間的關係，每個點代表一個數據樣本，橫軸和縱軸分別表示兩個變量的值。
4. 分組長條圖：用於比較多個類別和子類別的數據，將不同群組的條形排列在一起，便於橫向比較。
5. 水平分組長條圖：與分組長條圖類似，但條形以水平方式排列。
6. 堆疊長條圖：將數據堆疊在同一條形上，用以顯示每個部分對整體的貢獻。
7. 水平堆疊長條圖：堆疊的長條以水平方式排列。
8. 熱圖：使用顏色表示數據值大小，通常以網格形式顯示，適合展示兩個軸變量之間的關係。
9. 直方圖：常用於展示數據的分布情況。
10. 密度圖：用來展示數據的概率密度分布，通常比直方圖平滑。
11. 累積密度圖：展示數據的累積分布情況，橫軸表示數據範圍，縱軸表示累積頻率。(較難解讀)
12. 分位圖：比較兩個分布的分位數，可以用於檢查數據是否符合特定分布。(較難解讀)
    
13. 箱形圖：顯示數據的分佈情況及其異常值。
14. 小提琴圖：結合箱形圖和密度圖，展示數據的分佈情況。
15. 帶狀圖：顯示數據點的分散情況，可以看出數據的密度。
16. Sina圖：類似帶狀圖，但每個點加入隨機抖動，避免重疊。
17. 堆疊直方圖：顯示數據在不同區間的分佈情況，數據可分組顯示。(較難解讀)
18. 重量密度圖：顯示數據的概率密度分佈。
19. 背線圖：顯示多組數據的分佈情況，每組數據以不同顏色顯示。(可有效替代小提琴圖)
20. 圓餅圖：顯示整體中各部分所佔的比例。每個區塊的面積代表其比例大小。
21. 長條圖：使用矩形條來表示數據，條的長度代表數據的大小。一般用於比較不同類別的數據。
22. 長條圖（水平）：這是一種水平方向排列的長條圖，用來顯示數據的比較。條的長度代表數據的大小。
23. 堆疊長條圖：這是一種長條圖，其中每個長條被細分成數個部分，各部分累加起來表示總量。用於顯示總量及其組成部分。
24. 多重圓餅圖：用於比較多組比例數據的圓餅圖，每個小圓餅代表一組數據。(空間利用率不佳)
25. 分組長條圖：用於比較多組數據的長條圖，各組數據以不同長條顏色或樣式呈現。(條件數量適中時表現佳)
26. 堆疊長條圖：用於顯示多組數據的總和和組成部分，各組數據以堆疊方式呈現在同一長條上。(適用大量條件)
27. 堆疊密度圖：用於顯示數據隨時間或其他連續變量的變化，顯示各部分數據的密度分佈。(適用連續數量變化)
28. 馬賽克圖：展示多組比例數據的圖表，通過矩形塊的面積來表示數據大小，適合用於比較多個分組變數。
29. 樹狀圖：用於展示分層結構數據，通過矩形塊的嵌套來表示不同層級和比例關係，適合用於視覺化分層數據。
30. 平行集：展示多變數數據的關係，通過一系列平行的線條來表示數據流動和變化，適合用於分析多變量之間的相互關係。
    
31. 散佈圖：展示兩個變數間的關係，通過點的分佈來表現數據的趨勢和集中情況。
32. 泡泡圖：類似散佈圖，但增加了一個變數，通過泡泡的大小來表示第三個變數的數據量，適合展示三個變數之間的關係。
33. 成對散佈圖：展示兩個變數的成對比較，通過點和對角線來表示數據的相關性。
34. 滑坡圖：展示多個數據點在不同條件下的變化，通過線條連接各點來表示數據的變動趨勢。
35. 密度輪廓：展示數據點的分佈密度，通過輪廓線來表示高密度區域和低密度區域，適合用於大數據量的視覺化。
36. 2D箱圖：展示數據的分佈情況，通過矩形格子來表示數據點的集中度和分佈範圍，適合比較多組數據。
37. 六角箱圖：類似於2D箱圖，但使用六邊形格子來表示數據密度，提供更平滑的視覺效果，適合大數據集。
38. 相關圖：展示多個變數之間的相關性，通過圓形大小和顏色來表示相關係數，適合分析多變數的相關關係。
39. 線圖：展示數據隨時間或其他連續變數的變化趨勢，通過連接數據點的線條來顯示變化趨勢。
40. 連接散佈圖：將散佈圖中的數據點通過線條連接起來，展示數據點之間的連續性和變化趨勢。
41. 平滑線圖：在散佈圖的基礎上添加平滑線，展示數據的整體趨勢和波動情況，有助於識別趨勢和模式。
42. 地圖：展示地理區域及其邊界，通常用於標識不同地區的位置和範圍。
43. 分層設色圖：通過不同顏色和色調來表示地理區域中的數據變量，例如人口密度或經濟指標。
44. 變形地圖：也稱為卡通地圖，通過拉伸或壓縮地理區域來反映數據變量的大小或重要性，例如選舉結果或經濟數據。
45. 統計熱圖：使用顏色強度來表示數據值的大小或頻率，適合展示多個地理單元的數據比較，例如各州的病例數或銷售數據。
    
46. 誤差線圖：展示數據的估計值及其不確定性，通過誤差線來表示數據的變動範圍。
47. 誤差線圖（柱狀圖）：在柱狀圖中添加誤差線，展示每個數據點的估計值及其不確定性。
48. 2D誤差線圖：展示兩個變數間的關係，並通過誤差線表示每個數據點的變動範圍和不確定性。
49. 分級誤差線圖：展示不同分組數據的估計值及其不確定性，通過誤差線來表示每個分組的變動範圍。
50. 信賴條圖：展示數據的不確定性範圍，通常以水平條形圖形式呈現，橫軸表示數據範圍。
51. 眼圖：合併小提琴圖和箱形圖，展示數據的分布情況，橫軸表示數據範圍。
52. 半眼圖：類似眼圖，但只展示一半，強調數據的分布和集中情況。
53. 分位點圖：以點的形式展示數據的分布情況，每個點代表一個數據點，橫軸表示數據範圍。(不如小提琴或背線圖易讀)
    
54. 信賴帶圖：展示數據的不確定性範圍，通常以帶狀圖形式呈現，帶的寬度表示信賴區間的範圍。
55. 分級信賴帶圖：類似信賴帶圖，但展示多個信賴水平的範圍，帶的顏色或透明度表示不同的信賴水平。
56. 擬合取樣：展示多條擬合線，以顯示數據的變異性和不確定性，通常用於比較多個模型或取樣結果。
    

最後補上本次另一大收獲，書裡提供好幾套好看的圖表配色，並有說明使用方式，收藏於此方便日後使用。

1. 區分群組的顏色（質性顏色）：

• Okabe Ito 顏色組合
• ColorBrewer Dark2 顏色組合
• ggplot2 預設質性顏色組合

2. 表示數據值的顏色：

• 單色漸層（例如深藍到淺藍）
• 多色漸層（例如深紅到淺黃、深藍經過綠到淺黃）
• 例子：ColorBrewer Blues、Heat 和 Viridis 顏色組合

3. 表示數據值偏離中心點的顏色（雙向顏色）：

• 棕色到藍綠色 CARTO Earth
• 粉色到黃綠色 ColorBrewer PiYG
• 藍色到紅色 Blue-Red

4. 突顯特定元素的顏色（重點顏色）：

• 由柔和的基礎顏色與較亮、較暗或飽和的重點顏色組成
• 基礎顏色可用灰階或低飽和度的顏色
• 例子：取自 Okabe Ito 顏色組合或 ColorBrewer 的重點顏色組合

【同場加映】順便練習上傳照片給 LLM，請它用 Python 重現書中的圖表，最終調校的 Prompt 如下：

你是一個資料視覺化專家，請識別使用者上傳照片中的圖表，產生一段 Python 程式碼重現相同的圖表效果。
請遵循以下指示：
1. 圖表不需要 Legend
2. 加上字型設定，確保中文可正確顯示
   plt.rcParams['font.sans-serif'] = ['Microsoft JhengHei'] 
   plt.rcParams['axes.unicode_minus'] = False
3. 至少三組資料，資料值儘可能重現圖表上的資料分佈
4. 資料組使用以下色碼，並力求顏色協調
    #4B3B2F, #6A5634, #6F5831, #735739, #8B7550, #8E7756, #A89568, #BAA98D, #D1C5B2
5. 圖表大小為 (figsize=(3, 2)
6. 不要 xlabel , ylabel, xticks, yticks
7. 若有需要，用 edgecolor='white', linewidth=2 產生間隙

其中一個程式範例如下，幾乎都成功重現了。興奮之餘也帶著幾分害怕，程式老鳥的優勢正在快速消失...

import matplotlib.pyplot as plt
import numpy as np

# 設定字型以顯示中文
plt.rcParams['font.sans-serif'] = ['Microsoft JhengHei']
plt.rcParams['axes.unicode_minus'] = False

categories = ['A', 'B', 'C']
data1 = [4, 7, 1]
data2 = [2, 6, 4]
data3 = [5, 3, 8]

bar_width = 0.2
index = np.arange(len(categories))

# 顏色設定
colors = ['#4B3B2F', '#6A5634', '#8B7550']

# 繪製分組長條圖
fig, ax = plt.subplots(figsize=(3, 2))
bars1 = ax.bar(index, data1, bar_width, color=colors[0], edgecolor='white', linewidth=2)
bars2 = ax.bar(index + bar_width, data2, bar_width, color=colors[1], edgecolor='white', linewidth=2)
bars3 = ax.bar(index + 2 * bar_width, data3, bar_width, color=colors[2], edgecolor='white', linewidth=2)

# 標題和標籤
ax.set_title('分組長條圖')
ax.set_xticks(index + bar_width)
ax.set_xticklabels(categories)

plt.show()

上述八個圖表程式範例我放上 Colab 了：資料視覺化圖表練習.ipynb，而放上 Colab 時習得新技巧：Colab 進行matplotlib繪圖時顯示繁體中文。