lecture 11: pop-out, illusions
TRANSCRIPT
![Page 1: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/1.jpg)
Lecture 11: Pop-out, Illusions
CS 7250SPRING 2021
Prof. Cody DunneNORTHEASTERN UNIVERSITY
1Slides and inspiration from Michelle Borkin, Krzysztof Gajos, Hanspeter Pfister,
Miriah Meyer, Jonathan Schwabish, and David Sprague
![Page 2: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/2.jpg)
CHECKING IN
2
![Page 3: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/3.jpg)
ACCEPT ASSIGNMENT 8 — BRUSHING AND LINKING IN D3
NOW!
4
![Page 4: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/4.jpg)
PREVIOUSLY, ON CS 7250…
5
![Page 5: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/5.jpg)
COLOR
6
![Page 6: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/6.jpg)
Color Vocabulary and
Perceptual Ordering
7Based on Slides by Miriah Meyer, Tamara Munzner
Darkness (Lightness)
Saturation
Hue? ?
![Page 7: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/7.jpg)
8
Use a limited hue palette
• Control color “pop out” with low-saturation colors
• Avoid clutter from too many competing colors
Use neutral backgrounds
• Control impact of color
•
Use Color Brewer etc. for picking scales
Don’t forget aesthetics! Based on Slides by Hanspeter Pfister, Maureen Stone
Color Advice Summary
![Page 8: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/8.jpg)
NOW, ON CS 7250…
9
![Page 9: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/9.jpg)
Hall of Fame or Hall of Shame
10
![Page 10: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/10.jpg)
12FiveThirtyEight, 2015
ColorBrewer 'RdYlBu' scale, 2013
![Page 12: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/12.jpg)
POP-OUT EFFECTS
14
![Page 14: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/14.jpg)
16Davis & Lopez, 2017
A quarterback sneak is a play
in American football and
Canadian football in which
the quarterback, upon taking
the center snap, dives ahead
while the offensive line
surges forward. It is usually
only used in very short
yardage situations.https://en.wikipedia.org/wiki/Quarterback_sn
eak
Which pop-out effects are used in this example
visualization?
![Page 16: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/16.jpg)
18
POP-OUT EFFECTS
“CONJUNCTION” (HARDER TO FIND RED CIRCLE!)
Healey, 2012
![Page 20: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/20.jpg)
22
Use these “popout” effects to help design effective visualizations!
(E.g., draw viewer’s attention to main points, effective redundant encodings,
etc.)
![Page 21: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/21.jpg)
24
The question of discriminability is: if you encode data using a particular visual channel, are the differences between items perceptible to the human as intended?
Discriminability and Separability
Munzner, VAD
![Page 22: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/22.jpg)
26
Textures
easy hard
Ware, VTFD
![Page 23: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/23.jpg)
27
Textures: Interference
Ware, VTFD
![Page 24: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/24.jpg)
ILLUSIONS AND TRICKS
29
![Page 25: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/25.jpg)
Visual Attention & Change Blindness
![Page 26: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/26.jpg)
31
![Page 27: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/27.jpg)
33
Visual Attention & Change Blindness
83% of the radiologists missed the gorilla!http://search.bwh.harvard.edu/new/pubs/DrewVoWolfe13.pdf
Task: Identify the
lumps/nodules in the
patient’s lungs to
look for cancer or
abnormal growth.
![Page 28: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/28.jpg)
The Dress: blue/black or yellow/white?
34
https://en.wikipedia.org/wiki/The_dress
![Page 29: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/29.jpg)
Still or moving?
35Griffin, 2015
![Page 30: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/30.jpg)
Still or moving?
36Griffin, 2015
![Page 31: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/31.jpg)
Still or moving?
37Griffin, 2015
![Page 32: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/32.jpg)
Shepherd's Table Illusion
http://mentalfloss.com/article/28862/brainworks-explaining-optical-illusions-and-other-mental-tricks
38
Illusion based on how we perceive depth/perspective...
![Page 33: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/33.jpg)
Why does this matter for visualization?
![Page 34: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/34.jpg)
![Page 35: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/35.jpg)
Northeastern University, Khoury College, 2016 41
![Page 37: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/37.jpg)
Hall of Fame or Hall of Shame
43
![Page 38: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/38.jpg)
44https://www.washingtonpost.com/graphics/national/oklahoma-earthquakes/
![Page 39: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/39.jpg)
45http://cartonerd.blogspot.com/2014/08/three-dee-thematics.html
![Page 40: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/40.jpg)
46
![Page 43: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/43.jpg)
49
“A Cenozoic record of the equatorial Pacific carbonate compensation depth”
a, Equatorial Pacific accumulation rate history as a functionof geological age at the backtracked and unloaded palaeo-water depth, and using a palaeomagnetic polarity agescheme2 plotted as black and white bars below the figure.Circle area is scaled by accumulation rate: carbonateaccumulation rate (CAR; filled circles), total massaccumulation rate (MAR; open circles). Data are plottedwith a lighter colour outside a ±3.5° band around thepalaeo-equator. The position of the equatorial Pacific CCD isindicated by a solid red line (dashed red line marksreconstruction from off-equatorial sites). See text forabbreviations. b, c, Benthic oxygen (b; blue curve, left-handvertical axis) and carbon (c; green curve, right-hand verticalaxis) isotope values from a global compilation9, reportedrelative to the VPDB (Vienna Pee Dee Belemnite) standard.d, Atmospheric CO2 compilation and error bars from refs 16,40; left-hand vertical axis, log CO2 scale relative to pre-industrial CO2 (1× = 278 p.p.m.v.); right-hand vertical axis,log CO2 scale in absolute values. Error bars are as in ref. 16;for example, for boron δ11B error bars reflect long-termanalytical reproducibility or internal precision, whichever islarger (at 95% confidence). PETM, Palaeocene-EoceneThermal Maximum.
Pälike et al. (2012)
![Page 44: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/44.jpg)
50Pälike et al. (2012)
“A Cenozoic record of the equatorial Pacific carbonate compensation depth”
a, Equatorial Pacific accumulation rate history as a functionof geological age at the backtracked and unloaded palaeo-water depth, and using a palaeomagnetic polarity agescheme2 plotted as black and white bars below the figure.Circle area is scaled by accumulation rate: carbonateaccumulation rate (CAR; filled circles), total massaccumulation rate (MAR; open circles). Data are plottedwith a lighter colour outside a ±3.5° band around thepalaeo-equator. The position of the equatorial Pacific CCD isindicated by a solid red line (dashed red line marksreconstruction from off-equatorial sites). See text forabbreviations. b, c, Benthic oxygen (b; blue curve, left-handvertical axis) and carbon (c; green curve, right-hand verticalaxis) isotope values from a global compilation9, reportedrelative to the VPDB (Vienna Pee Dee Belemnite) standard.d, Atmospheric CO2 compilation and error bars from refs 16,40; left-hand vertical axis, log CO2 scale relative to pre-industrial CO2 (1× = 278 p.p.m.v.); right-hand vertical axis,log CO2 scale in absolute values. Error bars are as in ref. 16;for example, for boron δ11B error bars reflect long-termanalytical reproducibility or internal precision, whichever islarger (at 95% confidence). PETM, Palaeocene-EoceneThermal Maximum.
Yellow = explicit encodings Olive = implicit encodings
![Page 45: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/45.jpg)
Paper Prototyping
51Analitico, 2013; Rajkumar, 2017
![Page 47: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/47.jpg)
Low Fidelity to High Fidelity
CanvasFlip, 2016 53
![Page 48: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/48.jpg)
54
Sketching of Interactivity
Hennigs, 2013
![Page 49: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/49.jpg)
Example Usability Test with a Paper Prototype
55BlueDuckLabs, 2010
![Page 50: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/50.jpg)
56
![Page 51: Lecture 11: Pop-out, Illusions](https://reader034.vdocuments.us/reader034/viewer/2022051323/627bc2e55838d379d01a4745/html5/thumbnails/51.jpg)
Upcoming Assignments & CommunicationLook at the upcoming assignments and deadlines regularly!• Textbook, Readings, & Reading Quizzes — Variable days• In-Class Activities — 11:59pm same day as class
F: In-class project feedback meetings & workNext T: Lecture, Next F: Lecture, Next-Next T: Lecture
• Assignments & Projects— Generally due R 11:59pmR (2 days):
Assignment 7 (D3 Events) Project 3 — Interview & Task Analysis
Next R (9 days): Project 4 — Data Collection & Exploration, SketchesNext-next R (16 days):
Assignment 8 — Brushing and Linking in D3Project 5 — Final "Interactive" Visualization Sketch, Implementation
Plan, & Group Charter
Use Canvas Discussions for general questions, email the TAs/S-LTA/instructor for questions specific to you: [email protected]. Include links!
If you’re emailing about a particular assignment, please include the URL of the Submission Details page. (Canvas documentation.)
If you have a project question, give us your group number. E.g., include: `Group ## — Topic` with ‘##’ replaced by your group number and ‘Topic’ replaced by your topic.