1. Cone Trees and Collapsible Cylindrical Trees
Joshua Foster
February 19, 2003

2. Papers
Cone Trees: Animated 3D Visualizations of Hierarchical Information
Collapsible Cylindrical Trees: A Fast Hierarchical Navigation Technique

3. 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)

5. 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 =

6. Examples b = 2, l = 5, aspect ratio = 3.2

7. Aspect Ratio vs. Number of Levels

8. 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

9. User Perceptions
“Fisheye” view – selected objects are brighter, closer, and larger
Shadows provide depth information
Animation provides information about relationships

10. User Interaction: Gardening
Gardening consists of two operations:
Pruning allows unwanted sublevels to be “cut” from the tree
Growing adds sublevels back in
Additional operations:
Prune Others: remove all the siblings of a selected node

11. 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

12. Applications File browser Organizational structure of a company
Company operating plan
Cone tree manipulation used to ‘restructure’ projects

13. 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

14. Papers
Cone Trees: Animated 3D Visualizations of Hierarchical Information
Collapsible Cylindrical Trees: A Fast Hierarchical Navigation Technique

15. Goals of Collapsed Cylindrical Trees (CCT)
What they don’t do:
Visualize the entire tree structure
Provide insight into complex hierarchies
What they do do:
Allow quick navigation through hierarchies, find and perform an action on a specific node

16. Motivation Problems: Solution:
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

17. 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”

18. Example: Sitemap Navigation

19. 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

20. 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

21. 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

22. 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

23. Applications WWW sitemap navigation
Table of contents for Internet radio guides, manuals, tutorials, etc.

24. User Perceptions Fun to use
Comprehensible to persons with no 3D / visualization experience
Balanced:
More information than with traditional menus
Less information than with cone trees, treemaps, etc.

25. 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)

26. Implementation XML tree representation
Use Java to convert XML to VRML files and Javascript

27. 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

28. Possible Enhancements
To increase number of root children:
Matrix-style layout
Toroidal cylinder arrangement

29. Questions?