Information Visualization: Trees Chris North cs3724: HCI

Download Report

Transcript Information Visualization: Trees Chris North cs3724: HCI

Information Visualization:
Trees
Chris North
cs3724: HCI
Info Visualization Review
• Multi-dimensional data vis
• Navigation strategies
Trees (Hierarchies)
• What is a tree?
•
•
•
•
DAG, one parent per node
items (can have attributes) + structure
Data structure: parent ptr, array of children, LM child+RS
Size: #nodes = bheight
• ResultSet -> Tree?
• categorical
• Parent ptr
• Path name
Examples
• Example trees:
• book libraries, folders, family trees, threaded msgs
• NCAA march madness!!!!
• Aisles, websites, org charts
• Tasks:
• search, drill down, browsings
• Structural analysis, parents, children,
• Least common ancestor
2 Approaches
• Connection
A
• node & link
• E.g. TreeView widget
• Containment
• node in node
• E.g. Venn diagram
B
C
A
B
C
Detail Only
• Dos: tree
• Whats the
problem?
TreeView Widget
•
•
•
•
•
•
•
•
•
Good for directed search tasks
Good for text labeled nodes
Not good for learning structure
No attributes
Apx 50 items visible
Lose path to root for deep nodes
Scroll bar!
Error rate high
Fitt’s Law?
• Too many small distant things
Mac Finder
Overview+Detail
• Maryland
Focus+Context
• Hyperbolic Tree (star tree)
• Radial; shrink with distance to center
• Drag to navigate
• Scalability?
• Xerox PARC, Inxight
• http://startree.inxight.com/
Miniaturization
• Disk Tree
• Xerox PARC
3D
• ConeTrees
• Rotate subtrees
• Pro:
•
• Con:
•
• Xerox PARC
Ugh!
2 Approaches
• Connection
A
• node & link
• E.g. TreeView widget
• Containment
• node in node
• E.g. Venn diagram
B
C
A
B
C
Zooming
• TreeMaps
•
•
•
•
Slice and Dice, space filling
Node size & color encodes data attribute
Zoom on subtrees
Good for
fixed-height trees
• Scalability?
• Maryland
•
http://www.cs.umd.edu/hcil/treemap3/
• “Squarified” TreeMap
• http://www.research.microsoft.com/~masmith/all_map.jpg
Cushion TreeMaps
• Cushion TreeMaps
• Free file directory browser
• Van Wijk
• http://www.win.tue.nl/sequoiaview/
• Map of the Market
• http://www.smartmoney.com/marketmap/
Radial Containment
• SunBurst
• Radial slicing
• Animated zooming
• Focus+Context
• Georgia Tech
Sunburst vs. Treemap
• + Faster learning time: like pie chart
• + Details outward, instead of inward
• + Focus+context zooming
• - Not space filling
• - More space used by non-leaves
• All leaves on 1-D space, perimeter
• Treemap: 2-D space for leaves
• - Smaller scalability?
Multiple Foci?
• Focus on 2 distant regions simultaneously
• Microsoft Research