4/12/02

Trees, Hierarchies, and Multi-Trees

Craig RixfordIS 247 – Information Visualization

April 11, 2002

4/12/02

Readings• J. Lamping and R. Rao. 1995

– The Hyperbolic Browser: A Focus + Context Technique for Visualizing Large Hierarchies. 1995.

• Michael Elledge and Kristen Truong. 2000?– Analysing The Brain [Evaluation of Site Brain Tool]

• Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst. 2001?– Animated Exploration of Graphs with Radial Layout.

• Barlow and P. Neville. 2001.– Comparison of 2D Visualizations of Hierarchies

4/12/02

Characteristics of Structures

• Trees: – Hierarchical structure with simple Parent-Child

relationships• Multitrees:

– Structure where the sets of ancestors and the sets of descendents of any node are both trees (Alternatively, the unions of trees that share subtrees)

• Graphs:– Pairwise connections between vertices (or nodes)

via edges (or arcs)

4/12/02

Problems with visual display of tree structures and graphs

• Problems– Scale: limited screen space and legibility of text– Cross-linking of nodes: How to deal with more general

graph structures• General Solution

– The venerable focus+context technique• Problems with the solution:

– How to best provide context– How to provide detail about focus without losing context– How to maintain context when shifting focus

4/12/02

Uses for visualizations

• Navigation– SiteBrain, Hyperbolic Tree

• Exploration– Animated radial layouts, SAS, Hyperbolic

Tree• Presentation

– Animated radial layouts, SAS

4/12/02

The Hyperbolic Browser: A Focus + Context Technique for Visualizing Large Hierarchies.

• Overview– Seems to be seminal paper in the field– Basis for InXight’s StarTree– Focus on visual presentation of “large” hierarchies – Uses non-Euclidean geometry as basis of focus +

context technique

4/12/02

Inspiration

4/12/02

What’s so hyperbolic about a circle?

• The hyperbolic browser is a projection into a Euclidean space – a circle

• We can’t see hyperbolic space but apparently that doesn’t stop some people from imagining it

• The circumference of a circle increases at a linearly with radius (2 PI)

• The circumference of a circle in hyperbolic space increases exponentially

4/12/02

Benefits of utilizing hyperbolic plane

• Exponential growth in space available with linear growth of radius– Makes tree layout easy

• Size of objects decreases with growth of radius– Reduces expense of drawing trees when cut-off at

one pixel• Results

– Display about 1000 nodes – About 50 can show some text

4/12/02

Appearance of Initial Layout

• Root mapped at center• Multiple generations of children mapped out towards

edge of circle• Drawing of nodes cuts off when less than one pixel

4/12/02

How does it work (in theory)

• Step 1: Lay out tree on the hyperbolic plane

• Step 2: Project that distribution to Euclidean plane

• Step 3: Refocus by reprojecting the distribution into the Euclidean plane– (No changes necessary in the hyperbolic

plane)

4/12/02

Layout in hyperbolic plane• Easier to layout tree in

hyperbolic space-- area of circle grows exponentially

• Children allocated space (based on number of nodes descended from them)

• Place children at distance to maintain minimum distance between their nodes

4/12/02

Benefits of this approach

•  Efficient Graphics– Small number in focus– Infinite room near edge– Can begin rendering nodes prior to

traversing whole tree– Need only look a few generations down to

properly allocate space

4/12/02

Projecting to Euclidean disc

• Poincare Model: Conformal preserves angles

• More efficient use of space• Better preservation of spatial

relationships when refocusing?• Circles in Hyperbolic plane map to

circles on Euclidean disc (geometry)

4/12/02

User orientation on refocus

• Problem– Hyperbolic Geometry can allow disorienting

rotations of objects when refocusing• Solution one:

– Preserve initial angular orientation of parent to child nodes

• Solution two: – Preserve left to right orientation of parent to child

nodes beginning with initial display

4/12/02

User orientations - Solutions

Preserving Anglular Orientation Left to Right Ordering

4/12/02

Animation / Drawing Speed

• During movement draw at lower resolution

• Don’t draw fringe• Draw lines instead of arcs

4/12/02

Implementation Details

• I Surrender!

• In hyperbolic space they suggest it could be used to map multitrees– For web structures can repeat indicator

symbolic for child off nodes further away from root– Could duplicate (possibly infinititely)

structure but display only as necessary

4/12/02

User Feedback

– Informal (experimental?) study with 4 participants

– Better than browsing for getting sense of overall structure

– Finding nodes by title?

4/12/02

Comments on paper• Pro

– Very clever idea– Seems like a useful browsing or

exploratory tool• Con

– I am not convinced this is a good way to navigate a known structure of hundreds of nodes

Another example: HyperProf

4/12/02

Michael Elledge and Kristen Truong. 2000? Analysing The Brain

4/12/02

Overview

• SiteBrain Navigation Tool– Allows navigation through multitree– Displays mulitiple parents

• UM InfoViz class -- student usability study in• Looked at use of SiteBrain on an actual

website (no longer used there)

4/12/02

Study Design

• Users– Six fellow classmates

• Task analysis– Find four sports facts on FoxSports site– Measure time to complete task

• Count clickthrough for tasks and errors

4/12/02

The Results • Quantitative

– SiteBrain seems to be slower than page based navigation except for one task

– The more links it takes to get to a page and the more errors users make on the way there, the longer it takes

• Qualitative – People don’t like having SiteBrain in one window

and the content in the other – Navigating in content window doesn’t update

SiteBrain [Overall prefer paged base browsing

4/12/02

Purported Benefits: • Speed

– Users move faster through categories when there is no content loading

• Context– SiteBrain gave users better understanding of

context of information and multitree structure of site

• Good use of animation and grouping of elements

• These claims seem plausible but unsupported from testing

4/12/02

Recommendations

• Include demo to facilitate easier adoption of SiteBrain technology

• Use single window (frames)• Couple content navigation to SiteBrain

display• Display more of the hierarchy (and perhaps

give user some control of it)

4/12/02

Study Design Pros

• Overall design ideas– alternating order of questions and use of

tools– task analysis with metric of time

reasonable– considered subjects’ motivation of task– good coverage of qualitative feedback

4/12/02

Study Design Cons

• User familiarity with tool– Perhaps should have allowed users time to

familiarize themselves with new tool• Did they pretest?

• Perhaps could have changed tasks to eliminate labeling issues and things that have to do with website architecture and content not with navigation

4/12/02

Study Design Cons

• Too much statistical analysis of too little data– Reporting std for users pretest

questionnaire response to percentage of time they use search, sitemap, and paged based navigation on a sample of six

• Not including the actual list of tasks

4/12/02

Additional Comments:• Choice of Task Analysis

– Is task analysis best choice – seemed inappropriate – But it is intended use of SiteBrain.

• Their analysis– Blends over analyzed task analysis with the authors

own heuristic recommendations. – Their recommendations seem good but don’t come

from the user study.• My own personal conclusion:

– If you can get there faster with SiteBrain, you better redesign your website.

4/12/02

Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst. 2001?

Animated Exploration of Graphs with Radial Layout.

4/12/02

Visualizing Graphs

• This is a more complicated problem than displaying trees or even multitrees

• Rather than revealing structure, a visualization of graphs attempts to discover structure or relationships

4/12/02

Approaches to Visualizing Graphs

• Other approaches– Other attempts store information about graphs but

don’t display it until “needed” and can display it – Represented as a simple tree structure (based on

domain or proximity of node to presumed root)• This paper’s approach

– Instead of trying to present all information in graph, look at subsections of graph from multiple perspectives

– Main contribution is to improve method for radial layout of graph

4/12/02

Overview of paper

• Implement methods to improve radial layout– Layout

• Radial layout• Space allocation

– Animation Technique• Transition paths• Transition constraints• Timing

• Informally test permutations of these methods to see whether they are indeed improvements

4/12/02

Layout of Graph• Radial layout

– Breadth first traversal from focus to calculate network distance and number of nodes among descendents

– Beginning from focus, nodes laid out on concentric rings based on shortest network distance

– Angular space allocated on basis of number of nodes amongst descendents

4/12/02

Layout of Graph (continued)

• Space Allocation– Calculate width allocated for node by

taking the greater of angular width of node or the total angular width of child subtrees

– Can allow for nodes of different sizes– Can allow for insertion and deletion

with little disturbance to layout

4/12/02

Layout - Illustration

4/12/02

Animation

Goal of animation is to help maintain context of nodes and general orientation of user during refocus

• Transition Paths– Linear interpolation of polar coordinates– Node moves in arc not straight line– Moves along circle if not changing levels (like

great circles on earth)– Spirals in or out to next ring

4/12/02

Animation (continued)

• Transition constraints– Orientation of transition to minimize

rotational travel– (Move former parent away from new focus

in same orientation)– Avoid cross-over of edges– (to allow users to keep track of which is which)  

• Animation timing– Slow in Slow out timing (allows users to

better track movement)

4/12/02

Transition Constraint - Orientation

4/12/02

Transition Constraint - Order

4/12/02

Applications

• Gnutellavision– Large graph structure– Previously visualized as static network

• Florentine Families - Social Networks– Multiple views of family relations -- Analysis of

financial and martial ties– Examine relations through focus of single family

4/12/02

Gnutellavision Visualization

– Hosts (with color for status and size for number of files)– Nodes with closer network distance from focus on

inner rings– Queries shown; can trace queries

• Gnutellavision as exploratory tool– Very few hosts share many files– Uneven propagation of queries– Qualitative assessment of queries (simple)

4/12/02

Social Network - Illustration

4/12/02

User Experience• In general, users appreciated the subtleties added to the

general method when the number of nodes increased.

• Perhaps the most interesting result is that most people preferred rectangular movement for the small graph and polar coordinate movement for the large one.

Overall Preference of Users

  No Features All Features

Small Graph 5 5

Large Graph 1 9

4/12/02

Comments • Pros

– Good example of refining a tool with a focused purpose

– Good example of making appropriate analysis of user comments

– Clearly written• Cons?

– Is it aimed at graphs of a hundred nodes or so and can it scale to much larger graphs?

– Could preference for rectangular coordinates in small graphs have to do with the interconnectedness of nodes in that set?

4/12/02

T. Barlow and P. Neville. 2001. Comparison of 2D Visualizations

of Hierarchies

4/12/02

Overview of Study• Problem

– Organization Chart is de facto standard for visualizing decision trees. Is there a better compact view of the tree for the overview window?

• Solution– Two usability studies to determine which

tree works best. How novel!

4/12/02

Decision Trees—What are they?

• Each split constitutes a rule or variable in predictive model

• Begin Splitting into nodes

• Often hundreds of leaves

4/12/02

Decision Trees – What makes a good visualization

• Uses– For novice-helps them understand models– Experts-initial evaluation of decisions tree without

looking at models• Criteria for usability in study

– Ease of Interpretation of Topology (Parent Child Sibling relations)

– Comparison of Node Size– User preference

4/12/02

Datamining software

• Three windows in visualization of datamining software– Assessment – Criteria value of subtree– Topology - Topology– TreeWindow - Details

• Windows are coupled for navigation

4/12/02

Different views examined in study

Org Chart, Tree Ring, Icicle Plot TreeMap

4/12/02

Usability Test 1: • Users:

– 15 colleagues familiar with org chart but not others • Tasks

– Is the tree binary or n-ary?– Is three balanced or unbalanced?– Find deepest common ancestor of two nodes?– Number of levels?– Find three larges leaves (excluding org chart)?

• Data: Created 8 trees for analysis

4/12/02

Methods

• Great write-up of methods• Randomized order of tasks• 4X5 design (almost)• Timed task from appearance on screen

until spacebar tap

4/12/02

Results

• Response Time– Treemap slowest; no statistical difference

between others• Response Accuracy

– No significant difference• User Preference

– Prefer icicle map and org chart (faster)– Dislike tree map

4/12/02

Discussion

• Org chart served as benchmark• Icicle plot favored amongst others

– Hypothesis: Same left to right / top to bottom structure

• TreeRing did well• TreeMap suffered from poor accuracy

– Offset of rectangles required because of off (which is needed for selection)

4/12/02

Usability Test II: Tree implementation

• Three views: – TreeMap eliminated from this round

• Tasks– Node Description

• Four versions – select those nodes or leaves that meet certain criteria

– Node Analysis: • Memorize a highlighted node – find again after

tree redrawn in different position

4/12/02

Results

• Tree rings slower for description but fast and accurate for memory tasks

• Perhaps due to unique geometric forms / spatial clues

4/12/02

Conclusions

• TreeMap not useful for this type of task• Org Chart/Icicle seem to be best overall• TreeRing has merits for certain tasks

• Icicle chosen for implementation– Best design considering Org Chart could

not be used for node size tasks

4/12/02

Thoughts about study

• Pro: Nice focused study– Clearly defined need– Well chosen tasks– Excellent methods write ups– Nice to see a usability study

direct software design decision• Con:

– Didn’t seem to actually do tests on trees as large as the ones they describe as typical of datamining

4/12/02

Overall Conclusions• These tools seem more appropriate for

exploration or browsing than for navigation• Perhaps because I am one of the few (?) that

uses site maps, I think they are efficient ways of exploring trees of a couple hundred nodes in a known structure

• Web pages with bread crumbs and a well designed page navigation structure seem intuitively as efficient as SiteBrain

4/12/02

Additional Paper and Next Week

“Graph Visualization and Navigation in Information Visualization: a survey.” Herman, Ivan, Guy Melacon and M Scott Marshall. 2000. IEEE

Transactions on Visualization and Computer Graphics

A decent bibliography: http://www.cwi.nl/InfoVisu/links.html

Next Week’s H3 Browser