Cours de Visualisation d'Information InfoVis Lecture Hierarchies and Trees 1 Frédéric Vernier Enseignant-Chercheur LIMSI-CNRS Maître de conf Paris XI Inspired from CS Information Visualization Jan. 10, 2002 John Stasko

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 2 Hierarchies  Definition  Data repository in which cases are related to subcases  Can be thought of as imposing an ordering in which cases are parents or ancestors of other cases

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 3 Hierarchies in the World  Pervasive  Family histories, ancestries  File/directory systems on computers  Organization charts  Animal kingdom: Phylum,…, genus,…  Object-oriented software classes  Species history  Y axis = time  Is it really discrete ?

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 4 Trees  Hierarchies often represented as trees  Directed, acyclic graph  Two main representation schemes  Node-link (1/2)  Space-filling (2/2)

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 5 Node-Link Diagrams  Root at top, leaves at bottom is very common  Or left->right  Aligned / no brotherhood

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 6 Sample Representation Johnson & Shneiderman, ‘91

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 7 Examples Good for? Bad for? Search Understanding structure

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 8 Why Put Root at Top? Root can be at center with levels growing outward too Can any node be the root? Pre-attentively ?

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 9 Drawing a Tree How does one draw this? DFS Percolate requirements upward

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 10 Potential Problems  For top-down, width of fan-out uses up horizontal real estate very quickly  At level n, there are 2 n nodes for binary tree  Tree might grow a lot along one particular branch  Hard to draw it well in view without knowing how it will branch

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 11 InfoVis Solutions  Techniques developed in Information Visualization largely try to assist the problems identified in the last slide  Alternatively, Information Visualization techniques attempt to show more attributes of data cases in hierarchy or focus on particular applications of trees

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 12 3D Approaches  Add a third dimension into which layout can go  Compromise of top-down and centered techniques mentioned earlier  Children of a node are laid out in a cylinder “below” the parent  Siblings live in one of the 2D planes

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 13 Cone Trees Developed at Xerox PARC 3D views of hierarchies such as file systems Robertson, Mackinlay, Card ‘91

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 14 Alternate Views

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 15 Cone Trees  Positive  More effective area to lay out tree  Use of smooth animation to help person track updates  Aesthetically pleasing  Negative  As in all 3D, occlusion obscures some nodes  Non-trivial to implement and requires some graphics horsepower  Read in perspective  Difficult if too much  Anti-aliasing = more horsepower  Bigger font = lost of screen real estate

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 16 Alternative Solutions  Change the geometry  Apply a hyperbolic transformation to the space  Root is at center, subordinates around  Apply idea recursively, distance decreases between parent and child as you move farther from center, children go in wedge rather than circle

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 17 Hyperbolic Browser  Focus + Context Technique  Detailed view blended with a global view  First lay out the hierarchy on the hyperbolic plane  Then map this plane to a disk  Start with the tree’s root at the center  Use animation to navigate along this representation of the plane Lamping and Rao, ‘94

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 18 2D Hyperbolic Browser  Approach: Lay out the hierarchy on the hyperbolic plane and map this plane onto a display region.  Comparison  A standard 2D browser: 100 nodes (w/3 character text strings)  Hyperbolic browser: 1000 nodes, about 50 nearest the focus can show from 3 to dozens of characters

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech Clicking on the blue node brings it into focus at the center

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 20 Watch it Work  Demo from Inxight web site

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 21 Key Attributes  Natural magnification (fisheye) in center  Layout depends only on 2-3 generations from current node  Smooth animation for change in focus  Don’t draw objects when far enough from root (simplify rendering)

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 22 Problems  Orientation  Watching the view can be disorienting  When a node is moved, its children don’t keep their relative orientation to it as in Euclidean plane, they rotate  Not as symmetric and regular as Euclidean techniques, two important attributes in aesthetics

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 23 How about 3D?  Can same hyperbolic transformation be applied, but now use 3D space?  Sure can  Have fun with the math!

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 24 H3Viewer Munzner, ‘98 Video

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 25 Layout  Find a spanning tree from an input graph  Use domain-specific knowledge  Layout algorithm  Nodes are laid out on the surface of a hemisphere  A bottom-up pass to estimate the radius needed for each hemisphere  A top-down pass to place each child node on its parental hemisphere’s surface

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 26 Drawing  Maintain a target frame by showing less of the context surrounding the node of interest during interactive browsing  Fill in more of the surrounding scene when the user is idle

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 27 Navigation Translation of a node to the center Rotation around the same node

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 28 Performance  Handle much larger graphs, i.e. >100,000 edges  Support dynamic exploration & interactive browsing  Maintain a guaranteed frame rate

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 29 See the Forest...  How about collections of trees? (Forests)  Multitrees (M-trees)  “A class of directed acyclic graphs (DAGs)… (that) have large easily identifiable substructures that are trees.”  M-trees are DAGs, not trees, but… Furnas & Zacks, ‘94

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 30 Multitrees are DAGs  Can be built by adding new tree structure above existing subtrees  The descendants of any node form a tree of contents  Diamonds are (mostly) not permitted  The ancestors of any node form a tree of contexts

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 31 Example

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 32 Composition

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 33 No Diamonds  Diamonds are not permitted  Occurs when there are 2 distinct directed paths between 2 nodes.  At most one directed path between 2 nodes.

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 34 Multitrees contain Topological Trees  Topological tree or t- tree: an undirected graph, that is a connected graph without cycles  M-trees are not t-trees; they have undirected cycles  However, m-trees contain large t-trees.  The ancestors and descendants of a unique path is a t-tree

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 35 Centrifugal View  A view of the ancestors (context) and descendants (children) of an individual (interior) node  Transitions between centrifugal views can be animated

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 36 Centrifugal View Directions

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 37 Contents Fisheye View  Downward tree of contents rooted at the context “User JMZ”

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 38 Contexts Fisheye View  Inverted tree of contexts rooted at the content “Directions”

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 39 Integrated Fisheye View

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 40 Diamonds Are Forever  Sometimes, diamonds will not go away  People want to put the same item in more than one place in the tree.  A set of documents organized both alphabetically and by date  Telephone directory designed for lookup by name or by phone number  Organize sub-m-trees beneath more general structures at the diamond level

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 41 Organization of Roots  No top-down structure over the set of all roots  To guarantee a view of all roots, introduce an “artificial” leaf (descendant of all roots), whose upward view (by design) is a tree of all roots

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 42 Multitree Issues  Reuse out of context  When constructing a m-tree, fragments may not hang together  Add or include new fragments to relate pieces in the new m-tree  Construction  By hand is the most common way.  Perhaps automatic, along hypertext links, so long as no 2 hyperlink paths lead back to the same page!

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 43 Food for Thought  Which of these techniques are useful for what purpose?  How well do they scale?  What if we want to portray more variables of each case?

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 44 References  Spence and CMS texts  All referred to papers  Cai & Krohne and Pan & Wang F ‘99 slides

From J. Stasko lecture - CS 7450 – Spring 2002 – Georgia Tech 45 Upcoming  Space-filling tree representations  Graphs and networks