作者：彭其捷（http://visualization.tw/） --- 演講介紹：現在的人每天都在接受資訊，各類的訊息如果能透過視覺化的方式進行包裝，將能更容易被一般人所理解與接收；然而良好的資料視覺化成果，絕對不是單純用 Excel 單鍵生成圖表即可，而是有許多的設計技巧可以搭配；希望透過本次的機會，分享一些資料視覺化的概念、技巧、工具、案例、學理等等，帶領同學們更認識資料視覺化的主題。

1. 資料視覺化與我們的生活
彭其捷
http://visualization.tw/

2. 2

3. 講義版權所有：彭其捷（http://visualization.tw/）
歡迎隨時線上提問｜皆可拍照錄影
https://app.sli.do/event/zrafgh3l
ps. 拍照、攝影
錄影：皆 OK
ps. 後續會提供
部分簡報給同學
們
3

4. 聽過資料視覺化（Data
Visualization）的同學？
4

5. 有 Coding 過資料視
覺化的同學？
5

6. 有用過 Excel 的同學？
6

7. 這是一張資料視覺化圖表

8. 8
台大資料分
析社
學員
Tableau 軟
體作品

9. 9

10. 10

11. 虛擬
實境
軟硬
整合

12. AR
導覽
播報
技術

13. 商
用
A
R
互
動
技
術

14. 14

15. 台北市民，最主要是用
什麼交通工具通勤呢？
(1) 機車 (2) 公車 (3) 捷運
(4) 計程車 (5) 走路
15

16. 16
資料來源：台北市政府交
通局

17. 17

18. 資料視覺化｜與我們的生活習習相關
18

19. 大家覺得，這幾年台灣空
污是變好還是變差呢？

20. 環保署全國測站空汙數據
資料單位：每天每小時

22. 講義版權所有：彭其捷（http://visualization.tw/）
紫豹在哪裏？
22
https://purbao.lass-net.org/
來源

23. 大家覺得，這幾年台灣空
污是變好還是變差呢？

24. 資料視覺化 透過顏色、訊息、互動等設計
，讓你的數據更有趣、也更容易理解，是每
一個人都值得學習的技巧
研究
成果
數據
分析
系統
平台
專案
成果
環境
倡議
財務
分析

25. 為什麼要將資
料視覺化？
Part1
資料視覺化與我們
的關係？
Part 2
資料視覺
化的未來
Part 3
資料視覺化與我們的生活

26. 自我介紹

27. 相關著作（資料視覺化 / 資料科學 / UIUX）
10 刷｜教科書

28. 第六本
著作
進階資料
視覺化技巧
2020.7 出版

29. 29
https://hahow.in/cr/data-tableau

30. 講義版權所有：彭其捷（http://visualization.tw/）
YOTTA 課程：UI / UX / 設計思考
30

31. 講義版權所有：彭其捷（http://visualization.tw/）
數據 & 資料相關歷程
31
數據研究生
交大碩論
用百萬級 Social
Data 開發推薦
演算法
數據專案
專案經理
數據專案管理者
客戶溝通窗口，管理
預算千萬級的大數據
與 AI 專案
專書作者
台大博士班
數據推廣者
出版三本資料科學主
題專書，持續執行數
據相關研究 / 專案
數據工程師
兼全端工程師
系統研發人員
全職工程師，建立網
站 / 系統，管理資料
庫，設計演算法等

32. 32

34. 34

35. 為什麼要將資料視
覺化？

36. 講義版權所有：彭其捷（http://visualization.tw/）
認識資料視覺化
36
定義
經典
案例 學理基礎

37. Data visualization
Data visualization is viewed by many disciplines as a
modern equivalent of visual communication. It involves
the creation and study of the visual representation of
data.
To communicate information clearly and efficiently,
data visualization uses statistical graphics, plots,
information graphics and other tools. Numerical data
may be encoded using dots, lines, or bars, to visually
communicate a quantitative message
來源 https://en.wikipedia.org/wiki/Statistical_graphics
37

38. 38

39. 原始資料（Raw Data），閱讀門檻高
原始碼
財務資料
決策用資料

40. 講義版權所有：彭其捷（http://visualization.tw/）
從原始資料轉換為視覺化呈現
網頁流量
視覺化
40

41. 講義版權所有：彭其捷（http://visualization.tw/）
有效強化視覺溝通
❓
❓
❓
❓
❓
❓
資料多不代表容易解讀 視覺化，有效幫助我們進行決策判讀
41

42. 講義版權所有：彭其捷（http://visualization.tw/）
資訊降維｜Reduce Dimensions
原始資料
網頁、銷售
視覺化報告
僅摘錄出
重點數據
42

43. 資料視覺化
經典案例

44. 講義版權所有：彭其捷（http://visualization.tw/）
英國倫敦寬街（Broad Street）｜霍亂傳染地圖｜1854年
https://en.wikipedia.
org/wiki/John_Snow
“霍亂病患的飲用水，
來源都是相同的”
來源
● 1854年的英國倫敦蘇活區
● 寬街（Broad Street）
● 爆發霍亂傳染
● 半個月有五百名居民因病喪生
Dr. John Snow
流行病學與公共衛生
44

45. https://www.ted.com/talks/hans_rosling
_shows_the_best_stats_you_ve_ever_s
een?language=zh-tw
來源
45

46. Hint｜手勢與語氣（Gesture & Tone）
https://www.ted.com/talks/h
ans_rosling_shows_the_bes
t_stats_you_ve_ever_seen?
language=zh-tw
來源

47. 講義版權所有：彭其捷（http://visualization.tw/）
「真確」：經典好書
我要你看到統計數據背後的個別故事，也要你
看到個別故事背後的統計數據。不靠數據無法
了解世界，但光靠數據也無法了解世界。
漢思‧羅斯林 Hans Rosling
臨床醫師、數據學家、全球公衛教授及世界級公共教育家
47

49. https://budget.g0v
.tw/budget

50. 講義版權所有：彭其捷（http://visualization.tw/）
情境不同，適用圖表也不同
快速、簡單、便宜 吸引人、互動性、成本較高
50

51. 資料視覺化
的學理基礎

52. 幫忙找：紅色的球

53. 幫忙找：比較小的球

54. 幫忙找：紅色的圓球

55. 講義版權所有：彭其捷（http://visualization.tw/）
55
前注意處理特徵｜Pre-Attentive processing
https://www.inside.com.tw/article/3370-design-without-thinking

56. 我們（偶爾）會看到或是做出的統計圖表們
Let’s give
every year
a color of
it’s own
https://viz.wtf/im
age/630887965
804150786

57. 這兩張圖：是不是有 87 分像

58. 試試用 2 秒看看，Apple
iPhone 的市占率
是排第幾名呢？
58

60. 講義版權所有：彭其捷（http://visualization.tw/）
60
前注意力處理階段｜Pre-Attentive processing
https://medium.com/@jonmyers/design-seeing-without-thinking-783d018bb82f

61. Before：單純數據表格 After：漸層數據表格
用視覺技巧，幫助人們進行數字的閱讀

62. https://viz.wtf/

63. 63
https://viz.wt
f/image/622
5530965848
88320

64. 64https://viz.wtf/image/171134950336

65. 65https://viz.wtf/search/google

66. 講義版權所有：彭其捷（http://visualization.tw/）
前注意力處理階段｜Pre-Attentive processing
https://help.tableau.co
m/current/blueprint/en-
us/bp_why_visual_an
alytics.htm
來源
66

67. 觀察被別人討論的負面案例，
也是不錯的學習方法！
67

69. 資料視覺化與我們
的關係？

70. 許多團隊
需要數據
與圖表的
技能
銀行｜醫療
外商｜新創
設計｜學校

71. 講義版權所有：彭其捷（http://visualization.tw/）
資料視覺化與我們的關係？
71
數據
素養
切分資訊
的層級
善用視覺化
工具

72. 數據素養

73. 講義版權所有：彭其捷（http://visualization.tw/）
數據素養｜Data Literacy
73
https://medium.twngo.xyz/%E8%81%8A%E8%
81%8A%E6%95%B8%E6%93%9A%E7%B4%
A0%E9%A4%8A-data-literacy-ea3a1d9159ef
一、知識：由事實與資訊組成的主體
● 1. 了解基本的數據要素 Basic Elements of Data
● 2. 知道數據儲存的方式 Data Storage Methods
● 3. 掌握數據分析的原則要領 Data Analysis Principles
● 4. 使用數據視覺化的經驗法則 Data Visualization Rules of Thumb
二、操作技術：足以實踐、順利完成某項任務的能力
● 5. 解讀數據視覺展示意義 Reads Visual Displays of Data
● 6. 數據分析的準備 Prepares Data For Analysis
● 7. 探索數據 Explores Data
● 8. 建立清楚的視覺化 Creates Clear Visuals
● 9. 有效地利用其進行溝通 Communicates Data Effectively
三、內化的態度意識 ： 思考方式與感受，其往往會影響行為
● 10. 包容 Inclusive 11. 信心 Confident 12. 警覺 Alert 13. 合乎道德 Ethical
四、外顯的行為實踐：作出的反應或動作，其為上述知識、技能與態度所產生
的結果
● 14. 從容地利用 Resourcefully Utilizes Data
● 15. 持續地改善 Continuously Improves Data
● 16. 有效地提倡 Effectively Advocates for Data
● 17. 熱忱傳播數據素養 Enthusiastically Spreads Data Literacy

74. 講義版權所有：彭其捷（http://visualization.tw/）
The Data Visualization Catalogue
https://datavizcatalogue.com/
來源
74

75. 講義版權所有：彭其捷（http://visualization.tw/）
長條圖也是非常好用的！
https://chartio.com/learn/charts/grouped-bar-chart-complete-guide/來源
資料視覺化應該是用來幫
助我們解決問題的，而不
是創造出更多的問題。
75

76. 數據的影響無遠弗屆，它就像生活一樣的圍繞在我
們的身旁，然而卻同時存在著
真的數據 與 假的數據 與 不知真假的數據
ex. 許多行為、決策的優先權，都是依賴數據而被決定的
數據既是工具，也是武器

77. 太嚴肅了～～
聊點資料視覺化的正面
觀點
77

78. 怎樣做家事分工呢？
78
家事數據視覺化～

79. 79

80. 工作 / 學習不起勁，怎麼
辦呢？
80

81. 講義版權所有：彭其捷（http://visualization.tw/）
公司成員的工作快樂指數表：將情緒視覺化
81

82. 資料視覺化的資訊，環繞在我
們的身邊 ～ 除了小心其去脈
絡化的特質，也可妥善使用作
為許多有效的溝通工具
82

83. 切分資訊的層級

84. 講義版權所有：彭其捷（http://visualization.tw/）
84
https://medium.twngo.xyz/%E8%8
1%8A%E8%81%8A%E6%95%B8
%E6%93%9A%E7%B4%A0%E9
%A4%8A-data-literacy-ea3a1d915
9ef
來源
資料
訊息
知識
資料 > 訊息 > 知識

85. 這比較接近原始：「資料」
https://nidss.cdc.gov.tw/c
h/NIDSS_DiseaseMap.as
px?dc=1&dt=5&disease=
19CoV

86. 從「資料」 > 「訊息」 > 「知識」
https://www.facebook.com/iche
ntsai.md/photos/a.5940245506
67081/2205065859562934/?ty
pe=3&theater
數據來源
美國戰略與國際研究中
心, CSIS
國民生產毛額
人類發展指數

87. 87
去年 67.72% 上班族年
薪未達平均年薪 64.4
萬元
67.72% 這項比率續創
新高，顯示中產階級與
極端高薪族群的薪資差
距，又進一步擴大。
Source
https://www.cw.com.tw/article/5104622

88. 三者都重要，要看你想提供哪一層的體驗呢？
資料
訊息
知識

89. 89
● 資料？
● 訊息？
● 知識？

90. 越上層的資訊，越適合搭配用 視覺化 / 設計 的方式呈現
資料
訊息
知識
視覺化之後
可吸引更多人閱讀與吸收
但同時也損失了一些細節
較好吸收
較客觀
中庸

91. 根據情境，決定資訊呈現的層級
視覺摘要後較好吸收
然而有時反而更難正確解讀資訊

92. 善用視覺化工具

93. 講義版權所有：彭其捷（http://visualization.tw/）
長條圖的變形版本（根據不同目的）
動畫版本的長條圖
https://towardsdatascience.c
om/spread-of-covid-19-with-i
nteractive-data-visualization-
521ac471226e
來源
93

94. 有做過地圖或圖表動畫嗎？
94

95. 講義版權所有：彭其捷（http://visualization.tw/）
視覺化的想像力，有時來自於工具的限制
容易 困難
95
困難

96. 數
據
視
覺
化
工
具
分
類

97. 除了 Excel 之外，也可考慮
學習新的工具與方法，來提升
分析與製圖能力

98. 講義版權所有：彭其捷（http://visualization.tw/）
除了 Excel 之外，推薦的好用視覺化工具們
98
較進階
商用軟體
相對容易入
門區
程式語言工
具
ArcGIS Story Maps
JavaScript d3.js

99. wordArt ：標籤雲
https://wor
dart.com/cr
eate
https://ai.nct
u.edu.tw/en/
aboutus/
Text source

100. Google Data Studio｜真不愧是大神

101. Flourish｜好上手多變化的圖表製作工具！

102. 102

103. PlotDB：有許多圖表 & 中文（台灣人開發的資料視覺化工具）

104. 講義版權所有：彭其捷（http://visualization.tw/）
Tableau ｜操作直覺 & 功能完整的視覺化王者工具
圖表模組系統
(Show Me）
快速切換各類圖
表，進行數據觀
察
選擇資料欄位
（Columns）
104

105. 講義版權所有：彭其捷（http://visualization.tw/）
PowerBI｜微軟推出的資料視覺化工具，功能強大完整
105

106. 講義版權所有：彭其捷（http://visualization.tw/）
Mapbox｜免費的開放地圖服務（Open Street Map）
106

107. 講義版權所有：彭其捷（http://visualization.tw/）
Mapbox｜地圖視覺化的好幫手，開放地圖服務
https://www.mapbox.com
107

108. 不用寫程式也能做互動網站：StoryMaps

109. 講義版權所有：彭其捷（http://visualization.tw/）
Python｜搭配套件之後可直接整合程式碼內容出圖
109
視覺化
套件

110. 講義版權所有：彭其捷（http://visualization.tw/）
R Language｜很多學術工具與圖表庫
110
視覺化
套件

111. 講義版權所有：彭其捷（http://visualization.tw/）
R & Python （個人覺得 Python 業界多，R 的話學界多）
111

112. 桌面軟體：Processing

113. 講義版權所有：彭其捷（http://visualization.tw/）
JavaScrip｜網頁動態互動的好用工具
113
視覺化
套件
【特色】相對於套裝軟體、網路使用者體驗佳

114. 講義版權所有：彭其捷（http://visualization.tw/）
JavaScript 視覺化圖表函式庫：D3.js
https://github.com/d3/d3/wiki/Gallery
114

115. 資料視覺化的未來

116. 講義版權所有：彭其捷（http://visualization.tw/）
資料視覺化的未來
116
體感技術整合
VR/AR/MR
三維立
體空間
跨領域
創作

117. 體感技術整合
VR/AR/MR

118. 科博館
龍王鯨
VR 解說

120. 有聽過 MR 嗎？
120

121. 混
合
實
境

122. 三維空間
3D

124. 360 攝影機｜水下攝影機

126. 光雕投影（）

127. 127

129. 跨領域創作

130. 資料視覺化 x 互動藝術

134. 當人站立在作品上，觸摸作品時，
人會成為能夠改變水流的岩石，觀
賞者自身變成了障礙物改變水的
流向。
作品受到觀賞者的行為舉動以及
其他作品的影響，不斷地持續變
化。眼前這一瞬間的畫面，錯過就
無法再看到第二次了。

136. 當天藍色的水球撞上種 子時，種子
會發芽、結起花苞然後開出花朵。
如果是黃色的蜜蜂球的話，當它撞
上花朵時會幫忙授粉。花朵接受過
授粉後就會結出果實。
當球體撞上果實時，果實會灑 出新
的種子，然後讓它連接到下一個生
命。

137. 結論

138. 138

139. 講義版權所有：彭其捷（http://visualization.tw/）
資訊經過設計，會讓資訊更有意義
https://www.ted.com/talks/david_mccandless_the_beauty_
of_data_visualization?language=zh-tw
來源
139

140. 講義版權所有：彭其捷（http://visualization.tw/）
140
前注意處理特徵｜Pre-Attentive processing
https://medium.com/@jonmyers/design-seeing-without-thinking-783d018bb82f

141. 講義版權所有：彭其捷（http://visualization.tw/）
越上層的資訊，越適合搭配用 視覺化 / 設計
的方式呈現
資料
訊息
知識
視覺化之後
可吸引更多人閱讀與吸收
但同時也損失了一些細節
較好吸收
較客觀
中庸
141

142. 講義版權所有：彭其捷（http://visualization.tw/）
The Data Visualization Catalogue
https://datavizcatalogue.com/
來源
142

143. 講義版權所有：彭其捷（http://visualization.tw/）
除了 Excel 之外，推薦的好用視覺化工具們
143
較進階
商用軟體
相對容易入
門區
程式語言工
具
ArcGIS Story Maps
JavaScript d3.js

144. 資料視覺化 / 商業分析研究社（臉書社團）
https://www.facebook.com/groups/tw.dataviz/

145. 期許大家對於資料
視覺化有更多的認
識，讓各類訊息更
有效傳遞出去