Data Visualization
Outline
• What?
• Why?
• How?
Outline
• What?
• Why?
• How?
Data Visualization
“...to convey information through visual
representations.”
“...produces (interactive) visual representations
of abstract data to reinforce human cognition;
thus enabling the viewer to gain knowledge
about the internal structure of the data and
causal relationships in it.”
Outline
• What?
• Why?
• How?
VISUALIZATION GOALS
Visualization Goals
• Answer questions (or discover them)
• Make decisions
• See data in context
• Support graphical calculation
• Find patterns
• Present argument or tell a story
• Inspire
Three Functions of Visualization
• Record: store information
• Analyze: support reasoning about information
• Communicate: convey information to others
PERCEPTION & COGNITION
Anscombe Quartet
Anscombe Quartet
How many 3’s?
24872184012387409216590147609856093247209
12562906509852659048275829856809609863095
84390564095878950374509284750989475092984
How many 3’s?
24872184012387409216590147609856093247209
12562906509852659048275829856809609863095
84390564095878950374509284750989475092984
Preattentive Processing
• Requires attention despite the name
• Very fast: < 200-250 ms
• What matters most is the contrast between
features
Color
Shape
Conjunction
Change Blindness
Simultaneous Contrast
Outline
• What?
• Why?
• How?
FRAMEWORKS
ProtoVis
Processing
Spde
REDESIGN
INSPIRATION
Credits & Resources
• HansPeter Phister for slides inspiration: http://www.cs171.org/
• Stephen Few for Dashboard & redesigns: http://www.perceptualedge.com
• Christopher G. Healy for Change Blindness & Preattentive Variables: http://www.csc.ncsu.edu/faculty/healey/PP/
• Hans Rosling from Gapminder: http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html
http://www.gapminder.org/
• Protovis: http://vis.stanford.edu/protovis/
• Polymaps: http://www.polymaps.org/
• Processing: http://processing.org/
• Processing.js: http://processingjs.org/
• Spde: http://technically.us/spde/About
• Tableau Public: http://www.tableausoftware.com/public/
• Oakland Crime Spotting & Cab Spotting by Stamen Design: http://www.stamen.com/
• “Good Morning” & Haiti Earthquake Aid in Avatar Minutes by Jer Thorp: http://blog.blprnt.com/
• House of Cards video clip for Radiohead by Aaron Koblin: http://www.aaronkoblin.com/
• Wikipedia history flow by Martin Wattenberg & Fernanda Viegaz: http://www.bewitched.com/ http://fernandaviegas.com/
• Map of USA by Ben Fry: http://benfry.com/
• “Hoe de kredietcrisis de beurs besmette by Frédérik Ruys: http://www.vizualism.com/
• StemBesef by Jan Willem Tulp: http://www.janwillemtulp.com/stembesef

Data visualization

Editor's Notes

  • #24 http://www.csc.ncsu.edu/faculty/healey/PP/index.html