1D & 2D Spaces for Representing Data Mao Lin Huang.
-
Upload
elfreda-reynolds -
Category
Documents
-
view
222 -
download
0
Transcript of 1D & 2D Spaces for Representing Data Mao Lin Huang.
![Page 1: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/1.jpg)
1D & 2D Spaces for Representing Data
Mao Lin Huang
![Page 2: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/2.jpg)
1-D Representation of Data
![Page 3: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/3.jpg)
1-D Textual Data
![Page 4: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/4.jpg)
Keyhole Problem
• No context
• Lost, disoriented
• Where am I?
• Where can I go?
• Where do I want to go?
• How do I get there?
![Page 5: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/5.jpg)
Visual Overview
• 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, error rates,
retention, satisfaction
![Page 6: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/6.jpg)
Navigation Approaches
• Detail Only
• Zooming
• Overview+Detail
• Focus+Context (Distortion, fisheye)
![Page 7: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/7.jpg)
1D Visual Representation
• Plaisant, “Lifelines”, pp 285See personal history
• Mackinlay, “Perspective Wall”, web
![Page 8: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/8.jpg)
1D Visual Representation
• Eick, “SeeSoft”, p 419» Analyze 50,000 lines of code simultaneously by mapping each
line of code into a thin row.
• Eick, “Data Visualization Sliders”, p 251 (2 pages)
![Page 9: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/9.jpg)
Navigation Strategies
• Detail Only
• Zooming
• Overview+Detail
• Focus+Context (Distortion, fisheye)
![Page 10: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/10.jpg)
Fisheye Menus• http://www.cs.umd.edu/hcil/fisheyemenu/
• Very Fast• due to mouse mechanics, no clicking, mostly vertical sliding
• Alphabet overview helpful• Fisheye context not useful in this case?
• Might be more useful in SeeSoft where miniature representation gives important information
• Limits # of readable items to ~10• Wasted space at top- and bottom- right• Distortion problematic?• Alphabet overview distorted at A and Z• Scale limited?
• Possible improvement:• Same alphabet overview (without end distortion)• Remove fisheye, maximize readable items like scrolling
version• Same fast mouse mechanics, scroll fast on left, no scroll on
right
![Page 11: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/11.jpg)
Music Animation Machine
• Good for visualizing music during serial playback, relate audio to visual structure
• Visualizing entire compositions: increase information density
• See patterns of phrases, instruments, etc.
![Page 12: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/12.jpg)
2-D Representation of Data
![Page 13: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/13.jpg)
2-D
• Image browsing
• Maps
![Page 14: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/14.jpg)
Today• Bederson, “Pad++”, p 530
» a zooming graphic interface to replace icon-based window interface
• Furnas, “Space-Scale Diagrams”, web
![Page 15: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/15.jpg)
Space-Scale
![Page 16: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/16.jpg)
Pad++ on edge
• Like ray-tracing Info surface
window
zoom
![Page 17: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/17.jpg)
Semantic Zooming
• Zooming in, red object turns to blue
![Page 18: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/18.jpg)
Multiple Views
• Zoom factor ~ 20
![Page 19: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/19.jpg)
Multiple levels = large scale
• Zoom factor = 20 * 20 * 20 = 8000
![Page 20: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/20.jpg)
Multiple Foci
![Page 21: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/21.jpg)
Multiple Overviews
• Can have different information types at each level
![Page 22: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/22.jpg)
2-D + Attributes
• Dynamaps: dynamic queries on maps
![Page 23: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/23.jpg)
2-D: Focus+Context Representation of Data
![Page 24: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/24.jpg)
2-D• Robertson, “Document Lens”, p 562
»
• Spence, “Bifocal Lens”, p 331,333
![Page 25: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/25.jpg)
Focus+Context
• Details within overview
• “Distortion-oriented display”
• “Fisheye”
• Leung, Apperley, “Taxonomy of distortion-oriented presentations”, book pg 350
![Page 26: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/26.jpg)
Visual Transfer Functions
Information surface
Display surface
Identity function = normal flat overview
Bifocal
![Page 27: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/27.jpg)
Magnification Functions
1st Derivative
![Page 28: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/28.jpg)
Bifocal Display
• Spence, Apperley
![Page 29: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/29.jpg)
Bifocal DisplayDisadvantage: 1 dimensional stretching on the 4 sides
![Page 30: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/30.jpg)
Perspective Wall / Document Lens
![Page 31: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/31.jpg)
NonLinear Magnification• http://www.cs.indiana.edu/hyplan/tkeahey/research/nlm/nlm.html
• http://www.cs.indiana.edu/hyplan/tkeahey/research/papers/infovis.98.html
![Page 32: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/32.jpg)
“Bubble”Disadvantage: local context highly de-magnified
![Page 33: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/33.jpg)
“Fisheye”, “wide-angle lens”Disadvantage: no flat area
![Page 34: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/34.jpg)
Quiz: TableLens
• Bifocal!
![Page 35: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/35.jpg)
Fisheye Menus
• Non-linear:
combination of Bubble + fisheye
![Page 36: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/36.jpg)
Why not magnifying glass?
• Hides local context
![Page 37: 1D & 2D Spaces for Representing Data Mao Lin Huang.](https://reader036.fdocuments.in/reader036/viewer/2022062322/5697bfa81a28abf838c9979c/html5/thumbnails/37.jpg)
F+C vs. O+D
• + Space efficient
• + Detail connected to context
• Smooth transition
• + matches human vision/processing?
• - Distortion
• - Longer learning time
• - no flat overview - Need a way to turn off focus
• - Content moves differently than mouse
• - hard to tell zoom factor
• + Scales up to larger data (zoom factor and chaining)
• + Multi foci easier
• + multiple overviews possible
• + Easy to implement, Less math!
•Fast system performance
• - >=2 places to look (cross-eyed!)
•Tracking field-of-view box hard
•Hand-eye coordination problem
• - detail and overview disconnected
• - Windows/space management
• - replicates detail data in overview