Tree and Graph Tree and Graph DrawingDrawingJiun-Hung ChenJiun-Hung Chen

Feb. 17, 2005Feb. 17, 2005

OutlineOutline

Tree DrawingTree Drawing Graph DrawingGraph Drawing

Tree DrawingTree Drawing

Why Trees?Why Trees?

Hierarchies File systems and web sites

Branching processes Genealogy and lineages

Decision processes Decision trees and Tournaments

Two Major Two Major RepresentationsRepresentations

Node-LinkNode-Link Space FillingSpace Filling

Node-Link DiagramNode-Link Diagram Common: Root at Top and Leaves at BottomCommon: Root at Top and Leaves at Bottom

Classical Tree DrawingClassical Tree Drawing

How does one draw this?• DFS

Potential ProblemsPotential Problems

For top-down, width of fan-out uses For top-down, width of fan-out uses up horizontal real estate very up horizontal real estate very quicklyquickly At level n, there are 2At level n, there are 2n n nodesnodes

Tree might grow a lot along one Tree might grow a lot along one particular branchparticular branch

3D Approaches3D Approaches

Add a third dimension into which Add a third dimension into which layout can golayout can go

Children of a node are laid out in a Children of a node are laid out in a cylinder “below” the parentcylinder “below” the parent Siblings live in one of the 2D planesSiblings live in one of the 2D planes

Cone TreesCone Trees

Developed atXerox PARC

3D views ofhierarchiessuch as filesystems

Robertson, Mackinlay, Card ‘91

Alternate ViewsAlternate Views

2D Hyperbolic Browser2D Hyperbolic Browser

Approach:Approach: Lay out the Lay out the hierarchy on the hyperbolic hierarchy on the hyperbolic plane and map this plane plane and map this plane onto a display region.onto a display region.

ComparisonComparison A standard 2D browser: A standard 2D browser:

100 nodes (w/3 100 nodes (w/3 character text strings)character text strings)

Hyperbolic browser: Hyperbolic browser: 1000 nodes, about 50 1000 nodes, about 50 nearest the focus can nearest the focus can show from 3 to dozens of show from 3 to dozens of characterscharacters

Demo: Demo: http://www.inxight.com/

H3ViewerH3Viewer

Munzner, ‘98

Centrifugal ViewCentrifugal View

Directions

Contents Fisheye ViewContents Fisheye View

Downward tree of contents rooted at the Downward tree of contents rooted at the context “User JMZ”context “User JMZ”

Integrated Fisheye ViewIntegrated Fisheye View

Space-Filling Space-Filling RepresentationRepresentation

Each item occupies an area

Children are “contained” under parent

One example

TreemapTreemap

Space-filling representation Space-filling representation developed by Shneiderman and developed by Shneiderman and JohnsonJohnson

Children are drawn inside their Children are drawn inside their parentparent

Alternate horizontal and vertical Alternate horizontal and vertical slicing at each successive levelslicing at each successive level

Use area to encode other variable of Use area to encode other variable of data itemsdata items

Internet News GroupsInternet News Groups

Fiore & SmithMicrosoft

NetScan

ApplicationsApplications

Can use Treemap idea for a variety Can use Treemap idea for a variety of domainsof domains Basketball statisticsBasketball statistics Image BrowserImage Browser Stock MarketStock Market See how U.S. presidential candidates See how U.S. presidential candidates

compare with previous Presidents. compare with previous Presidents.

Graph DrawingGraph Drawing

Why Graphs?Why Graphs?

Connections throughout our lives Connections throughout our lives and the worldand the world Circle of friendsCircle of friends Computer networks…Computer networks… Relational databases with keysRelational databases with keys ……

Model connected set as a Model connected set as a GraphGraph

ApplicationsApplications

In information visualization, many In information visualization, many applicationsapplications Subway routesSubway routes Social networksSocial networks Network analysisNetwork analysis Link analysisLink analysis Citation analysisCitation analysis ……

What is a Graph?What is a Graph?

Vertices (nodes)Vertices (nodes)connected byconnected by

Edges (links)Edges (links)

1 2 30 1 01 0 10 1 0

123

1: 22: 1, 33: 2 1

32

Adjacency matrix

Adjacency list

Drawing

Drawing ConventionDrawing Convention

Graph DrawingGraph Drawing Find an aesthetic layout of the graph that Find an aesthetic layout of the graph that

clearly conveys its structureclearly conveys its structure Technically:Technically: Assign a location for each node Assign a location for each node

and a route for each edge, so that the and a route for each edge, so that the resulting drawing is “nice”resulting drawing is “nice”

A maze Layout by Tom Sawyer

Find an aesthetic layout of the graph that clearly conveys its Find an aesthetic layout of the graph that clearly conveys its structure.structure.

Technically:Technically: Assign a location for each node and a route for each Assign a location for each node and a route for each edge, so that the resulting drawing is “nice”.edge, so that the resulting drawing is “nice”.

V = {1,2,3,4,5,6}

E = {(1,2),(2,3),(1,4), (1,5),(3,4),(3,5), (4,5),(4,6),(5,6)}

Graph drawing

Graph Visualization Graph Visualization ProblemsProblems

Graph layout and positioningGraph layout and positioning Make a concrete rendering of abstract Make a concrete rendering of abstract

graphgraph ScaleScale

Not too much of a problem for small Not too much of a problem for small graphs, but large ones are much toughergraphs, but large ones are much tougher

NavigationNavigation How to support user changing focus and How to support user changing focus and

moving around the graphmoving around the graph

Aesthetic Criteria Minimize edge crossings Minimize area Total edge length Maximum edge length Uniform edge length Total bends Maximum bends Angular bends Aspect ratio Symmetry

Conflict

Minimize edge crossings

Maximize symmetry

Layout AlgorithmsLayout Algorithms

Topology-Shape-MetricsTopology-Shape-Metrics HierarchicalHierarchical Force-directedForce-directed

Topology – Shape – Topology – Shape – Metrics Metrics

PlanarizationPlanarization the graph is converted the graph is converted

into a 2d drawing where into a 2d drawing where the number of crossings the number of crossings are kept to a minimum. are kept to a minimum.

OrthogonalizationOrthogonalization the bends are made to the bends are made to

go at right angles and go at right angles and the vertices are aligned. the vertices are aligned.

CompactionCompaction the dummy vertices are the dummy vertices are

removed and the graph removed and the graph is made to take up a is made to take up a minimum amount of area minimum amount of area

Hierarchical Hierarchical Layer AssignmentLayer Assignment

Each vertex is assigned a layer Each vertex is assigned a layer LL, such that if there is an edge , such that if there is an edge from from uu to to vv, , uu and and uu’s layer is ’s layer is LiLi and and vv’s layer is ’s layer is LjLj, then , then ii<<jj. If . If there is a gap in between there is a gap in between layers, such as when there is an layers, such as when there is an edge from edge from L1L1 to to L3L3, a dummy , a dummy vertex is placed at vertex is placed at L2L2

Crossing reductionCrossing reduction the amount of times that edge the amount of times that edge

cross over is reduced to create cross over is reduced to create a more aesthetically pleasing a more aesthetically pleasing drawing. drawing.

X-coordinate assignmentX-coordinate assignment In this stage, all the points are In this stage, all the points are

assigned a position (x-assigned a position (x-coordinate), the dummy vertices coordinate), the dummy vertices are removed, and the edges are are removed, and the edges are all drawn. In this stage many all drawn. In this stage many different aesthetics can be different aesthetics can be stressed such as minimizing stressed such as minimizing bends or minimizing area. bends or minimizing area.

Force-directedForce-directed An energy model is An energy model is

associated with the graphassociated with the graph Ex: A spring model. (Repulsion Ex: A spring model. (Repulsion

+ Attraction)+ Attraction) In a force model, the force In a force model, the force

produced is directly proportional produced is directly proportional to the distance between the to the distance between the vertices that make up the edge. vertices that make up the edge.

Low energy states Low energy states correspond to nice layoutscorrespond to nice layouts

Hence, the drawing Hence, the drawing algorithm is an algorithm is an optimization processoptimization process

Initial (random) layoutFinal (nice) layoutIteration 1:Iteration 2:Iteration 3:Iteration 4:Iteration 5:Iteration 6:Iteration 7:Iteration 8:Iteration 9:

Demo: http://www.touchgraph.com/

Other issuesOther issues

Vertex Vertex Shape,Color, Size, Location, LabelShape,Color, Size, Location, Label

EdgeEdge Color, Size, Label, FormColor, Size, Label, Form

ScaleScale Run out of space for vertices and edges, slow Run out of space for vertices and edges, slow

down algorithmdown algorithm Often use Often use clusteringclustering to help to help

Extract highly connected sets of verticesExtract highly connected sets of vertices Collapse some vertices togetherCollapse some vertices together

1981http://www.mpi-fg-koeln.mpg.de/~lk/netvis/trade/WorldTrade.html

1992

SummarySummary

Tree and Graph DrawingTree and Graph Drawing Important and useful tools for many Important and useful tools for many

applicationsapplications Interesting and important research Interesting and important research

directionsdirections Large-scale, dynamic and efficient Large-scale, dynamic and efficient

visualizationvisualization

ReferenceReference

http://www.cc.gatech.edu/classes/AY2002/http://www.cc.gatech.edu/classes/AY2002/cs7450_spring/cs7450_spring/

http://graphics.stanford.edu/courses/cs448b-http://graphics.stanford.edu/courses/cs448b-04-winter/lectures/treesgraphs/04-winter/lectures/treesgraphs/tree.graph.pdftree.graph.pdf

http://www.cs.brown.edu/people/rt/papers/http://www.cs.brown.edu/people/rt/papers/gd-tutorial/gd-constraints.pdfgd-tutorial/gd-constraints.pdf

http://www.cs.umd.edu/hcil/treemap-history/http://www.cs.umd.edu/hcil/treemap-history/ http://davis.wpi.edu/~matt/courses/graphs/http://davis.wpi.edu/~matt/courses/graphs/