Readings

1. Trees, Hierarchies, and Multi-TreesCraig RixfordIS 247 – Information VisualizationApril 11, 2002

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

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

5. Uses for visualizations • Navigation • SiteBrain, Hyperbolic Tree • Exploration • Animated radial layouts, SAS, Hyperbolic Tree • Presentation • Animated radial layouts, SAS

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

7. Inspiration

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

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

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

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

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

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

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

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

16. User orientations - Solutions Preserving Anglular Orientation Left to Right Ordering

17. Animation / Drawing Speed • During movement draw at lower resolution • Don’t draw fringe • Draw lines instead of arcs

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

19. User Feedback • Informal (experimental?) study with 4 participants • Better than browsing for getting sense of overall structure • Finding nodes by title?

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

21. Michael Elledge and Kristen Truong. 2000? Analysing The Brain

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

37. Layout - Illustration

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

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

40. Transition Constraint - Orientation

41. Transition Constraint - Order

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

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

44. Social Network - Illustration

45. Overall Preference of Users No Features All Features Small Graph 5 5 Large Graph 1 9 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.

46. 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?

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

48. 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!

49. Decision Trees—What are they? • Each split constitutes a rule or variable in predictive model • Begin Splitting into nodes • Often hundreds of leaves

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