1. 4/12/02 Trees, Hierarchies, and Multi-Trees Craig Rixford IS 247 – Information Visualization April 11, 2002

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

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

5. 4/12/02 Uses for visualizations Navigation –SiteBrain, Hyperbolic Tree Exploration –Animated radial layouts, SAS, Hyperbolic Tree Presentation –Animated radial layouts, SAS

6. 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 StarTreeInXight’s StarTree –Focus on visual presentation of “large” hierarchies –Uses non-Euclidean geometry as basis of focus + context technique

7. 4/12/02 Inspiration

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

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

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

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

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

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

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

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

16. 4/12/02 User orientations - Solutions Preserving Anglular Orientation Left to Right Ordering

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

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

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

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

21. 4/12/02 Michael Elledge and Kristen Truong. 2000? Analysing The Brain

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

37. 4/12/02 Layout - Illustration

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

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

40. 4/12/02 Transition Constraint - Orientation

41. 4/12/02 Transition Constraint - Order

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

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

44. 4/12/02 Social Network - Illustration

45. 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 FeaturesAll Features Small Graph55 Large Graph19

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

47. 4/12/02 T. Barlow and P. Neville. 2001. Comparison of 2D Visualizations of Hierarchies

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

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

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

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

52. 4/12/02 Different views examined in study Org Chart, Tree Ring, Icicle Plot TreeMap

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

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

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

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

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

58. 4/12/02 Results Tree rings slower for description but fast and accurate for memory tasks Perhaps due to unique geometric forms / spatial clues

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

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

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

62. 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.htmlhttp://www.cwi.nl/InfoVisu/links.html Next Week’s H3 Browser