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?