CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784...

14
CS 171:Visualization Hanspeter Pfister pfi[email protected]

Transcript of CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784...

Page 1: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

CS 171: VisualizationHanspeter Pfister

[email protected]

Page 2: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Yahoo Finance, NY Times, Map of the Market

To convey information through visual representations

Page 3: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Why?

Page 4: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Information Explosion

Page 5: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

The Industrial Revolution of Data

Joe Hellerstein, UC Berkeley

Page 6: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Matthew Ericson, NY Times

Page 8: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Visualization

• Helps us think

• Reduces load on working memory

• Offloads cognition

• Uses the power of human perception

Page 9: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

CS 171 Goals

• Principles of effective visualizations

• Gathering data (Python)

• Implementing interactive visualizations (Processing)

• Programming homework and a final project

Page 10: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Jason Gao

Page 11: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Naveen Sinha

Page 12: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Karen Hansen

Page 13: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

Xiao He

Page 14: CS 171: Visualization · 2012. 8. 22. · goa 473 424 660 1 812 2836 2179 2291 3412 1124 1014 784 1228 113 862 21 60 ... 3/1/2008 S/ 1/2008 g,' 1/2008 1' 1/2009 3/1/200 4/1/2008 6/1/2008

cs171.org

• Data and Image Models• Visual Perception• Cognitive Principles• Interaction Techniques• Color Encoding• Visualization Software Design• Designing 2D Graphs• Maps & Google Earth• Trees and Networks• Higher-dimensional Data• Text Visualization• Images and Video• Scientific Visualization• Life Science Visualization• Visualization & The Arts