Visualizing Graphs as Trees:
Plant a seed and watch it grow.
Bongshin Lee, Cynthia Sims Parr, Catherine Plaisant, and Benjamin B. Bederson
4
Overview
We are building an interactive graph visualization system by
applying a tree layout approach. We transform a graph into a
tree and use special visualization and interaction techniques to
show the graph structure superimposed onto the tree structure.
We enable users to start with a specific node (plant a seed) and
incrementally explore the graph (watch it grow).
2
Design Philosophy
• Take advantage of human perception of trees
• Make as many nodes readable as possible
• Maximize stability of layout
• Offer preview before committing
• Provide multi-step animations so that users can follow changes
3
TreePlus Control
1
• Tree browser panel + Adjacent nodes panel
• Pluggable into C# applications
• Developed with Piccolo.NET
In this example, we visualized a food web with 137 nodes and 1,039 links
as modified from Waide RB, Reagan WB. (1996) The food web of a
tropical rainforest. University of Chicago Press, Chicago.
1 Tree Browsing
2 Preview of Adjacent Nodes
Adjacent Nodes Panel
Adjacent nodes of the focus are previewed
in the adjacent nodes panel.
Tree Browser Panel
Adjacent nodes already appearing in the
tree browser panel are shown in the color
gray. They are also highlighted in the tree
browser panel.
Nodes are left aligned for readability, as in
the tree browser panel.
Users can browse trees in the tree browser panel.
• Transform graphs into trees
• Spanning tree is constructed by a breadth-first search
• Default root is a node with the most connections
• Cross links are hidden by default and shown on demand
• Multi-step animation to maintain context
3 Hint of Graph Structure
4 Searching and Root Selection
Node color and arrows help users
see the direction of connections.
• Green: Focus node
• Blue: From focus node
• Red: To focus node
• Purple: From/To focus node
Children can be sorted by direction.
Search results are colored orange and the view is limited to
nodes relevant to the search results.
We allow users to set a specific node as a root. Once users
reset a root, a spanning tree is rebuilt from the selected root.
• Search + Root Selection: Easy access to interested area
• Root Selection + Search: Find a shortest path
Bars give a preview of how fruitful it would
be to go down a path.
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.
University of Maryland, Human-Computer Interaction Laboratory http://www.cs.umd.edu/hcil