The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual...
Transcript of The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual...
![Page 1: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/1.jpg)
1
The Purpose of VisualizationManeesh Agrawala
CS 448B: VisualizationFall 2020
1
How much data (bytes) did we produce in 2016?
2
![Page 2: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/2.jpg)
2
2016: 16.1 zetabytes
[Gantz 2017]
3
2016: 16.1 zetabytes10x increase over 5 years
[Gantz 2017]
4
![Page 3: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/3.jpg)
3
Physical Sensors
Image courtesy cabspotting.org
5
Health & Medicine
6
![Page 4: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/4.jpg)
4
Records of Human Activity
7
Wikipedia: Collaborative Creation
8
![Page 5: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/5.jpg)
5
Wikipedia: Collaborative Creation
9
Wikipedia History Flow (IBM)
10
![Page 6: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/6.jpg)
6
11
“The ability to take data—to be able to understandit, to process it, to extract value from it, to visualize it, to communicate it—that’s going to be a hugely important skill in the next decades, … because now we really do have essentially free and ubiquitous data. So the complimentary scarce factor is the ability to understand that data and extract value from it.”
Hal Varian, Google’s Chief EconomistThe McKinsey Quarterly
January 2009
12
![Page 7: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/7.jpg)
7
“What information consumes is rather obvious: it consumes the attention of its recipients. Hence a wealth of information creates a poverty of attention, and a need to allocate that attention efficiently among the overabundance of information sources that might consume it.”
Herb Simonas quoted by Hal Varian
Scientific AmericanSeptember 1995
13
What is visualization?
14
![Page 8: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/8.jpg)
8
Examples
15
Examples
16
![Page 9: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/9.jpg)
9
Examples
17
What is visualization?“Transformation of the symbolic into the geometric”
[McCormick et al. 1987]
“... finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]
“The use of computer-generated, interactive, visual representations of data to amplify cognition.”[Card, Mackinlay, & Shneiderman 1999]
19
![Page 10: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/10.jpg)
10
Set A Set B Set C Set DX Y X Y X Y X Y10 8.04 10 9.14 10 7.46 8 6.588 6.95 8 8.14 8 6.77 8 5.76
13 7.58 13 8.74 13 12.74 8 7.719 8.81 9 8.77 9 7.11 8 8.84
11 8.33 11 9.26 11 7.81 8 8.4714 9.96 14 8.1 14 8.84 8 7.046 7.24 6 6.13 6 6.08 8 5.254 4.26 4 3.1 4 5.39 19 12.5
12 10.84 12 9.11 12 8.15 8 5.567 4.82 7 7.26 7 6.42 8 7.915 5.68 5 4.74 5 5.73 8 6.89
[Anscombe 73]
Summary Statistics Linear Regression
uX = 9.0 σX = 3.317 Y = 3 + 0.5 XuY = 7.5 σY = 2.03 R2 = 0.67
20
0
2
4
6
8
10
12
14
0 2 4 6 8 10 12 14 16
0
2
4
6
8
10
12
14
0 2 4 6 8 10 12 14 16
0
2
4
6
8
10
12
14
0 2 4 6 8 10 12 14 16
0
2
4
6
8
10
12
14
0 2 4 6 8 10 12 14 16 18 20
Set A
Set C Set D
Set B
X X
Y
Y
21
![Page 11: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/11.jpg)
11
Why do we create visualizations?
22
Why do we create visualizations?!Answer questions (or discover them)!Make decisions!See data in context! Expand memory!Support graphical calculation! Find patterns!Present argument! Tell a story! Inspire
27
![Page 12: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/12.jpg)
12
The Purpose of VisualizationRecord information
! Photographs, blueprints, …
Support reasoning about information (analyze)! Process and calculate! Reason about data! Expand memory
Convey information to others (present)! Share and persuade! Emphasize important aspects of data
28
Record Information
29
![Page 13: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/13.jpg)
13
Answer question
Gallop, Bay Horse “Daisy” [Muybridge 1884-86]
30
Answer question
Gallop, Bay Horse “Daisy” [Muybridge 1884-86]
31
![Page 14: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/14.jpg)
14
Photographs: Phases of the moon
32
Drawing: Phases of the moon
Galileo’s drawings of the phases of the moon from 1616http://galileo.rice.edu/sci/observations/moon.html
33
![Page 15: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/15.jpg)
15
Other recording instruments
Marey’s sphygmograph [from Braun 83]
34
Support Reasoning
36
![Page 16: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/16.jpg)
16
Make a decision: Challenger
2 of 13 pages of material faxed to NASA by Morton Thiokol [from Tufte 1997]
37
Make a decision: Challenger
38
![Page 17: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/17.jpg)
17
Make a decision: Challenger
Visualizations drawn by Tufte show how low temperatures damage O-rings [Tufte 97]
39
Make a decision: Challenger
Visualizations drawn by Tufte show how low temperatures damage O-rings [Tufte 97]
40
![Page 18: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/18.jpg)
18
See data in context: Cholera outbreak
In 1854 John Snow plotted the position of each cholera case on a map. [from Tufte 83]
41
See data in context: Cholera outbreak
Used map to support hypothesis Broad St. pump was the cause. [from Tufte 83]
42
![Page 19: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/19.jpg)
19
Expand memory: MultiplicationClass Exercise
43
Expand memory: Multiplication
34x 87
44
![Page 20: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/20.jpg)
20
Expand memory: Multiplication
34x 87238
27202958
45
Expand memory: Multiplication
74x 48
46
![Page 21: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/21.jpg)
21
020406080
100120
Mental Paper & Pencil
Tim
e (S
ec.)
Expand memory: Multiplication
74x 48592
29603552
47
Most powerful brain?
52
![Page 22: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/22.jpg)
22
The Dragons of Eden [Carl Sagan]
Most powerful brain?
53
The Elements of Graping Data [Cleveland]
Tell a story: Most powerful brain?
54
![Page 23: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/23.jpg)
23
Convey Information to Others
55
Beautiful Evidence [Tufte]
Most powerful brain?
56
![Page 24: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/24.jpg)
24
Present argument
Crimean War Deaths [Nightingale 1858]
“to affect thro‘ the eyes what we fail to convey to the public through their word-proof ears”
57
X-ray crystallography of DNA [Franklin 52]
Inspire
Bones in hand [from 1918 edition]
58
![Page 25: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/25.jpg)
25
Double helix model [Watson and Crick 53]
Inspire
Bones in hand [from 1918 edition]
59
The Purpose of VisualizationRecord information
! Photographs, blueprints, …
Support reasoning about information (analyze)! Process and calculate! Reason about data! Expand memory
Convey information to others (present)! Share and persuade! Emphasize important aspects of data
60
![Page 26: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/26.jpg)
26
Goals of visualization research
1. Understand how visualizations convey information! What do people perceive/comprehend ?! How do visualizations correspond with mental models of data?
2. Develop principles and techniques for creating effective visualizations and supporting analysis! Leverage perception and cognition! Strengthen connection between visualization and mental models
68
Course Topics
69
![Page 27: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/27.jpg)
27
Data and image models
[Bertin, Graphics and Graphic Information Processing 1981]
70
Visualization Design & ReDesign
Problematic design Redesign
71
![Page 28: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/28.jpg)
28
Exploratory Data Analysis
Tableau -- based on Polaris [Stolte, Tang, Hanrahan]
72
Using Space Effectively
http://www.ncgia.ucsb.edu/projects/Cartogram_Central/types.html
73
![Page 29: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/29.jpg)
29
Interaction
Oakland Crimespotting (crimespotting.org) [Stamen]
74
Introduction to D3
D3: Data Driven Documents [Bostock 2011]
75
![Page 30: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/30.jpg)
30
Perception
The psychophysics of sensory function [Stevens 61]
76
Visual Explainers
Gapminder [Rosling]
77
![Page 31: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/31.jpg)
31
Color
[from Cynthia Brewer http://www.personal.psu.edu/faculty/c/a/cab38/ ]
78
Animation
Animated Transitions [Heer 07]
79
![Page 32: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/32.jpg)
32
Networks
Degree-of-Interest Trees [Heer 2004]
80
You should expect to
1. Design, evaluate and critique visualizations
2. Explore data using existing visualization tools
3. Implement interactive data visualizations
4. Develop a substantial visualization project
90
![Page 33: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/33.jpg)
33
Course Mechanics
91
Instructor: Maneesh Agrawala
92
![Page 34: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/34.jpg)
34
Course Assistant: Dae Hyun Kim
93
Office HoursManeesh: 1:30-3pm Wed, Canvas/Zoom & by appt.
Dae Hyun: 7-8:00pm Tue, Canvas/Zoom & by appt.
Outside of OH use Piazza to conect with ushttps://piazza.com/stanford/fall2020/cs448b/
94
![Page 35: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/35.jpg)
35
Textbooks
See also: www.edwardtufte.com
95
Interactive Notebooks
Hands-on engagement with course concepts and modern visualization tools (Vega-Lite / D3), in JavaScript (Observable)
96
![Page 36: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/36.jpg)
36
Optional TextbookFor additional theory and depth
97
Optional BookFor learning D3!
Book available online Code/examples on GitHub
We will be using D3 v6 https://d3js.org
98
![Page 37: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/37.jpg)
37
Readings! From books, notebooks and linked articles
Many open to public, some may require SUNetID/Password
! Material in class will be loosely based on readings! Readings should be read by start of class
! Post comments (about reading, notebooks or lecture) using link on class webpageOne comment per week through week 9Must post by end of the weekYou have 1 pass for the quarter
Class home pagehttps://magrawala.github.io/cs448b-wi20/
99
Reading/Notebook/Lecture Responses
Good responses typically exhibit one or more ! Critiques of arguments made in the papers/lectures! Analysis of implications or future directions for ideas in readings/lectures! Insightful questions about the readings/lectures
Responses should not be summaries
100
![Page 38: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/38.jpg)
38
Discussion Discussion is essential for effective design,
evaluation and critique of visualizations
!Attendance for is very highly recommended !Video – please leave on if you are comfortable doing so
101
AssignmentsClass participation (10%)
Assignment 1: Visualization Design (10%) due 9/22
Assignment 2: Exploratory Data Analysis (15%) due 10/6Learn to use Tableau
Assignment 3: Interactive Prototype (25%) due 10/20Should be familiar with Javascript (start now if you are not)Will cover basics of D3 in class
Final Project (40%) proposal due 10/27, presentation 11/10
102
![Page 39: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/39.jpg)
39
Final projectEither
! Create an extended visual explainer
! Small visualization research project
Projects from previous classes have been:
! Gone viral on blogs
! Published as research papers
! Released as open source projects
103
Structure of Musicals
Lyrical themes in Hamilton [Townley-Smith, Sterman, Cook 2016]
104
![Page 40: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/40.jpg)
40
Visualization of Narrative Structure
Character interactions and sentiment in The Hobbit [Bilenko,Miyakawa 2013]
105
deepviz: Visualizing Convolutional NNs
1) Filter details 2) Image selector 3) Network overview 4) Filter visualization 5) Visualization selector 6) Selection helper 7) Animation slider
[Bruckner,Rosen,Sparks 2013]
106
![Page 41: The Purpose of Visualization€¦ · “The use of computer-generated, interactive, visual representations of data to amplify cognition. ... Present argument!Tell a story!Inspire](https://reader034.fdocuments.in/reader034/viewer/2022051917/6009726e8580be19d01ea4a3/html5/thumbnails/41.jpg)
41
Assignment 1: Visualization Design
Due by 7am on Tue Sep 22
Design a static visualization for a data set.
You must choose the message you want to convey. What question(s) do you want to answer? What insight do you want to communicate?
107
Assignment 1: Visualization Design
Due by 7am on Tue Sep 22
Pick a guiding question, use it to title your visualization
Design a static visualization for that question
You are free to use any tools (including pen & paper)
Deliverables (upload via Canvas; see A1 page)
PDF of your visualization with a short description including design rationale (≤ 4 paragraphs)
108