Information Visualization: Trees Chris North cs3724: HCI.
-
Upload
kari-deverell -
Category
Documents
-
view
216 -
download
2
Transcript of Information Visualization: Trees Chris North cs3724: HCI.
![Page 1: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/1.jpg)
Information Visualization:Trees
Chris North
cs3724: HCI
![Page 2: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/2.jpg)
Info Visualization Review
• Multi-dimensional data vis
• Navigation strategies
![Page 3: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/3.jpg)
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
![Page 4: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/4.jpg)
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
![Page 5: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/5.jpg)
2 Approaches
• Connection• node & link
• E.g. TreeView widget
• Containment• node in node
• E.g. Venn diagram
A
CB
A
B C
![Page 6: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/6.jpg)
Detail Only
• Dos: tree
• Whats the problem?
![Page 7: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/7.jpg)
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
![Page 8: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/8.jpg)
Mac Finder
![Page 9: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/9.jpg)
Overview+Detail
• Maryland
![Page 10: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/10.jpg)
Focus+Context
• Hyperbolic Tree (star tree)• Radial; shrink with distance to center
• Drag to navigate
• Scalability?
• Xerox PARC, Inxight• http://startree.inxight.com/
![Page 11: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/11.jpg)
Miniaturization
• Disk Tree
• Xerox PARC
![Page 12: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/12.jpg)
3D• ConeTrees
• Rotate subtrees
• Pro:•
• Con:•
• Xerox PARC
![Page 13: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/13.jpg)
Ugh!
![Page 14: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/14.jpg)
2 Approaches
• Connection• node & link
• E.g. TreeView widget
• Containment• node in node
• E.g. Venn diagram
A
CB
A
B C
![Page 15: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/15.jpg)
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/
![Page 16: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/16.jpg)
• “Squarified” TreeMap• http://www.research.microsoft.com/~masmith/all_map.jpg
![Page 17: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/17.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/
![Page 18: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/18.jpg)
Radial Containment
• SunBurst• Radial slicing
• Animated zooming
• Focus+Context
• Georgia Tech
![Page 19: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/19.jpg)
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?
![Page 20: Information Visualization: Trees Chris North cs3724: HCI.](https://reader030.fdocuments.in/reader030/viewer/2022032701/56649c8b5503460f94945cba/html5/thumbnails/20.jpg)
Multiple Foci?
• Focus on 2 distant regions simultaneously
• Microsoft Research