The objective of this course is to introduce the principles and techniques of data visualization. Students will learn the basic concepts of communicating information through graphics and apply these concepts in building a visualization of their own.
Lecture 2: Seeing and Thinking
2. 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
3. Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Useful
– Answers user questions
– Reduces user workload
(by design, not by default)
4. Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Important
– Understand structure and patterns
– Resolve ambiguity
– Locate outliers
5. Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Important
– Design decisions affect interpretation
6. Data Visualization Nikhil Srivastava, 2015
Data Visualization is:
• Powerful
– Communicate, teach, inspire
7. Data Visualization Nikhil Srivastava, 2015
Why is DV relevant?
• In one second …
• Open data
• Open technologies
• Growing popularity and widespread use
8. Data Visualization Nikhil Srivastava, 2015
Focus Extra
purpose communicate explore, analyze
data numerical,
categorical
text, maps,
graphs, networks
feature representation animation,
Interactivity
Course Scope
9. 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?
16. 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
17. 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?
22. 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”
23. 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”
24. Data Visualization Nikhil Srivastava, 2015
Task: Counting
How many 3’s?
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
25. Data Visualization Nikhil Srivastava, 2015
Task: Counting
How many 3’s?
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
38. 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
49. Data Visualization Nikhil Srivastava, 2015
Eye != Camera
• Limited in many ways:
– Aperture, Color, Time, Location
• Evolutionary basis: continuity
• Information density
• So what?
58. 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
61. 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
64. Data Visualization Nikhil Srivastava, 2015
Homework #4
• (Catch up: Homework #3)
• Email proposal for final project
– Data source
– Purpose
– User tasks/questions addressed
– Team member (if needed/helpful)
• Bring laptop next time!
Editor's Notes
Alright, let’s get started – what is data visualization?
We’ve learned that data visualization can be useful in telling us things about a set of data, making it easier to find information and answer questions. We’ve also learned that this usefulness depends both on the design of the visualization and the specific information we are looking for.
So we’ve learned that DV is important. It can help us resolve ambiguous data, locate outliers, and generally understand the structure and pattern of a data set.
Mutisya
Leon
Andrew
Kevin
Savio
Savio
Visualization by Tor Norretranders, referenced by David McCandless, demonstrating the data bandwidth of each of our senses.
Note: this is not a very good visualization! (Is the size of the sight region measured by the blue shape only, or the full rectangle?)
Visualization by Tor Norretranders, referenced by David McCandless, demonstrating the data bandwidth of each of our senses.
Note: this is not a very good visualization! (Is the size of the sight region measured by the blue shape only, or the full rectangle?)
This is a drawing of a cat retina by the famous Spanish neuroscientist Santiago Ramon y Cajal. It’s included first because it’s a very beautiful and detailed visualization (though more of a “scientific visualization” than a “data visualization”), and second because it shows how visual information is communicated through a hierarchy of cells.
This hierarchy exists not only in the eye but also in the visual cortex – the part of the brain that deals with vision. At each layer, information is combined “bottom up” to represent more abstract features: presence, orientation, color, shape, eventually even faces (probably). At the same time, information is passed “top down” to influence the perception.
This hierarchy persists.
Also, at each level we have detections of different features and objects. Face-specific cells.
![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:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)