SeeingAndThinking
Transcript of SeeingAndThinking
Data Visualization Nikhil Srivastava, 2015
• What is Data Visualization?
• Thinking and Seeing
• From Data to Graphics
• Highcharts & Javascript
• Class Project
• [Next Steps]
introduction
foundation & theory
building blocks
construction
Last Time
Data Visualization Nikhil Srivastava, 2015
• Which is the most populous
city in the list?
• Which county in the list has
the most cities?
• Which county in the list has
the largest average city?
Data Visualization is:
• Useful
– Answers user questions
– Reduces user workload
(by design, not by default)
Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Important
– Understand structure and patterns
– Resolve ambiguity
– Locate outliers
Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Important
– Design decisions affect interpretation
Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Powerful
– Communicate, teach, inspire
Data Visualization Nikhil Srivastava, 2015
Why is DV relevant?
• In one second …
• Open data
• Open technologies
• Growing popularity and widespread use
Data Visualization Nikhil Srivastava, 2015
Focus Extra
purpose communicate explore, analyze
data numerical,categorical
text, maps, graphs, networks
feature representation animation,Interactivity
Course Scope
Data Visualization Nikhil Srivastava, 2015
Homework #2: Find a Visualization
• What is this data visualization trying to
communicate?
• What is the underlying data?
• How effective do you find it? How clear is
the presentation?
Data Visualization Nikhil Srivastava, 2015
• What is Data Visualization?
• Thinking and Seeing
• From Data to Graphics
• Highcharts & Javascript
• Class Project
• [Next Steps]
introduction
foundation & theory
building blocks
construction
Data Visualization Nikhil Srivastava, 2015
Cognition
• Recall definitions of Data Visualization:
– “visual representations of data to amplify cognition”
– “the purpose of visualization is insight, not pictures”
• What does it mean to “amplify cognition”? What
do we mean by “insight”?
• How does the brain process visual information?
Data Visualization Nikhil Srivastava, 2015
Bandwidth of Our Senses
Why Vision?
“I see”
“Show me”
“kuona”?
Data Visualization Nikhil Srivastava, 2015
The Software• High-level concepts: objects,
symbols
• Involves working memory
• Slower, serial, conscious
• Sensory input
• Low-level features: orientation,
shape, color, movement
• Rapid, parallel, automatic
Visual Perception
“Bottom-up”
Data Visualization Nikhil Srivastava, 2015
The Software• High-level concepts: objects,
symbols
• Involves working memory
• Slow, sequential, conscious
• Sensory input
• Low-level features: orientation,
shape, color, movement
• Rapid, parallel, automatic
Visual Perception
“Bottom-up”
“Top-down”
Data Visualization Nikhil Srivastava, 2015
Task: Counting
How many 3’s?
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
Data Visualization Nikhil Srivastava, 2015
Task: Counting
How many 3’s?
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
Data Visualization Nikhil Srivastava, 2015
Task: Counting
Slow, sequential, conscious
Rapid, parallel, automatic
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686
Data Visualization Nikhil Srivastava, 2015
Task: Search
Slow, sequential, conscious
Rapid, parallel, automatic
Data Visualization Nikhil Srivastava, 2015
Task: Unique SearchSlow, sequential, conscious
Rapid, parallel, automatic
(7)
(5)
(3)
Data Visualization Nikhil Srivastava, 2015
Lessons for Visualization
• Use “pre-attentive” attributes when possible
– Color, shape, orientation (depth, motion)
– Faster, higher bandwidth
• Caveats
– Working memory: magical number 7 (+/- 2)
– Be careful mixing attributes
Data Visualization Nikhil Srivastava, 2015
Eye != Camera
• Fovea: limited aperture
• Rods and cones: limited color
Data Visualization Nikhil Srivastava, 2015
Eye != Camera
• Limited in many ways:
– Aperture, Color, Time, Location
• Evolutionary basis: continuity
• Information density
• So what?
Data Visualization Nikhil Srivastava, 2015
Eye != Camera: Relative
A
B
Data Visualization Nikhil Srivastava, 2015
Lessons for Visualization
• Human vision has limits and constraints
• “What we see” depends on “what we
know”
• Attention and experience matters
Data Visualization Nikhil Srivastava, 2015
Summary
• Human vision is constrained and imperfect
• Use “pre-attentive” attributes carefully
• Minimize unnecessary visual movement
• Layout and scope as important as
measurement
Data Visualization Nikhil Srivastava, 2015
Homework #3 Review
• Hello, Chart
• Highcharts Examples, Documentation, API
• JSFiddle, Developer Tools