資料視覺化是資料科學中重要的領域，尤其在現代資料巨量化的浪潮下，透過各種視覺化的呈現，能讓專業人員，快速從資料中快速判讀，發現關鍵問題。也幫助跨領域的溝通，以圖像式的方式，說明、探索與分析資料背後的意義，提昇決策的效率與品質。 這個課程濃縮了康教授在台大所開設的『資料視覺化』課程的精華，總共包含賞析、理論、設計與實作四節課程。在賞析課程中，他將解析經典的案例，從案例中培養出資料視覺設計師的眼光，懂得看到設計下面的精妙。第二節課是理論課，他將介紹心理學中相關的研究發現，解釋人類的視覺系統是怎麼接受資訊，怎麼理解資訊，這些心理學理論，都是資料視覺化的設計時，必須符合的基礎。第三節課將說明設計方法，他會具體說明如何從資料到視覺化的設計步驟，包含了解資料的維度，使用者的需求，資料的形態。並說明如何以步驟化的方式，發展好資料視覺化方法，達到解決問題的目的。課程最後，康教授將介紹他使用各類資料視覺化的工具的經驗，包含 Tableau, Processing, D3.js 等，也將展示他和他的學生所開發的實務案例。

1. Start
0

2. 1991-1995

3. , 1997
1997
1995-1997

4.
2001-2005

5. CS448B: Visualization
2004@Stanford University
Prof. Pat Hanrahan

6. Visualization and Human Computer Interaction 2006, 2007
2006-
User-Oriented Innovative Design, 2008
Engineering Graphics, 2006-
Robotics and Automation, 2006-
Visualization for A/E/C, 2006-
Conceptual Design Studio, 2011-2013
Data Visualization, 2013-
D-School Course, 2015-

7. Engineering
Design
Art
Psychology

8. Engineering
Design
Art
Psychology

9. Engineering
Design
Art
Psychology
1. Example
2. Brain
3. Design
4. Tool

10. Example
1

12. Challenger Disaster
1986/1/28

14. About me
Prof. Pat Hanrahan
CS448B: Visualization

15. Lesson-Learnt

17. John Snow who plotted deaths from cholera in London
in 1854 to detect the source of the disease.

18.
Lesson-Learnt

20. Edward Tufte, The Visual Display of Quantitative Information

21. Edward Tufte, The Visual Display of Quantitative Information

22. Edward Tufte, The Visual Display of Quantitative Information

23.
alignment customized
Lesson-Learnt

25. http://sciencenotes.org/wp-content/uploads/2015/01/PeriodicTableMuted.png

26.
alignment customized
Lesson-Learnt
color

29.
alignment customized
Lesson-Learnt
color
symbol
distortion

32.
Lesson-Learnt

33. Table Lens

34. Table Lens
https://youtu.be/qWqTrRAC52U

35. Lesson-Learnt Table Lens

36. Gapminder

37. Gapminder.org

38.
Lesson-Learnt Gap Minder

39. Data visualizations make data understandable,
meaningful and beautiful.

41. Baby Name Wizard
http://www.babynamewizard.com

42. Lesson-Learnt Baby Name Wizard

45. Lesson-Learnt

46. which is
preferred curve?

47. preferred curve

48. Brain
2

49. “Seeing is Believing”

51. http://www.90percentofeverything.com/2009/08/25/some-fun-eye-tracking-heatmaps/

52. http://uk.businessinsider.com/eye-tracking-heatmaps-2014-7?r=US&IR=T

53. http://uk.businessinsider.com/eye-tracking-heatmaps-2014-7?r=US&IR=T

54. https://usabilla.com/products/visual-survey

55. https://youtu.be/AEa8sFFU4a8

57. The Color The Shape The Motion

58. The Color The Shape The Motion

59. Avoiding catastrophe becomes the first
principle in bringing color to information:
above all do no harm
Edward Tufte (Envisioning Information)

60. ●
● (Preattentive stage)
Preattentive
stage
Focused
attention stage
PerceptionObject
Combine featuresAnalyze the object
Modified from Anne Treisman's Theory
Processing
stage
Compare with memories
Interpretation

61. 5?
23145329837895231
45320294875231453
25974729231453229
2871002314532

62. 5?
23145329837895231
45320294875231453
25974729231453229
2871002314532

63. 5?
23145329837895231
45320294875231453
25974729231453229
2871002314532

64. 5?
23145329837895231
45320294875231453
25974729231453229
2871002314532

65. 5?
23145329837895231
45320294875231453
25974729231453229
2871002314532

71. http://
www.csc.ncsu.edu/
faculty/healey/PP/

72. http://digitalcommons.unl.edu/cgi/viewcontent.cgi?
article=1463&context=psychfacpub
●
● (filter inteferece)
● (redundacy gain)

73. The Color The Shape The Motion

74. ●
●
●

75. ●
o
o
●
o
o
●
o
o
●
o
o
Above all, do no harm E.R. Tufte

76. ●
o
o
●
o
o
●
o
o
●
o
o
Above all, do no harm E.R. Tufte

77. (Sequential)

78. (Qualitative)

79. (Diverging)

80. (Binary) (Diverging)

81. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html

82. Color Brewer 2
http://colorbrewer2.org

83. ●
●
●
● Bartlecin(2004) ‘

84. The Color The Shape The Motion
preattentive
qualitative, diverging
sequential, binary

85. a)
b)
c)
d)

86. a)
b)
c)
d)

87. a)
b)
c)
d)

88. The Color The Shape The Motion

98. 31%
34%
34%

100. 36%
33%
30%

101. vs

109. ●
●
Author: Btarski Date: 6/23/06
This file is licensed under the Creative Commons
http://www.autismindex.com/Therapies/Therapy_Key_Word_Site_Map/sensory/
motor_sensory_homunculus.html

110. Steven's Power Law
http://en.wikipedia.org/wiki/Stevens'_power_law

111. Stevens' Power Law
Source: http://en.wikipedia.org/wiki/Stevens'_power_law

120. a) >
b) >
c) >
d) >

121. a)
b)
c)
d)

122. The Color The Shape The Motion

123. ●
●
●

127. (Change Blindness)
●
●
● 1890 William James
●
http://nivea.psycho.univ-paris5.fr/#CB

129. (Motion-Induced Blindness)
● 1990
●
●
http://www.newscientist.com/article/dn19611

131. ●
●

135. O

136. O

137. a)
b)
c)
d)

138. a)
b)
c)
d)

139. Design
3

140. a)
b)
c)
d)
e)
f)

141. ●
●
●
●

142. ●
●
●
●

144. (
(
)

145. (
(
)

146. ●
●
●

147. ● (simple) (easy)
●
●

148. a)
b)
c)
d)
e)
f)

149. InteractionSpace Data

150. InteractionSpace Data

151. The most obvious differences between different animals are
differences of size, but for some reason the zoologists have paid
singularly little attention to them. In a large textbook of zoology
before me I find no indication that the eagle is larger than the
sparrow, or the hippopotamus bigger than the hare, though some
grudging admissions are made in the case of the mouse and the
whale. But yet it is easy to show that a hare could not be as large
as a hippopotamus, or a whale as small as a herring. For every
type of animal there is a most convenient size, and a large change
in size inevitably carries with it a change of form.
Cited from an essay published by J. B. S. Haldane in 1928

152. The most obvious differences between different visualizations are
differences of space, but for some reason the visualization
scientists have paid singularly little attention to them. In a large
textbook of visualization before me I find no indication that the
log-log is different than the log-linear space, or the mercator
projection is different than azimuthal equidistant project, though
some grudging admissions are made in the case of parallel and
perspective projections. But yet it is easy to show that distances
are difficult to estimate under perspective, or data obeying a
power law is easy to see in a log-log plot. For every type of
visualization there is a most convenient space, and a change into a
right space inevitably makes relationships clear.
Cited from the course lecture offered by Prof. Hanrahan at Stanford University

154. X-Y

155. X-Y

156. X-Y

157. X-Y

158. X-Y
Log
Log

159. X-Y

160. X-Y

162. ●
●
●
(integratiy)

163. Latitude-longitude Projection
USGA

164. USGA
google earth)

165. Sinusoidal
USGA

166. (Cartographic)
Flickr Manitoba Historical Maps CC
1858

167. =

169. ( )
Maneesh Agrawala,http://graphics.stanford.edu/papers/routemaps/

170. ( )

171. ( )

172. Flickr Shihchuan's CC

173. Flickr acroamatic CC

174. a)
b)
c)
d)

175. a)
b)
c)

176. a)
b)
c)
d)

177. InteractionSpace Data

182. Presentation
Exploration
Google Earth
GPS(?)

184. ●
●
●
●

185. a) >
b) >
c) >
d) Google >

186. a)
b)
c)
d)

187. InteractionSpace Data
Good artists copy, great artists steal.
~ Pablo Picasso

188. ●
●
●
●

189. ●
●

190. (1/2)
●
● Multiple-Y

191. (2/2)
●
● Multiple-Y

192. (1/2)
●
● Small-Multiple

193. (2/2)
●
● Small-Multiple

194. (1/3)
●
● (cascade)

195. (2/3)
●
● (cascade)

196. News Map http://newsmap.jp/
(3/3)
●
● (cascade)

197. ●
●

198. ●
● GIS,

199. ●
● Zoomable
http://www.chronozoomproject.org/

200. ●
o
o
o

201. (
(
)

202. (
(
)

203. (
(
)

204. (
(
)