22
Dynamic Insets for Context-Aware Graph Navigation Sohaib Ghani Purdue University West Lafayette, IN USA Nathalie Riche Microsoft Research Redmond, WA USA Niklas Elmqvist Purdue University West Lafayette, IN USA IEEE EuroVis 2011 June 1-3, 2011 ▪ Bergen, Norway

Dynamic Insets for Context-Aware Graph Navigation

Embed Size (px)

DESCRIPTION

Slides from IEEE EuroVis 2011 on dynamic insets for providing context in graphs, such as social networks, geographic maps, and UML diagrams.

Citation preview

Page 1: Dynamic Insets for Context-Aware Graph Navigation

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

2

(realistic) graphs are big…

…but screens are small!

Page 3: Dynamic Insets for Context-Aware Graph Navigation

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

4

Recent TrendUse the graph topology to

inform navigation

[Moscovich et al 2009]

Page 5: Dynamic Insets for Context-Aware Graph Navigation

5

DEMO

Page 6: Dynamic Insets for Context-Aware Graph Navigation

6

Outline

Motivation Dynamic Insets

Design Interaction

Evaluation Application Examples Conclusions & Future Work

Page 7: Dynamic Insets for Context-Aware Graph Navigation

7

Dynamic Insets: Basic Idea

Page 8: Dynamic Insets for Context-Aware Graph Navigation

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

9

Flipping Insets

Page 10: Dynamic Insets for Context-Aware Graph Navigation

10

Drag-to-Fan

Page 11: Dynamic Insets for Context-Aware Graph Navigation

11

Distance Visualization

Page 12: Dynamic Insets for Context-Aware Graph Navigation

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

13

Tasks (1)

Sparse Dense

Page 14: Dynamic Insets for Context-Aware Graph Navigation

14

Results (1)

RM-ANOVA, p < .05

Close Distant Count

BG

DI

BG DI

Page 15: Dynamic Insets for Context-Aware Graph Navigation

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

16

Example 1: Road Networks

Page 17: Dynamic Insets for Context-Aware Graph Navigation

17

Example 2: Social Network

Page 18: Dynamic Insets for Context-Aware Graph Navigation

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

19

Example 3: UML Editor

Page 20: Dynamic Insets for Context-Aware Graph Navigation

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

21

Turn left onto I-94W

Page 22: Dynamic Insets for Context-Aware Graph Navigation

22

Thank You!

Contact Information:Sohaib GhaniSchool of Electrical & Computer EngineeringPurdue UniversityWest Lafayette, IN, USA

E-mail: [email protected]

http://engineering.purdue.edu/pivot/