cone trees and collapsible cylindrical trees joshua foster february 19, 2003
Post on 20-Dec-2015
215 views
TRANSCRIPT
![Page 1: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/1.jpg)
Cone Trees andCollapsible Cylindrical Trees
Joshua Foster
February 19, 2003
![Page 2: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/2.jpg)
Cone Trees: Animated 3D Visualizations of Hierarchical Information
Collapsible Cylindrical Trees: A Fast Hierarchical Navigation Technique
Papers
![Page 3: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/3.jpg)
Goals of Cone Trees
3D visualization (display more information in same screen space)
Interactive animation (shifts some of the cognitive load to human visual perception system)
![Page 4: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/4.jpg)
![Page 5: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/5.jpg)
2D Aspect Ratio
Most real-life hierarchies tend to be broad, shallow, and unbalanced
2D graph-building algorithms lay out a tree based on 2 parameters: b – number of children per node (branching factor) l – number of levels
Aspect ratio = l
bl 1
![Page 6: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/6.jpg)
Examples
1
11 12
111 121 112 122
1
11 12
111 121 112 122
13
131 132 133 123 113
b = 2, l = 5, aspect ratio = 3.2
b = 3, l = 4, aspect ratio = 6.75
![Page 7: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/7.jpg)
Aspect Ratio vs. Number of Levels
![Page 8: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/8.jpg)
Aspect Ratio (cont’d)
Cone Tree aspect ratio is fixed at 4:3 (1.25)
Cone diameter and level height adjusted to accommodate
Side effect: Number of levels limited to 10
![Page 9: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/9.jpg)
User Perceptions “Fisheye” view – selected objects are brighter,
closer, and larger
Shadows provide depth information
Animation provides information about relationships
![Page 10: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/10.jpg)
User Interaction: Gardening
Gardening consists of two operations:Pruning allows unwanted sublevels to be “cut”
from the treeGrowing adds sublevels back in
Additional operations:Prune Others: remove all the siblings of a
selected node
![Page 11: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/11.jpg)
User Interaction (cont’d)
Changing Tree Structure:User may drag a node (and its entire
substructure) to a new place on the tree
Searching:User may search
nodes for text or properties
Search produces a relevancy bar at each node
![Page 12: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/12.jpg)
Applications
File browser Organizational structure of a company Company operating plan
Cone tree manipulation used to ‘restructure’ projects
![Page 13: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/13.jpg)
Problems?
Fixed aspect ratio imposes limits on tree size
Limits are roughly 1000 nodes, 10 levels, and maximum branching factor of 30
Animation is more effective for unbalanced trees
![Page 14: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/14.jpg)
Cone Trees: Animated 3D Visualizations of Hierarchical Information
Collapsible Cylindrical Trees: A Fast Hierarchical Navigation Technique
Papers
![Page 15: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/15.jpg)
Goals of Collapsed Cylindrical Trees (CCT) What they don’t do:
Visualize the entire tree structureProvide insight into complex hierarchies
What they do do:Allow quick navigation through hierarchies,
find and perform an action on a specific node
![Page 16: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/16.jpg)
Motivation
Problems: Simple GUI operations such as selecting menu items
require long vertical mouse movements Screen space may be limited (ex: cellphone displays)
Solution: Map list items onto a rotating cylinder
![Page 17: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/17.jpg)
CCT Approach
Developed for webpage navigation Individual nodes are important, not the entire
tree Tree navigation with other techniques:
Tree maps, cone trees, etc: too cluttered, hard to find individual node
Hyperbolic trees: node positions constantly changing, hard to build up “muscle memory”
![Page 18: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/18.jpg)
Example: Sitemap Navigation
![Page 19: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/19.jpg)
Layout
Every parent node is a cylinder, with the facets listing its child nodes
Children of the root node are shown in parallel
Child cylinders are nested Endless cylinder concept
![Page 20: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/20.jpg)
User Interaction
Any node can be reached with a series of short mouse movements
Vertical mouse movements over a cylinder cause rotation
Mousing over a facet causes the child cylinder to appear
![Page 21: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/21.jpg)
Building “Muscle Memory”
Facets are always the same size The selected cylinder is always the same
width
Therefore, mouse movements are quickly memorized and become automatic
![Page 22: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/22.jpg)
Size Limitations
No more than 7 top-level nodes Branching factor unlimited (due to endless
cylinder concept) Maximum number of nodes:
numrc * numfd = 7 * 206 = 4.48x108
![Page 23: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/23.jpg)
Applications
WWW sitemap navigation Table of contents for Internet radio guides,
manuals, tutorials, etc.
![Page 24: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/24.jpg)
User Perceptions
Fun to use Comprehensible to persons with no 3D /
visualization experience Balanced:
More information than with traditional menusLess information than with cone trees,
treemaps, etc.
![Page 25: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/25.jpg)
Virtual Reality Markup Language (VRML) Allows specification of 3D scenes through which
the user can navigate One .VRML file contains each object description User can navigate through the scene:
“Walk” (6 degrees of freedom) “Seek” (click an object and move closer toward it) “Examine” (rotate or zoom the whole scene)
![Page 26: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/26.jpg)
Implementation
XML tree representation
Use Java to convert XML to VRML files and Javascript
![Page 27: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/27.jpg)
Performance
Acceptable frame rate with 300-node tree on a 750 MHz PC with mid-range video card
At most numrc + d - 1 cylinders shown at once
![Page 28: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/28.jpg)
Possible Enhancements
To increase number of root children:
Matrix-style layout
Toroidal cylinder arrangement
![Page 29: Cone Trees and Collapsible Cylindrical Trees Joshua Foster February 19, 2003](https://reader030.vdocument.in/reader030/viewer/2022032704/56649d4c5503460f94a29a2e/html5/thumbnails/29.jpg)
Questions?