SIMS 247: Information Visualization and Presentation jeffrey heer

1. SIMS 247: Information Visualization and Presentationjeffrey heer Tree Visualization Oct 26, 2005

2. today • administrivia • tree visualization • design exercise

3. administrivia • How are project proposals coming along? • If you have questions, concerns, or are seeking advice, come to my office hours!! • Today, 1-2:30pm - 210 South Hall • Appointments also possible

4. Graphs and Trees • Graphs: • Representations of structured, connected data • Consist of a set of nodes (data) and a set of edges (relations) • Trees: • Graphs with a specific structure • connected graph with n-1 edges • Representations of data with natural hierarchy • Nodes are either parents or children

5. Tree Visualization • File Hierarchyin computer • Need to navigate through the hierarchy to find a particular file • Two common problems: “Where am I?” and “Where is the file that I am looking for?”

6. Tree Visualization • Organizational Chart http://www.cs.umd.edu/hcil/spacetree/

7. Tree Visualization • Tournaments taken from “To Draw A Tree” by Pat Hanrahan

8. Tree Visualization • Family Trees taken from “To Draw A Tree” by Pat Hanrahan

9. Tree Visualization • Family Trees taken from “To Draw A Tree” by Pat Hanrahan

10. Tree Visualization • Evolutionary Trees taken from “To Draw A Tree” by Pat Hanrahan

11. Tree Visualization • Evolutionary Trees taken from “To Draw A Tree” by Pat Hanrahan

12. Tree Visualization • Assembly Instructions taken from “To Draw A Tree” by Pat Hanrahan

13. Tree Visualization Approaches • Node-Link Diagrams • Reingold-Tilford Layout • Radial Layout • Indented Layout • Cone Trees & Balloon Trees • Hyperbolic Trees • Enclosure Diagrams • TreeMaps • Voronoi TreeMaps • Jigsaw Maps • Alternative Approaches • Icicle Trees • Sunburst Diagrams • Cascaded Lists

14. Reingold-Tilford Layout Top-down layout Uses separate dimensions for breadth and depth breadth --> width depth --> height tidier drawing of trees - reingold, tilford

15. Radial Layout Places children on increasing larger radii A top-down layout converted into polar co-ordinates breadth --> angle depth --> radius gnutellavision – yee, fisher, dhamija, hearst

16. Indented Layout Places all items along vertically spaced rows Uses indentation to show parent child relationships Breadth and depth end up fighting for space resources breadth --> height, locality depth --> height, indentation microsoft file explorer

17. Cone Trees Top-down tree layout in three dimensions Shadows provide 2D structure Can also make “Balloon Trees” – 2D version of ConeTree cone tree – robertson, mackinlay, and card

18. Balloon Trees • flattened cone trees herman, melancon, and marshall

19. Hyperbolic Trees Places nodes using hyperbolic geometry This is then projected into “normal” space hyperbolic tree – lamping, rao h3 viewer – tamara munzner

20. TreeMaps Space-filling technique that divides space recursively Segments space according to ‘size’ of children nodes map of the market – wattenberg / smartmoney.com

21. Voronoi TreeMaps • TreeMaps that divide space using arbitrary polygons based on Voronoi tesselations. voronoi treemaps - balzer and deussen

22. Jigsaw Maps • Space-filling technique from Martin Wattenberg - a mathematical experiment at trying to achieve a “perfect” layout. • Uses the mathematics of space-filling curves. jigsaw maps - martin wattenberg

23. Icicle Trees • Edges implied by adjacency and spatial relationship. icicle tree in the infovis toolkit - jean-daniel fekete

24. Sunburst Diagrams • Radial version of icicle trees. sunburst diagram - john stasko

25. Cascaded Lists • Display one selected group of silbings at a time • Mac OS X File System Browser

26. More advanced trees… • We can augment the approaches we’ve seen so far with additional visualization and interaction techniques. Some examples: • Degree-of-Interest Trees / SpaceTree • top-down node-link diagrams with focus+context • Elastic Hierarchies • node-link diagrams crossed with treemaps • Dual Trees • bi-directional top-down node-link diagrams • developed for genealogical graphs

27. degree-of-interest trees doitrees - heer, card

28. elastic hierarchies • hybrid of node-link diagrams and treemaps elastic hierarchies - zhao, mcguffin, chignell

29. dual-trees • a bidirectional tree visualization designed for navigating genealogical graphs (family “trees”) dual-trees - mcguffin, balakrishnan

30. So what technique to use? • A cautionary tale: • CHI Browse-off and evaluation of the hyperbolic tree • What makes the difference: the car or the driver? • Reading • People read faster by scanning in lines (not arcs!) • Convention • Does your application domain have established conventions? How can you leverage or augment those? • Designs with multiple visual components • How much screen real-estate do you give the tree? • (Sometimes that indented tree works the best!)

31. Design Exercise • Brainstorm new visualizations for family “trees” • Choose an aspect *NOT* covered by current designs • Here are some of the complications to consider: • People as individuals / Couples as reproductive units • Ordering by Generation vs. Time • Divorce/Death/Remarriage • Polygamy • Incest (!) • Social vs. Biological lineages? • Think of important questions a visualization should answer, use them to motivate the design • Are two people related? In how many ways? • Work in groups of 3 or more. You will be asked to briefly present your ideas to the class on Monday!