Cone Trees andCollapsible Cylindrical Trees
Joshua Foster
February 19, 2003
Cone Trees: Animated 3D Visualizations of Hierarchical Information
Collapsible Cylindrical Trees: A Fast Hierarchical Navigation Technique
Papers
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)
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
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
Aspect Ratio vs. Number of Levels
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
User Perceptions “Fisheye” view – selected objects are brighter,
closer, and larger
Shadows provide depth information
Animation provides information about relationships
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
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
Applications
File browser Organizational structure of a company Company operating plan
Cone tree manipulation used to ‘restructure’ projects
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
Cone Trees: Animated 3D Visualizations of Hierarchical Information
Collapsible Cylindrical Trees: A Fast Hierarchical Navigation Technique
Papers
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
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
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”
Example: Sitemap Navigation
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
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
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
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
Applications
WWW sitemap navigation Table of contents for Internet radio guides,
manuals, tutorials, etc.
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.
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)
Implementation
XML tree representation
Use Java to convert XML to VRML files and Javascript
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
Possible Enhancements
To increase number of root children:
Matrix-style layout
Toroidal cylinder arrangement
Questions?