tree and graph drawing
DESCRIPTION
Tree and Graph Drawing. Jiun-Hung Chen Feb. 17, 2005. Outline. Tree Drawing Graph Drawing. Tree Drawing. Why Trees?. Hierarchies File systems and web sites Branching processes Genealogy and lineages Decision processes Decision trees and Tournaments. Two Major Representations. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/1.jpg)
Tree and Graph Tree and Graph DrawingDrawingJiun-Hung ChenJiun-Hung Chen
Feb. 17, 2005Feb. 17, 2005
![Page 2: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/2.jpg)
OutlineOutline
Tree DrawingTree Drawing Graph DrawingGraph Drawing
![Page 3: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/3.jpg)
Tree DrawingTree Drawing
![Page 4: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/4.jpg)
Why Trees?Why Trees?
Hierarchies File systems and web sites
Branching processes Genealogy and lineages
Decision processes Decision trees and Tournaments
![Page 5: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/5.jpg)
Two Major Two Major RepresentationsRepresentations
Node-LinkNode-Link Space FillingSpace Filling
![Page 6: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/6.jpg)
Node-Link DiagramNode-Link Diagram Common: Root at Top and Leaves at BottomCommon: Root at Top and Leaves at Bottom
![Page 7: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/7.jpg)
Classical Tree DrawingClassical Tree Drawing
How does one draw this?• DFS
![Page 8: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/8.jpg)
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
![Page 9: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/9.jpg)
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
![Page 10: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/10.jpg)
Cone TreesCone Trees
Developed atXerox PARC
3D views ofhierarchiessuch as filesystems
Robertson, Mackinlay, Card ‘91
![Page 11: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/11.jpg)
Alternate ViewsAlternate Views
![Page 12: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/12.jpg)
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/
![Page 13: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/13.jpg)
H3ViewerH3Viewer
Munzner, ‘98
![Page 14: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/14.jpg)
Centrifugal ViewCentrifugal View
Directions
![Page 15: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/15.jpg)
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”
![Page 16: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/16.jpg)
Integrated Fisheye ViewIntegrated Fisheye View
![Page 17: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/17.jpg)
Space-Filling Space-Filling RepresentationRepresentation
Each item occupies an area
Children are “contained” under parent
One example
![Page 18: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/18.jpg)
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
![Page 19: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/19.jpg)
Internet News GroupsInternet News Groups
Fiore & SmithMicrosoft
NetScan
![Page 20: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/20.jpg)
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.
![Page 21: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/21.jpg)
Graph DrawingGraph Drawing
![Page 22: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/22.jpg)
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
![Page 23: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/23.jpg)
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 ……
![Page 24: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/24.jpg)
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
![Page 25: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/25.jpg)
Drawing ConventionDrawing Convention
![Page 26: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/26.jpg)
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
![Page 27: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/27.jpg)
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
![Page 28: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/28.jpg)
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
![Page 29: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/29.jpg)
Layout AlgorithmsLayout Algorithms
Topology-Shape-MetricsTopology-Shape-Metrics HierarchicalHierarchical Force-directedForce-directed
![Page 30: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/30.jpg)
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
![Page 31: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/31.jpg)
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.
![Page 32: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/32.jpg)
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/
![Page 33: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/33.jpg)
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
![Page 34: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/34.jpg)
![Page 35: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/35.jpg)
![Page 36: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/36.jpg)
1981http://www.mpi-fg-koeln.mpg.de/~lk/netvis/trade/WorldTrade.html
![Page 37: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/37.jpg)
1992
![Page 38: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/38.jpg)
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
![Page 39: Tree and Graph Drawing](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814053550346895dabc497/html5/thumbnails/39.jpg)
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/