1. cs5764: Information Visualization Chris North
2-D Information Spaces
cs5764: Information Visualization
Chris North

2. Powers of 10
Charles & Ray Eames

3. Information Types Multi-dimensional: databases,… 1D: timelines,…
2D: maps,…
3D: volumes,…
Hierarchies/Trees: directories,…
Networks/Graphs: web,…
Document collections: digital libraries,…

4. 2-D
Image browsing
Maps

5. 2-D: large spaces

6. Tasks?

7. Detail Only Typical image browser MS PhotoEditor
Typical map browser mapquest.com

8. Zooming

9. Zooming: Pad++ Infinitely zoomable surface (Bederson et al.)
Layout information in 2d+scale
Interaction: pan+zoom
Need more info? Just zoom in!
Jazz

10. Pad++ examples Authored spaces (user specified layouts)
E.g: filesystem replacement?, presentations, stories
HiNote, Kidpad
Counterpoint: powerpoint with zooming

11. Pad++ examples
Automated layouts
E.g: File system, web history

12. Pad++ examples
In visualization

13. Space-Scale

14. Pad++ on edge
Like ray-tracing
Info surface
zoom
window

15. Semantic Zooming
Zooming in, red object turns to blue
label
label

16. Good/Bad
Good:
Bad:

17. Good/Bad Good: Bad: “step back” to get overview
“step forward” for more details
Infinite space for more details
Visual scale  conceptual scale
Bad:
lose context when zoom in
Get lost

18. Overview+Detail

19. Overview+Detail Overview: Detail: Zoom factor = ?
Square in overview coupled to scroll bars of detail

20. Multiple levels = large scale
overview
intermediate view
intermediate view
detail view
Zoom factor = ?

21. Multiple Foci

22. Multiple Overviews Can have different data types in each view
Color slice
CaT scan

23. O+D vs Detail-Only Beard & Walker: 2D Chimera: trees North: 1D (lists)
Scrollbars are bad!

24. Intermediate views? Plaisant, “When an Intermediate view matters”
When >20x
Overview ?
Detail view

25. Focus+Context

26. Bifocal Display
Leung, “Bifocal displays”

27. Document Lens
Robertson, “Document Lens”

28. Moosburg
moosburg.cs.vt.edu
Wendy Schafer

29. Distortion Functions Mapping from info surface to display surface f
Information surface
Display surface

30. Visual Transfer Functions
Display surface
Display surface
Information surface
Information surface
Identity function = normal flat overview
Bifocal

31. Magnification Functions
Bifocal
1st Derivative
Magnification
Magnification
Information surface
Information surface

32. Bifocal Display Disadvantage: 1 dimensional stretching on the 4 sides

33. Perspective Wall / Document Lens
Context shrinks gradually
Perspective

34. NonLinear Magnification

35. “Bubble”
Disadvantage: local context highly de-magnified
Bubble

36. “Fisheye”, “wide-angle lens”
Disadvantage: no flat area
Wide-angle

37. Focus+Context
Bifocal
Perspective
Bubble
Wide-angle

38. Quiz: TableLens
Bifocal!

39. Fisheye Menus

40. Calendar
Leung

41. Why not magnifying glass?
Hides local context

42. Focus+Context Screens
Baudisch, “Keeping things in context…”

43. F+C vs. O+D + - + -

44. F+C vs. O+D + 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
+ Space efficient
+ Detail connected to context
Smooth transition
+ matches human vision/processing? (or fish?)
+ Neato!
- Distortion
- Longer learning time
- no flat overview - Need a way to turn off focus
- Content moves differently than mouse, “overshoot” problem
- zoom factors usually small

45. Transparency
Lieberman, “Macroscope: Powers of Ten Thousand”

46. 2-D + Attributes
Dynamaps: dynamic queries on maps

47. Navigation Strategies
Detail only: detail without overview
Zooming: detail becomes overview
Overview+Detail: detail next to overview
Focus+Context: detail within overview
Transparency: detail on top of overview
Focus+Context:
“Distortion-oriented display”
“Fisheye”