Visualizing Graphs as Trees: Plant a seed and watch it grow.

Bongshin Lee, Cynthia Sims Parr, Catherine Plaisant, Benjamin B. Bederson

Human-Computer Interaction Laboratory, Computer Science Department

University of Maryland, College Park, MD 20742, USA

Abstract. TreePlus is a graph browsing technique based on a tree-style layout. It shows the missing graph structure using interaction techniques and enables users to start with a specific node and incrementally explore the local structure of graphs.  We believe that it supports particularly well tasks that require rapid reading of labels.

1 TreePlus: Interface for Visualizing Graphs as Trees

TreePlus[1] (Fig. 1) transforms graphs into trees by extracting a spanning tree. Users can navigate the tree by clicking on nodes in the main tree browser and preview adjacent nodes of the focus node in the adjacent nodes display (Fig. 2). Animation, zooming, panning, and integrated searching and browsing help users understand the graph.

Fig. 1. For the selected node “rat” (distinguished by the black border), TreePlus shows all adjacent nodes as children (on the right), a parent, or an ancestor (both to the left). Node color and arrows help users see the direction of links; red left-pointing arrows mean these animals eat the selected node (“rat”), while blue right-pointing arrows mean the selected node (“rat”) eats these animals.

When users move the cursor over a node, the node gets the focus and TreePlus previews its adjacent nodes on the right. They are left-aligned for readability, as in the main tree browser. Now node color and arrows are relative to the focus node, which is represented by the color green. They are duplicated on the right so that users can focus on one place instead of looking around the whole screen space; they are grouped and shown in gray.

Fig. 2. On mouse over of the focus node, TreePlus lists adjacent nodes, circled here in red. Any adjacent nodes that were already displayed are shown in gray. Here the cursor is hovering over the “stripe-headed tanager,” showing a preview of the connected nodes. Given the currently selected node “rat” and the focus node “stripe-headed tanager,” the three gray nodes on the right, “fruits,” “broad-winged hawk,” and “red-tailed hawk” are connected to both nodes. A tool tip shows the number of links in each direction.

When users select a node, TreePlus moves all of its adjacent nodes (except direct ancestors) to be its children by changing the tree structure. Multi-step animation helps users maintain context. A preview of how fruitful it would be to go down a path is provided by bar graphs showing how many organisms are reachable in each level (Fig. 3). TreePlus provides integrated support for search and lets users choose their own root. By setting a node as a root after search, users can easily gain access to an area of interest.

(a)             (b)                                                  (c)

Fig. 3. Bars give a preview of how fruitful it would be to go down a path. “broad-winged hawk” is a start of a chain since it does not have a red bar (nothing eats it) and “fruits” is an end of a chain since it does not have a blue bar (fruits eat nothing).

2 Acknowledgements

This work is supported by NSF #0219492, Microsoft Research, and ARDA / Booz Allen Hamilton #MDA-904-03-c-0408 Novel Intelligence from Massive Data Program.

[1] For more information: see

Web Accessibility