Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 ·...
Transcript of Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 ·...
![Page 1: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/1.jpg)
Part 3: Multiples, Navigation,
Focus+ContextInformation Visualization Mini-Course
TECS Week 2008
Tamara Munzner
UBC Computer Science
10 January 2008
1 / 42
![Page 2: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/2.jpg)
Mini-Course Outline◮ Part 1: Monday morning
◮ Intro◮ Design Studies◮ Models◮ Perception and Memory
◮ Part 2: Monday afternoon◮ Color◮ Space, Layers, and Ordering◮ Statistical Graphics
◮ Part 3: Thursday afternoon◮ Multiples and Interaction◮ Navigation and Zooming◮ Focus+Context
◮ Part 4: Friday morning◮ High Dimensional Data◮ Graphs and Trees◮ User Studies
2 / 42
![Page 3: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/3.jpg)
Small Multiples
Edward Tufte. Envisioning Information. Chap 4: Small Multiples.
Graphics Press, 1990.
◮ several small windows with◮ same visual encoding◮ different data◮ shown side by side
[Edward Tufte. The Visual Display of Quantitative Information, p 172]
3 / 42
![Page 4: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/4.jpg)
Coordinated Multiple Views (CMV)
◮ more general than small multiples
◮ multiple views◮ multiform: different visual encodings of same data◮ different resolutions of same encoding
◮ overview+detail
◮ power of linking◮ linked highlighting (brushing)◮ linked navigation◮ linked parameter changes
4 / 42
![Page 5: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/5.jpg)
CMV Example: cdv
[cdv from Dykes, Figure 2 of State of the Art: Coordinated & Multiple
Views in Exploratory Visualization. Roberts, Proc. CMV 2007]5 / 42
![Page 6: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/6.jpg)
Example: Complex Application
[ Building Highly-Coordinated Visualizations In Improvise. Chris
Weaver. Proc. InfoVis 2004]
6 / 42
![Page 7: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/7.jpg)
Multiform Matrices and Small Multiples
◮ matrices for bivariate exploration (SPLOM and other)◮ vs. small multiples for univariate
◮ uniform vs. multiform multiples
◮ techniques◮ juxtaposition◮ sorting/ordering◮ manipulation◮ linking multiple bivariate views
[ Exploring High-D Spaces with Multiform Matrices and Small
Multiples. Alan MacEachren, Xiping Dai, Frank Hardisty, Diansheng
Guo, and Gene Lengerich. Proc InfoVis 2003. ]
7 / 42
![Page 8: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/8.jpg)
Multiform Bivariate Small Multiple
◮ common variable: per capita income◮ per-column variables: type of cancer mortality◮ per-row forms: scatterplot, choropleth/thematic map
◮ left bright green: high income, low cervical cancer◮ hypoth: not screened
◮ right dark green: low income, high breast cancer◮ hypoth: late childbearing
[ Exploring High-D Spaces with Multiform Matrices and Small
Multiples. MacEachren et al, Proc. InfoVis 2003. ] 8 / 42
![Page 9: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/9.jpg)
Multiform Bivariate Matrix◮ scatterplots/maps, histograms along diagonal
◮ per-column vars: mortality, early detection, recent
screening
◮ univariate map var: screening facility availability
[ Exploring High-D Spaces with Multiform Matrices and Small
Multiples. MacEachren et al, Proc. InfoVis 2003. ] 9 / 42
![Page 10: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/10.jpg)
Sorting and Linking
◮ sorting◮ manual: direct manipulation from user◮ automatic: conditional entropy metric◮ automatic: hierarchical clustering to find interesting
◮ linking◮ highlighting◮ many others
◮ background color, subspce, conditioning, ...
◮ conditioning: filter in/out of given range on another var
◮ video
10 / 42
![Page 11: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/11.jpg)
Critique
◮ great previous work taxonomy
◮ great explanation of how vis techniques used with
specific data can lead to hypothesis generation
◮ careful use of color
11 / 42
![Page 12: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/12.jpg)
Multiples: Readings
Tufte, Chap 4: Small Multiples
State of the Art: Coordinated & Multiple Views in Exploratory
Visualization. Jonathan C. Roberts. Proc. Conference on
Coordinated & Multiple Views in Exploratory Visualization (CMV)
2007.
Building Highly-Coordinated Visualizations In Improvise. Chris
Weaver. Proc. InfoVis 2004
Exploring High-D Spaces with Multiform Matrices and Small
Multiples. Alan MacEachren, Xiping Dai, Frank Hardisty, Diansheng
Guo, and Gene Lengerich. Proc InfoVis 2003.
12 / 42
![Page 13: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/13.jpg)
Mini-Course Outline◮ Part 1: Monday morning
◮ Intro◮ Design Studies◮ Models◮ Perception and Memory
◮ Part 2: Monday afternoon◮ Color◮ Space, Layers, and Ordering◮ Statistical Graphics
◮ Part 3: Thursday afternoon◮ Multiples and Interaction◮ Navigation and Zooming◮ Focus+Context
◮ Part 4: Friday morning◮ High Dimensional Data◮ Graphs and Trees◮ User Studies
13 / 42
![Page 14: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/14.jpg)
What Kind of Motion?
◮ rigid◮ rotate/pan/zoom◮ easy to understand◮ object shape static, positions change
◮ morph/change/distort◮ object evolves
◮ beating heart, thunderstorm, walking person
◮ multiscale/ZUI◮ object appearance changes by viewpoint
◮ focus+context◮ carefully chosen distortion
14 / 42
![Page 15: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/15.jpg)
Spatial Navigation
◮ real navigation only partially understood◮ compared to low-level perception, JNDs
◮ spatial memory / environmental cognition◮ city: landmark/path/whole
◮ implicit logic◮ evolved to deal with reality◮ so we’ll learn from synthetic worlds
◮ but we can’t fly in 3D...
◮ how much applies to synthetic environments?◮ even perception not always the same!
15 / 42
![Page 16: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/16.jpg)
Macro/Micro
◮ classic example: map◮ arms-length vs. up-close
◮ paper vs. computer screen◮ 300-600 dpi vs. 72 dpi (legally blind)◮ finally changing
[Tufte, Envisioning Information. Chapter 2: Macro/Micro.]
16 / 42
![Page 17: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/17.jpg)
Pad++
◮ ”infinitely” zoomable user interface (ZUI) [video]
[Pad++: A Zooming Graphical Interface for Exploring Alternate
Interface Physics Bederson and Hollan, Proc UIST 94]
17 / 42
![Page 18: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/18.jpg)
Space-Scale Diagrams
◮ reasoning about navigation and trajectories
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
18 / 42
![Page 19: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/19.jpg)
Viewing Window
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
19 / 42
![Page 20: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/20.jpg)
1D Version
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
20 / 42
![Page 21: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/21.jpg)
Pan-Zoom Trajectories
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
21 / 42
![Page 22: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/22.jpg)
Joint Pan-Zoom Problem
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
22 / 42
![Page 23: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/23.jpg)
Shortest Path?
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
23 / 42
![Page 24: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/24.jpg)
Shortest Path
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
24 / 42
![Page 25: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/25.jpg)
Shortest Path, Details
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
25 / 42
![Page 26: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/26.jpg)
Semantic Zooming
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
26 / 42
![Page 27: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/27.jpg)
Multiscale Display
Space-Scale Diagrams: Understanding Multiscale InterfacesGeorge Furnas and Ben Bederson, Proc SIGCHI ’95.www.cs.umd.edu/hcil/pad++/papers/chi-95-spacescale/chi-95-spacescale.pdf
27 / 42
![Page 28: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/28.jpg)
OrthoZoom◮ scale/zoom ratio target: 32 bits, 1:3B
◮ index of difficulty: ID = log(1 + D/W )◮ D = target distance, W = target size
◮ control area larger than graphical representation◮ zoom factor is orthogonal cursor-slider distance
[ OrthoZoom Scroller: 1D Multi-Scale Navigation. Catherine Appert and Jean-DanielFekete. Proc. SIGCHI 06, pp 21-30.]
28 / 42
![Page 29: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/29.jpg)
OrthoZoom
◮ multi-scale table of contents (video)
[ OrthoZoom Scroller: 1D Multi-Scale Navigation. Catherine Appert and Jean-DanielFekete. Proc. SIGCHI 06, pp 21-30.]
29 / 42
![Page 30: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/30.jpg)
Navigation: Readings
Envisioning Information. Chapter 2: Macro/Micro. Edward Tufte,
Graphics Press 1990.
Pad++: A Zooming Graphical Interface for Exploring Alternate
Interface Physics Ben Bederson, and James D Hollan, Proc UIST 94.
Space-Scale Diagrams: Understanding Multiscale Interfaces George
Furnas and Ben Bederson, Proc SIGCHI 95.
OrthoZoom Scroller: 1D Multi-Scale Navigation. Catherine Appert
and Jean-Daniel Fekete. Proc. SIGCHI 06, pp 21-30.
30 / 42
![Page 31: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/31.jpg)
Nav: Further Reading
Smooth and Efficient Zooming and Panning. Jack J. van Wijk and Wim A.A. Nuij, Proc.InfoVis 2003, p. 15-22
Speed-Dependent Automatic Zooming for Browsing Large Documents Takeo Igarashiand Ken Hinckley, Proc. UIST 00, pp. 139-148.
Rapid Controlled Movement Through a Virtual 3D Workspace Jock Mackinlay, StuartCard, and George Robertson. Proc SIGGRAPH ’90, pp 171-176.
Effective View Navigation, George W. Furnas, Proc. SIGCHI 97, pp. 367-374
Critical Zones in Desert Fog: Aids to Multiscale Navigation, Susanne Jul and GeorgeW. Furnas, Proc. UIST 98
Design Guidelines for Landmarks to Support Navigation in Virtual EnvironmentsNorman G. Vinson, Proc. SIGCHI 99.
Tuning and testing scrolling interfaces that automatically zoom Andy Cockburn, JoshuaSavage, Andrew Wallace. Proc CHI 05.
31 / 42
![Page 32: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/32.jpg)
Mini-Course Outline◮ Part 1: Monday morning
◮ Intro◮ Design Studies◮ Models◮ Perception and Memory
◮ Part 2: Monday afternoon◮ Color◮ Space, Layers, and Ordering◮ Statistical Graphics
◮ Part 3: Thursday afternoon◮ Multiples and Interaction◮ Navigation and Zooming◮ Focus+Context
◮ Part 4: Friday morning◮ High Dimensional Data◮ Graphs and Trees◮ User Studies
32 / 42
![Page 33: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/33.jpg)
Avoiding Disorientation
◮ problem◮ maintain user orientation when showing detail◮ hard for big datasets
◮ example: trees exponential in depth◮ node count, space needed
global overview
the
brown
fox
quick
quailrabbitscorpiontapir
Q−R
S−T
unicornviperwhalex−beast
U−V
W−X
zebraAnteaterBadger
Y−Z
a−b
CaimanDog
Flamingo
c−d
e−f
orangutangpossum
aardvarkbaboon
A−B
C−Dcapybaradodoelephantferretgibbonhamsteriguanajerboakangaroolionmongoosenutria
E−F
G−H
I−J
K−L
M−N
O−P
yellowtail
Earthworm
fourth
third
second
first
eighth
fifth
sixth
seventh
tiptop
done
almost
local detail
quailrabbitscorpiontapir
orangutangpossum
jerboakangaroolionmongoosenutria
Q−R
S−T
K−L
M−N
O−P
33 / 42
![Page 34: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/34.jpg)
Overview and Detail
◮ one approach: use two windows for linked overview◮ cognitive load to correlate?
◮ another approach:◮ merge overview, detail◮ focus+context
34 / 42
![Page 35: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/35.jpg)
Focus+Context Intuition
◮ move part of surface closer to eye
◮ stretchable rubber sheet
◮ borders tacked down
◮ merge overview and detail into combined view◮ geometric distortion: often, but not always
35 / 42
![Page 36: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/36.jpg)
Bifocal Display
transformation magnification
1D 2D
36 / 42
![Page 37: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/37.jpg)
Perspective Wall
transformation magnification
1D 2D
37 / 42
![Page 38: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/38.jpg)
Polyfocal: Continuous Magnification
transformation magnification
1D 2D
38 / 42
![Page 39: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/39.jpg)
Fisheye Views: Continuous Mag
transformation magnification
1D 2D rect polar norm polar
39 / 42
![Page 40: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/40.jpg)
Multiple Foci
same params diff params
polyfocal magnification function dips allow this
40 / 42
![Page 41: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/41.jpg)
2D Hyperbolic Trees
◮ fisheye effect from hyperbolic geometry◮ demo http://ucjeps.berkeley.edu/map2.html
[Lamping and Rao. The Hyperbolic Browser: A Focus + Context
Technique for Visualizing Large Hierarchies. Proc SIGCHI ’95.
http://citeseer.nj.nec.com/lamping95focuscontext.html] 41 / 42
![Page 42: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/42.jpg)
SpaceTree
◮ focus+context tree: filtering, not geometric distortion◮ animated transitions
◮ semantic zooming
◮ demo
42 / 42
![Page 43: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/43.jpg)
F+C: Readings
A Review and Taxonomy of Distortion-Oriented Presentation Techniques. Y.K. Leungand M.D. Apperley, ACM Transactions on Computer-Human Interaction, Vol. 1, No. 2,June 1994, pp. 126-160. [http://www.ai.mit.edu/people/jimmylin/papers/Leung94.pdf]
The Hyperbolic Browser: A Focus + Context Technique for Visualizing LargeHierarchies. John Lamping and Ramana Rao, Proc SIGCHI ’95.[http://citeseer.nj.nec.com/lamping95focuscontext.html]
SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution andEmpirical Evaluation. Catherine Plaisant, Jesse Grosjean, and Ben B. Bederson. Proc.InfoVis 2002.ftp://ftp.cs.umd.edu/pub/hcil/Reports-Abstracts-Bibliography/2002-05html/2002-05.pdfTreeJuxtaposer: Scalable Tree Comparison using Focus+Context with GuaranteedVisibility. Munzner, Guimbretiere, Tasiran, Zhang, and Zhou. SIGGRAPH 2003.[http://www.cs.ubc.ca/∼tmm/papers/tj/]
43 / 42
![Page 44: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/44.jpg)
F+C: Further Reading
A Fisheye Follow-up: Further Reflection on Focus + Context. George W. Furnas.SIGCHI 2006.
H3: Laying Out Large Directed Graphs in 3D Hyperbolic Space Tamara Munzner, ProcInfoVis 97.
Nonlinear Magnification Fields. Alan Keahey, Proc InfoVis 1997
Effects of 2D Geometric Transformations on Visual Memory. Heidi Lam, Ronald A.Rensink, and Tamara Munzner. Proc. Applied Perception in Graphics and Visualization(APGV 2006), 119-126, 2006
Overview Use in Multiple Visual Information Resolution Interfaces. Heidi Lam, TamaraMunzner, and Robert Kincaid. IEEE TVCG 13(6):1278–1285 (Proc. InfoVis 07), 2007.
44 / 42
![Page 45: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/45.jpg)
1
TreeJuxtaposer
• side by side comparison of evolutionary trees
TreeJuxtaposer: Scalable Tree Comparison using
Focus+Context with Guaranteed Visibility. Tamara Munzner,
Francois Guimbretiere, Serdar Tasiran, Li Zhang, and Yunhong
Zhou. Proc SIGGRAPH 2003, p 453-472
![Page 46: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/46.jpg)
2
Phylogenetic/Evolutionary Tree
M Meegaskumbura et al., Science 298:379 (2002)
![Page 47: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/47.jpg)
3
Common Dataset Size Today
M Meegaskumbura et al., Science 298:379 (2002)
![Page 48: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/48.jpg)
4
Future Goal: 10M node Tree of Life
David Hillis, Science 300:1687 (2003)
Plants
Protists
Fungi
Animals
You are
here
![Page 49: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/49.jpg)
5
Paper Comparison: Multiple Trees
focus
context
![Page 50: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/50.jpg)
6
Accordion Drawing• rubber-sheet navigation
– stretch out part of surface,the rest squishes
– borders nailed down
– Focus+Context technique• integrated overview, details
– old idea• [Sarkar et al 93],
[Robertson et al 91]
• guaranteed visibility– marks always visible
– important for scalability
– new idea• [Munzner et al 03]
![Page 51: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/51.jpg)
77
Guaranteed Visibility
• marks are always visible
• easy with small datasets
![Page 52: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/52.jpg)
8
Guaranteed Visibility Challenges
• hard with larger datasets
• reasons a mark could be invisible
![Page 53: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/53.jpg)
9
Guaranteed Visibility Challenges
• hard with larger datasets
• reasons a mark could be invisible
– outside the window
• AD solution: constrained navigation
![Page 54: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/54.jpg)
10
Guaranteed Visibility Challenges
• hard with larger datasets
• reasons a mark could be invisible
– outside the window
• AD solution: constrained navigation
– underneath other marks
• AD solution: avoid 3D
![Page 55: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/55.jpg)
11
Guaranteed Visibility Challenges
• hard with larger datasets
• reasons a mark could be invisible
– outside the window
• AD solution: constrained navigation
– underneath other marks
• AD solution: avoid 3D
– smaller than a pixel
• AD solution: smart culling
![Page 56: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/56.jpg)
12
Guaranteed Visibility: Small Items
• Naïve culling may not draw all marked items
GV no GV
Guaranteed visibility
of marks
No guaranteed visibility
![Page 57: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/57.jpg)
13
Guaranteed Visibility: Small Items
• Naïve culling may not draw all marked items
GV no GV
Guaranteed visibility
of marks
No guaranteed visibility
![Page 58: Part 3: Multiples, Navigation, Focus+Contexttmm/talks/tecs08/part3.handout.pdf · 2008-01-04 · Mini-Course Outline Part 1: Monday morning Intro Design Studies Models Perception](https://reader036.fdocuments.us/reader036/viewer/2022070803/5f0303737e708231d4071bfa/html5/thumbnails/58.jpg)
14
TreeJuxtaposer
• video, software from olduvai.sourceforge.net/tj