Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Start
0
1991-1995
, 1997
1997
1995-1997


2001-2005
CS448B: Visualization

2004@Stanford University
Prof. Pat Hanrahan
Visualization and Human Computer Interaction 2006, 2007 
2006-
User-Oriented Innovative Design, 2008 
Engineering Graphics...
Engineering
Design
Art
Psychology
Engineering
Design
Art
Psychology
Engineering
Design
Art
Psychology
1. Example
2. Brain
3. Design
4. Tool
Example
1
Challenger Disaster
1986/1/28
About me
Prof. Pat Hanrahan
CS448B: Visualization
Lesson-Learnt
John Snow who plotted deaths from cholera in London
in 1854 to detect the source of the disease.


Lesson-Learnt
Edward Tufte, The Visual Display of Quantitative Information
Edward Tufte, The Visual Display of Quantitative Information
Edward Tufte, The Visual Display of Quantitative Information




alignment customized
Lesson-Learnt
http://sciencenotes.org/wp-content/uploads/2015/01/PeriodicTableMuted.png




alignment customized
Lesson-Learnt


color




alignment customized
Lesson-Learnt


color


symbol


distortion




Lesson-Learnt
Table Lens
Table Lens
https://youtu.be/qWqTrRAC52U
Lesson-Learnt Table Lens
Gapminder
Gapminder.org


Lesson-Learnt Gap Minder
Data visualizations make data understandable,
meaningful and beautiful.
Baby Name Wizard
http://www.babynamewizard.com
Lesson-Learnt Baby Name Wizard
Lesson-Learnt
which is
preferred curve?
preferred curve
Brain
2
“Seeing is Believing”
http://www.90percentofeverything.com/2009/08/25/some-fun-eye-tracking-heatmaps/
http://uk.businessinsider.com/eye-tracking-heatmaps-2014-7?r=US&IR=T
http://uk.businessinsider.com/eye-tracking-heatmaps-2014-7?r=US&IR=T
https://usabilla.com/products/visual-survey
https://youtu.be/AEa8sFFU4a8
The Color The Shape The Motion
The Color The Shape The Motion
Avoiding catastrophe becomes the first
principle in bringing color to information:
above all do no harm
Edward Tufte (Envi...
●
● (Preattentive stage)
Preattentive
stage
Focused
attention stage
PerceptionObject
Combine featuresAnalyze the object
Mo...
5?
23145329837895231
45320294875231453
25974729231453229
2871002314532
5?
23145329837895231
45320294875231453
25974729231453229
2871002314532
5?
23145329837895231
45320294875231453
25974729231453229
2871002314532
5?
23145329837895231
45320294875231453
25974729231453229
2871002314532
5?
23145329837895231
45320294875231453
25974729231453229
2871002314532
http://
www.csc.ncsu.edu/
faculty/healey/PP/
http://digitalcommons.unl.edu/cgi/viewcontent.cgi?
article=1463&context=psychfacpub
●
● (filter inteferece)
● (redundacy g...
The Color The Shape The Motion
●
●
●
●
o
o
●
o
o
●
o
o
●
o
o
Above all, do no harm E.R. Tufte
●
o
o
●
o
o
●
o
o
●
o
o
Above all, do no harm E.R. Tufte
(Sequential)
(Qualitative)
(Diverging)
(Binary) (Diverging)
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
Color Brewer 2
http://colorbrewer2.org
●
●
●
● Bartlecin(2004) ‘
The Color The Shape The Motion
preattentive
qualitative, diverging
sequential, binary
a)
b)
c)
d)
a)
b)
c)
d)
a)
b)
c)
d)
The Color The Shape The Motion
31%
34%
34%
36%
33%
30%
vs
●
●
Author: Btarski Date: 6/23/06
This file is licensed under the Creative Commons
http://www.autismindex.com/Therapies/Th...
Steven's Power Law
http://en.wikipedia.org/wiki/Stevens'_power_law
Stevens' Power Law
Source: http://en.wikipedia.org/wiki/Stevens'_power_law


a) >
b) >
c) >
d) >
a)
b)
c)
d)
The Color The Shape The Motion
●
●
●
(Change Blindness)
●
●
● 1890 William James
●
http://nivea.psycho.univ-paris5.fr/#CB
(Motion-Induced Blindness)
● 1990
●
●
http://www.newscientist.com/article/dn19611
●
●
O
O
a)
b)
c)
d)
a)
b)
c)
d)
Design
3
a)
b)
c)
d)
e)
f)
●
●
●
●
●
●
●
●
(
(
)
(
(
)
●
●
●
● (simple) (easy)
●
●
a)
b)
c)
d)
e)
f)
InteractionSpace Data
InteractionSpace Data
The most obvious differences between different animals are
differences of size, but for some reason the zoologists have pa...
The most obvious differences between different visualizations are
differences of space, but for some reason the visualizat...
X-Y
X-Y
X-Y
X-Y
X-Y
Log
Log
X-Y
X-Y
●
●
●
(integratiy)
Latitude-longitude Projection
USGA
USGA
google earth)
Sinusoidal
USGA
(Cartographic)
Flickr Manitoba Historical Maps CC
1858 

=
( )
Maneesh Agrawala,http://graphics.stanford.edu/papers/routemaps/
( )
( )
Flickr Shihchuan's CC
Flickr acroamatic CC
a)
b)
c)
d)
a)
b)
c)
a)
b)
c)
d)
InteractionSpace Data
Presentation
Exploration
Google Earth
GPS(?)
●
●
●
●
a) >
b) >
c) >
d) Google >
a)
b)
c)
d)
InteractionSpace Data
Good artists copy, great artists steal.
~ Pablo Picasso
●
●
●
●
●
●
(1/2)
●
● Multiple-Y
(2/2)
●
● Multiple-Y
(1/2)
●
● Small-Multiple
(2/2)
●
● Small-Multiple
(1/3)
●
● (cascade)
(2/3)
●
● (cascade)
News Map http://newsmap.jp/
(3/3)
●
● (cascade)
●
●
●
● GIS,
●
● Zoomable
http://www.chronozoomproject.org/
●
o
o
o
(
(
)
(
(
)
(
(
)
(
(
)


資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
資料視覺化之理論、賞析與實作
Próxima SlideShare
Cargando en…5
×

資料視覺化之理論、賞析與實作

33.751 visualizaciones

Publicado el

資料視覺化是資料科學中重要的領域,尤其在現代資料巨量化的浪潮下,透過各種視覺化的呈現,能讓專業人員,快速從資料中快速判讀,發現關鍵問題。也幫助跨領域的溝通,以圖像式的方式,說明、探索與分析資料背後的意義,提昇決策的效率與品質。

這個課程濃縮了康教授在台大所開設的『資料視覺化』課程的精華,總共包含賞析、理論、設計與實作四節課程。在賞析課程中,他將解析經典的案例,從案例中培養出資料視覺設計師的眼光,懂得看到設計下面的精妙。第二節課是理論課,他將介紹心理學中相關的研究發現,解釋人類的視覺系統是怎麼接受資訊,怎麼理解資訊,這些心理學理論,都是資料視覺化的設計時,必須符合的基礎。第三節課將說明設計方法,他會具體說明如何從資料到視覺化的設計步驟,包含了解資料的維度,使用者的需求,資料的形態。並說明如何以步驟化的方式,發展好資料視覺化方法,達到解決問題的目的。課程最後,康教授將介紹他使用各類資料視覺化的工具的經驗,包含 Tableau, Processing, D3.js 等,也將展示他和他的學生所開發的實務案例。

Publicado en: Datos y análisis
  • Dating direct: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sex in your area is here: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Hi there! Essay Help For Students | Discount 10% for your first order! - Check our website! https://vk.cc/80SakO
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

資料視覺化之理論、賞析與實作

  1. 1. Start 0
  2. 2. 1991-1995
  3. 3. , 1997 1997 1995-1997
  4. 4. 
 2001-2005
  5. 5. CS448B: Visualization 2004@Stanford University Prof. Pat Hanrahan
  6. 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. 7. Engineering Design Art Psychology
  8. 8. Engineering Design Art Psychology
  9. 9. Engineering Design Art Psychology 1. Example 2. Brain 3. Design 4. Tool
  10. 10. Example 1
  11. 11. Challenger Disaster 1986/1/28
  12. 12. About me Prof. Pat Hanrahan CS448B: Visualization
  13. 13. Lesson-Learnt
  14. 14. John Snow who plotted deaths from cholera in London in 1854 to detect the source of the disease.
  15. 15. 
 Lesson-Learnt
  16. 16. Edward Tufte, The Visual Display of Quantitative Information
  17. 17. Edward Tufte, The Visual Display of Quantitative Information
  18. 18. Edward Tufte, The Visual Display of Quantitative Information
  19. 19. 
 
 alignment customized Lesson-Learnt
  20. 20. http://sciencenotes.org/wp-content/uploads/2015/01/PeriodicTableMuted.png
  21. 21. 
 
 alignment customized Lesson-Learnt 
 color
  22. 22. 
 
 alignment customized Lesson-Learnt 
 color 
 symbol 
 distortion
  23. 23. 
 
 Lesson-Learnt
  24. 24. Table Lens
  25. 25. Table Lens https://youtu.be/qWqTrRAC52U
  26. 26. Lesson-Learnt Table Lens
  27. 27. Gapminder
  28. 28. Gapminder.org
  29. 29. 
 Lesson-Learnt Gap Minder
  30. 30. Data visualizations make data understandable, meaningful and beautiful.
  31. 31. Baby Name Wizard http://www.babynamewizard.com
  32. 32. Lesson-Learnt Baby Name Wizard
  33. 33. Lesson-Learnt
  34. 34. which is preferred curve?
  35. 35. preferred curve
  36. 36. Brain 2
  37. 37. “Seeing is Believing”
  38. 38. http://www.90percentofeverything.com/2009/08/25/some-fun-eye-tracking-heatmaps/
  39. 39. http://uk.businessinsider.com/eye-tracking-heatmaps-2014-7?r=US&IR=T
  40. 40. http://uk.businessinsider.com/eye-tracking-heatmaps-2014-7?r=US&IR=T
  41. 41. https://usabilla.com/products/visual-survey
  42. 42. https://youtu.be/AEa8sFFU4a8
  43. 43. The Color The Shape The Motion
  44. 44. The Color The Shape The Motion
  45. 45. Avoiding catastrophe becomes the first principle in bringing color to information: above all do no harm Edward Tufte (Envisioning Information)
  46. 46. ● ● (Preattentive stage) Preattentive stage Focused attention stage PerceptionObject Combine featuresAnalyze the object Modified from Anne Treisman's Theory Processing 
 stage Compare with memories Interpretation
  47. 47. 5? 23145329837895231 45320294875231453 25974729231453229 2871002314532
  48. 48. 5? 23145329837895231 45320294875231453 25974729231453229 2871002314532
  49. 49. 5? 23145329837895231 45320294875231453 25974729231453229 2871002314532
  50. 50. 5? 23145329837895231 45320294875231453 25974729231453229 2871002314532
  51. 51. 5? 23145329837895231 45320294875231453 25974729231453229 2871002314532
  52. 52. http:// www.csc.ncsu.edu/ faculty/healey/PP/
  53. 53. http://digitalcommons.unl.edu/cgi/viewcontent.cgi? article=1463&context=psychfacpub ● ● (filter inteferece) ● (redundacy gain)
  54. 54. The Color The Shape The Motion
  55. 55. ● ● ●
  56. 56. ● o o ● o o ● o o ● o o Above all, do no harm E.R. Tufte
  57. 57. ● o o ● o o ● o o ● o o Above all, do no harm E.R. Tufte
  58. 58. (Sequential)
  59. 59. (Qualitative)
  60. 60. (Diverging)
  61. 61. (Binary) (Diverging)
  62. 62. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
  63. 63. Color Brewer 2 http://colorbrewer2.org
  64. 64. ● ● ● ● Bartlecin(2004) ‘
  65. 65. The Color The Shape The Motion preattentive qualitative, diverging sequential, binary
  66. 66. a) b) c) d)
  67. 67. a) b) c) d)
  68. 68. a) b) c) d)
  69. 69. The Color The Shape The Motion
  70. 70. 31% 34% 34%
  71. 71. 36% 33% 30%
  72. 72. vs
  73. 73. ● ● 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
  74. 74. Steven's Power Law http://en.wikipedia.org/wiki/Stevens'_power_law
  75. 75. Stevens' Power Law Source: http://en.wikipedia.org/wiki/Stevens'_power_law
  76. 76.
  77. 77. a) > b) > c) > d) >
  78. 78. a) b) c) d)
  79. 79. The Color The Shape The Motion
  80. 80. ● ● ●
  81. 81. (Change Blindness) ● ● ● 1890 William James ● http://nivea.psycho.univ-paris5.fr/#CB
  82. 82. (Motion-Induced Blindness) ● 1990 ● ● http://www.newscientist.com/article/dn19611
  83. 83. ● ●
  84. 84. O
  85. 85. O
  86. 86. a) b) c) d)
  87. 87. a) b) c) d)
  88. 88. Design 3
  89. 89. a) b) c) d) e) f)
  90. 90. ● ● ● ●
  91. 91. ● ● ● ●
  92. 92. ( ( )
  93. 93. ( ( )
  94. 94. ● ● ●
  95. 95. ● (simple) (easy) ● ●
  96. 96. a) b) c) d) e) f)
  97. 97. InteractionSpace Data
  98. 98. InteractionSpace Data
  99. 99. 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
  100. 100. 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
  101. 101. X-Y
  102. 102. X-Y
  103. 103. X-Y
  104. 104. X-Y
  105. 105. X-Y Log Log
  106. 106. X-Y
  107. 107. X-Y
  108. 108. ● ● ● (integratiy)
  109. 109. Latitude-longitude Projection USGA
  110. 110. USGA google earth)
  111. 111. Sinusoidal USGA
  112. 112. (Cartographic) Flickr Manitoba Historical Maps CC 1858 

  113. 113. =
  114. 114. ( ) Maneesh Agrawala,http://graphics.stanford.edu/papers/routemaps/
  115. 115. ( )
  116. 116. ( )
  117. 117. Flickr Shihchuan's CC
  118. 118. Flickr acroamatic CC
  119. 119. a) b) c) d)
  120. 120. a) b) c)
  121. 121. a) b) c) d)
  122. 122. InteractionSpace Data
  123. 123. Presentation Exploration Google Earth GPS(?)
  124. 124. ● ● ● ●
  125. 125. a) > b) > c) > d) Google >
  126. 126. a) b) c) d)
  127. 127. InteractionSpace Data Good artists copy, great artists steal. ~ Pablo Picasso
  128. 128. ● ● ● ●
  129. 129. ● ●
  130. 130. (1/2) ● ● Multiple-Y
  131. 131. (2/2) ● ● Multiple-Y
  132. 132. (1/2) ● ● Small-Multiple
  133. 133. (2/2) ● ● Small-Multiple
  134. 134. (1/3) ● ● (cascade)
  135. 135. (2/3) ● ● (cascade)
  136. 136. News Map http://newsmap.jp/ (3/3) ● ● (cascade)
  137. 137. ● ●
  138. 138. ● ● GIS,
  139. 139. ● ● Zoomable http://www.chronozoomproject.org/
  140. 140. ● o o o
  141. 141. ( ( )
  142. 142. ( ( )
  143. 143. ( ( )
  144. 144. ( ( ) 


×