Successfully reported this slideshow.
Dynamic Insets for Context-Aware Graph Navigation<br />SohaibGhaniPurdue UniversityWest Lafayette, INUSA<br />Nathalie Ric...
2<br />(realistic) graphs are big…<br />…but screens are small!<br />
3<br />The Case for Context-Aware Graph Navigation:What is outside the screen is just as important as whatis on it!<br />S...
4<br />Recent Trend<br />Use the graph topology to inform navigation<br />[Moscovich et al 2009]<br />
DEMO<br />5<br />
Outline<br />Motivation<br />Dynamic Insets<br />Design<br />Interaction<br />Evaluation<br />Application Examples<br />Co...
Dynamic Insets: Basic Idea<br />7<br />
Degree of Interest (DOI)<br />Rank off-screen nodes<br />Show N nodes with highest DOI in inset<br />DOI functions<br />Ne...
Flipping Insets<br />9<br />
Drag-to-Fan<br />10<br />
Distance Visualization<br />11<br />
Evaluation (1)<br />Participants: 12<br />Techniques: 2<br />BG – Bring & Go [Moscovich et al 2009]<br />DI – Dynamic Inse...
Tasks (1)<br />13<br />Sparse<br />Dense<br />
Results (1)<br />14<br />Close<br />Distant<br />Count<br />BG<br />DI<br />BG<br />DI<br />RM-ANOVA, p < .05<br />
Evaluation (2)<br />Follow-up qualitative evaluation<br />Usability and scalability of DI<br />Two scenarios<br />Geograph...
Example 1: Road Networks<br />16<br />
Example 2: Social Network<br />17<br />
Results (2)<br />18<br />
Example 3: UML Editor<br />19<br />
Conclusions<br />Dynamic insets provide context-aware graph navigation<br />Insets show destination of edges leaving borde...
21<br />Turn left onto I-94W<br />
Thank You!<br />Contact Information:SohaibGhaniSchool of Electrical & Computer EngineeringPurdue UniversityWest Lafayette,...
Upcoming SlideShare
Loading in …5
×

Dynamic Insets for Context-Aware Graph Navigation

793 views

Published on

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

Published in: Technology
  • Be the first to comment

Dynamic Insets for Context-Aware Graph Navigation

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

×