![Page 1: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/1.jpg)
Dynamic Insets for Context-Aware Graph
Navigation
Sohaib GhaniPurdue UniversityWest Lafayette, IN
USA
Nathalie RicheMicrosoft Research
Redmond, WAUSA
Niklas ElmqvistPurdue UniversityWest Lafayette, IN
USA
IEEE EuroVis 2011June 1-3, 2011 ▪ Bergen, Norway
![Page 2: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/2.jpg)
2
(realistic) graphs are big…
…but screens are small!
![Page 3: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/3.jpg)
3
The Case for Context-Aware Graph Navigation:What is outside the screen is just as important as whatis on it!
Source: sean dreilinger, Flickr
![Page 4: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/4.jpg)
4
Recent TrendUse the graph topology to
inform navigation
[Moscovich et al 2009]
![Page 5: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/5.jpg)
5
DEMO
![Page 6: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/6.jpg)
6
Outline
Motivation Dynamic Insets
Design Interaction
Evaluation Application Examples Conclusions & Future Work
![Page 7: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/7.jpg)
7
Dynamic Insets: Basic Idea
![Page 8: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/8.jpg)
8
Degree of Interest (DOI)
Rank off-screen nodes Show N nodes with highest DOI in
inset DOI functions
Neighbors (DOI = 1) Neighbors divided by distance
(DOI=1/d) GPS: nearby gas stations Airline: ticket price, travel time, #stops,
etc Social network: graph metrics
![Page 9: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/9.jpg)
9
Flipping Insets
![Page 10: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/10.jpg)
10
Drag-to-Fan
![Page 11: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/11.jpg)
11
Distance Visualization
![Page 12: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/12.jpg)
12
Evaluation (1)
Participants: 12 Techniques: 2
BG – Bring & Go [Moscovich et al 2009] DI – Dynamic Insets
Tasks: 3 Count neighbors Close context Distant context
Densities: 2 (next)
![Page 13: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/13.jpg)
13
Tasks (1)
Sparse Dense
![Page 14: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/14.jpg)
14
Results (1)
RM-ANOVA, p < .05
Close Distant Count
BG
DI
BG DI
![Page 15: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/15.jpg)
15
Evaluation (2)
Follow-up qualitative evaluation Usability and scalability of DI
Two scenarios Geographic maps (road networks) Social network (AVI co-authorship)
Participants: 6 Tasks: 20 graph-related (Lee et al
2006) Duration: 30 (map) + 30 (soc)
minutes
![Page 16: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/16.jpg)
16
Example 1: Road Networks
![Page 17: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/17.jpg)
17
Example 2: Social Network
![Page 18: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/18.jpg)
18
Results (2)
Efficiency Enjoyability Ease of use Visual clutter Aids mental map
Context utility Use in daily work?
0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
5
GeoMap SocNet
![Page 19: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/19.jpg)
19
Example 3: UML Editor
![Page 20: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/20.jpg)
20
Conclusions
Dynamic insets provide context-aware graph navigation Insets show destination of edges leaving
border of screen Design parameters include DOI
functions, layout, occlusion Applications: map, networks, UML,
etc User studies confirm usefulness
![Page 21: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/21.jpg)
21
Turn left onto I-94W
![Page 22: Dynamic Insets for Context-Aware Graph Navigation](https://reader036.vdocuments.mx/reader036/viewer/2022081413/546cc389af7959e91e8b5cc6/html5/thumbnails/22.jpg)
22
Thank You!
Contact Information:Sohaib GhaniSchool of Electrical & Computer EngineeringPurdue UniversityWest Lafayette, IN, USA
E-mail: [email protected]
http://engineering.purdue.edu/pivot/