Information Visualization: Navigation
description
Transcript of Information Visualization: Navigation
![Page 1: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/1.jpg)
Information Visualization:Navigation
Chris North
cs3724: HCI
![Page 2: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/2.jpg)
Review
• Shneiderman’s Info. Vis. mantra?•
• Strategies for Multi-D visualization:•
![Page 3: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/3.jpg)
1-D and 2-D Spaces
• 1-D: info has strong 1-D organization• text doc, slideshows, video, audio, lists, timelines
• 2-D: info has strong 2-D organization• spreadsheets, graphs, maps, formatted docs, color chooser,
images
![Page 4: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/4.jpg)
PowerPoint Slide Sorter
• Data Space: 1D array of slides
• Visualization: 2D array, nav 1D
![Page 5: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/5.jpg)
Typical Navigation
1D scrollbar 2D scrollbars
What’smissing?
![Page 6: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/6.jpg)
Keyhole Problem
• Where am I?
• Where can I go?
• Where do I want to go?
• How do I get there?
• Lack of context, overview
![Page 7: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/7.jpg)
![Page 8: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/8.jpg)
![Page 9: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/9.jpg)
Text Overviews
(MS Word)
![Page 10: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/10.jpg)
Visual Overview
• Show me the data!• Map, organization (spatial layout of concepts)
• What information is (not) available?
• Adds context info, relationships
• Enables direct access
• Encourages exploration
• HCI metrics: • Improves user performance, learning time, satisfaction
Insight
![Page 11: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/11.jpg)
Navigation Strategies
• Detail Only
• Overview+Detail• Multiple views
• Zooming
• Focus+Context• Distortion, fisheye
![Page 12: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/12.jpg)
Zooming: 1D
• Lifelines: http://www.cs.umd.edu/hcil/lifelines/
![Page 13: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/13.jpg)
Zooming large 2D spaces
• http://terraserver.homeadvisor.msn.com/image.asp?S=10&T=1&X=2689&Y=20639&Z=17&W=2
![Page 14: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/14.jpg)
Zooming: 2D
• KidPad, HiNote, Jazz
• http://www.cs.umd.edu/hcil/jazz/
• Semantic zooming: • Don’t just show things at different size
• change objects to make sense
• E.g. add/remove detail info
• Powers of Ten
• Controls?
![Page 15: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/15.jpg)
Overview+Detail: 1D
• SeeSoft
![Page 16: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/16.jpg)
Overview+Detail: 1D
• Home automation:• Timeline for scheduling, set on/off flags
• Calendar shows overview of schedule
![Page 17: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/17.jpg)
Overview+Detail: 2D
Overview: Detail:
• Zoom factor = 5
Square in overview tightly-coupled to scroll bars of detail
![Page 18: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/18.jpg)
Overview+Detail
• Multiple views:• overview
• detail view
• Views are linked:• Selector in overview navigates detail
• Navigating detail updates selector in overview
![Page 19: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/19.jpg)
Multiple levels = large scale
• Zoom factor = 125
overview intermediate view
intermediate view detail view
![Page 20: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/20.jpg)
Multiple FociLinkit
![Page 21: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/21.jpg)
Focus+Context: 1D
• Fisheye Menu: http://www.cs.umd.edu/hcil/fisheyemenu/
• Perspective Wall
![Page 22: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/22.jpg)
Focus+Context: 2D
![Page 23: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/23.jpg)
Comparison
• Zooming:• natural• Infinite scalability• Lose overview when zoom in
• Overview+Detail:• Good scalability, chaining• Multiple foci• Disconnect between views, back-n-forth
• Focus+Context:• Integrated overview with detail, connected• Least scalable• Distortion, overview unstable
![Page 24: Information Visualization: Navigation](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360d/html5/thumbnails/24.jpg)
Quiz
• Spotfire?
• TableLens?