Graph Visualisation Kai Xu Middlesex University, UK.
-
Upload
patience-hatton -
Category
Documents
-
view
216 -
download
2
Transcript of Graph Visualisation Kai Xu Middlesex University, UK.
Graph Visualisation
Kai XuMiddlesex University, UK
Outline
• Introduction• Trees and Hierarchies• General Graphs• Beyond this talk
Outline
• Introduction• Trees and Hierarchies• General Graphs• Beyond this talk
Graphs
Graph Visualisation
• Many related fields.– Not possible to include
everything.– Try to cover the basics.– Assume you know nothing
about graph visualisation.
• What's touched:– Visual Representation (trees).– Layout algorithms (general
graphs).– Evaluation– Applications and libraries.
• What's not covered: a lot
Human Computer Interaction
Information Visualisation
Graph Drawing
Algorithms
Vision, Perception, and Psychology
AppliedTheoretical
Sociology
Visualisation and Cognition• Information visualisation: all about external
cognition.– Working memory capacity: 7 +/- 2.– Can’t really “think” without cognitive tools:
writing, math symbols, diagrams, interactive visualisation, etc.
• Brain and cognitive tools have to work together.– Computer is good at addition, very good at it, but
that's about it.– Human brain is a very good pattern recogniser.
• Visualisation matters only if user cares.– All visualisation methods should be evaluated
with users.
Outline
• Introduction• Trees and Hierarchies• General Graphs• Beyond this talk
Terminology
• What's a “tree”?– A (connected) undirected
graph without cycles.
• What's a “hierarchy”?– A (connected) directed
graph without cycles.
• Very important in Information Visualisation– Very common in the real
world.– Simpler (less edges) than
general graphs.
Most Famous Tree Visualisation Is?
Indented Layout• Places all items along vertically spaced rows• Uses indentation to show parent child
relationships• Example: Windows explorer• Problems:– Only showing part of the tree– Bad aspect ratio (not space efficient)
9/45
Layered Layout
10/45
Radial drawing
Dendrogram
• Essentially a layered drawing – Orthogonal edges
• Layering are done according to the leaves:– All the leaves are on the same layer
• Commonly used in bioinformatics to represent– The result of hierarchical clustering– Phylogenetic trees
11/45
Balloon Trees
• A variation of radial layout• Children are drawn in a circle centered at their
parents.• Effective on showing the tree structure– At the cost of node details
12/45
Hyperbolic Tree
• Simulate the distortion effect of fisheye lens.– Enlarge the focus and shrink the rest.– Focus+context.– Can be combined with different layout.
• 3D hyperbolic tree: – Similar to project a graph onto a sphere.– This example uses balloon tree drawing.
13/45
3D Tree Visualization - Cone Tree
• Cone trees are a 3D extension of the 2D layered tree drawing method.– Parent at the tip of a cone, and its children
spaced equally on the bottom circle of the cone– Either horizontal or vertical
• The extension to 3D does not necessarily means more information can be displayed– Occlusion problem– Couple with interaction is essential
14/45
Other 3D Tree Visualizations
• 3D poly-plane tree visualization– Put subtrees on planes.– Arrange these planes in 3D to reduce occlusion.– In this example, layered drawing is used within
each plane.• 3D layered tree– Only one cone.– Layers are the parallel circles on the surface.– Example: color indicate the layer.
15/45
Space-Filling Methods - Treemap
• Treemap uses containment to show the hierarchy.
• It partitions the space recursively according to the size of subtrees
• It is space-efficient compare to node-link diagram
• It is effective in showing the leaf nodes; – But difficult to see the non-leave nodes
16/45
Variations of Treemap
• Cushion treemap– Use shading to help identify the levels in a
treemap• Voronoi treemap– Similar idea but uses voronoi diagram as partition– The space does not have to be rectangle.
17/45
Beamtree
• A variation of treemap in 3D.• Using overlap instead of nesting to show the
hierarchy• 3D version: representing each node as a beam• A bigger example
18/45
Space-Filling Tree Layout
• Try to use as much screen space as possible.• Layout a tree according to the recursive
partition of the screen space.– The area allocated to a subtree is proportional to
its size.• A bigger example: 55000 nodes.– Use all the screen space.– Not the most effective on showing tree structure.
19/45
Icicle Trees
• Edges implied by adjacency and spatial relationship.
• A bigger example (from infovis toolkit)
20/45
Information Slice and Sunburst Diagrams
• Information slice – Also a space-filling method.– Radial version of icicle trees.– Node size is proportional to the angle swept by a
node.• Sunburst– Information Slice combines with focus+context.– Details are shown outside or inside the ring.
21/45
Elastic Hierarchies
• Hybrid of node-link diagrams and Treemaps.
• Example:– Treemap nested within a
node-link diagram.• Not the other way
around.– Node-link diagram inside
a treemap – Lots of crossings
22/45
TreeViewer
• Visualizes trees in a form that closely resembles botanical trees– The root is the tree stem– Non-leave nodes are branches – Leave nodes are “bulbs” at the end of branches
• Example: Unix home directory.
23/45
Collapsible Cylindrical Trees
• Telescope metaphor– A set of nested
cylinders• All cylinders of level
1 nodes are shown in a horizontal fashion, – Like being put on a
stick.
• A cylinder is constructed for the children of a node, and has a smaller radius. – This cylinder is nested and
hidden within the cylinder contain the parent
– It can be pulled out or collapsed as necessary.
24/45
Tree Representation Evaluation• “User Experiments with Tree
Visualization Systems”, InfoVis 2004
• Compared 6 tree visualisation systems:– TreeMap– Cushion TreeMap– BeamTrees– Hyperbolic tree– TreeViewer– Windows Explorer (base-line)
• Data: eBay taxonomy– 5 levels and 5799 nodes.– Shallow and wide.
• 15 tasks:– About tree structure and node
attributes• Measurements:
– Accuracy– Completion time– User satisfaction
• Result:– Windows Explorer scores best– Only TreeMap achieves the similar
level as Explorer, others perform worse.
• Possible causes:– No tight integration with other
tools.– Missing functionality.
Tree Representation Evaluation
“Qualities of Perceived Aesthetic in Data Visualization”, CHI 2007
Outline
• Introduction• Trees and Hierarchies• General Graphs• Beyond this talk
Graph Layout
Graph Drawing Aesthetics
• Aesthetics are the graphic properties layout algorithms try to optimise.
• Crossings• Aspect ratio• Edge length (several
variations)• Angular resolution• Symmetry
Which Aesthetic is the most important?
• The relative importance among aesthetics
• Including 5 aesthetics:– minimizing edge crossings,– minimizing bends, – symmetry.– minimum angle– orthogonality
• Purchase, H.C (1997)
• Dataset– Planar graphs with 16 nodes and 28
edges
• 5 aesthetics and 10 drawings– 2 drawings for each aesthetics:
representing a strong or weak presence.
• b: bends, c: crossings, m: minimal angle, o: orthogonality, s: symmetry
Which Aesthetic is the most important?
• Tasks– Shortest path: between two nodes;– Connections between nodes: number of nodes to disconnect
two nodes;– Connections between subgraphs: number of nodes to
disconnect two subgraphs.• Results
– Most important: reducing the number of crossing;– Less effective: minimizing the number of bends and maximizing
symmetry;– Not obvious: maximizing the minimum angle and orthogonality.
Directed Graph – Layered LayoutSugiyama method1. Cycle removal: if there is directed
cycles, temporarily reverses the direction of some to make the graph acyclic;
2. Layer assignment: nodes are assigned to horizontal layers, and thus determines their y-coordinate;
3. Crossing reduction: within each layer the nodes are ordered to reduce the number of crossings;
4. Horizontal coordinate assignment: the x-coordinates of each vertex is determined.
Undirected Graphs – Force Directed Methods
• Use a physical analogy to draw graphs– A graph as a system of objects
with forces acting between them.
• Vertex– Object of the system;– Interacting with each other
based on “some” force(s).
• Edge– A different type of object;– Not interacting with each other;– Add new force(s) to vertex
object.
• Assumption: – A balanced system gives a good
layout
• Equilibrium state: – A system configuration with
minimal energy level: – Locally, the sum of the forces on
each object is zero.– Globally, the system has a minimal
total energy.
• Many force-directed methods.– Model: a force system defined by
vertices and edges– Algorithm: technique for finding
an equilibrium state
Spring Embedder• Vertex:
– Electrically charged particles; repel each other.– Ensure vertices not too close to each other
• Edge: – Spring that connects particles;– Attraction force when longer than the natural length; repulsion force
otherwise.– Ensure connected vertex distance is about the natural spring length.
1. 2.
Springs and Electrical Forces• The force on a vertex v :
Vu
vuEvu
vu gfvF ,),(
,)(
• fu,v : force on v by the spring between u an v
• gu,v : Electrical repulsion exerted on v by vertex u• x component of the force on v
),()),((),()),((
2
2
0),(
1
vu
uv
Vu vuvu
uvvu
Evu ppd
xx
ppd
k
ppd
xxlppdk
• d(p,q) : Euclidean distance between points p and q• (xv, yv): position of vertex v• l0: natural length (zero energy) of the spring between u and v.• k1
: stiffness of the spring between u and v• k2 : the strength of the electrical repulsion between u and v
Finding an Equilibrium State
• Initially place nodes at random location.• At each iteration:
– Force F(v) on each vertex is computed– Each vertex v is moved in the direction of F(v) by a small amount
proportional to the magnitude of F(v)• Stops when equilibrium is achieved or some conditions are
met.• Not the fastest, but allow smooth animation.• Calculating attractive forces only between neighbors: O(|E|)• Calculating repulsive forces between all pair of vertices: O(|V|
2)– Bottleneck of the algorithm in general.
An Example
Faster Force Directed method - FADE
• It is feasible to use– a spring method, then– a geometric clustering method
• To obtain a good graph clustering.
GraphClusteredGraph
Quadtree
• A tree data structure: – Each internal node has
exactly four children.
• Often used to partition a two dimensional space.– By recursively subdividing
into four quadrants.
ef
Barnes-Hutt Method• Computing forces between stars.– Use Quadtree to cluster the stars.– Use forces between clusters to approximate
forces between individual stars.
a
dc
b
root
e f
BLa b d
TL BRc
Barnes-Hutt method
• The contents of a subtree of can be approximated by a mass at the centroid.
root
e f
BLa b d
TL BRc
ef
a
dc
b
s
s
Barnes-Hutt method• The force that the subtree s exerts on the star x can
approximate the sum of the forces that the nodes in s exert on x.
ef
a
dc
b
root
e f
BLa b d
TL BRc
s
s
Layout vs. Graph Readability• Comparing different layout
methods.• A planar graph of 17 nodes
and 29 edges .• maximum node degree is 4:
– For orthogonal drawing ;– A quite strong constraint.
• 3 layout algorithms:– Force-directed: 3 variations;– Planar orthogonal grid
drawing: 2 variation;– Planar grid drawing: 3
variations.
• Purchase, H.C. (1998)
Layout vs. Graph Readability
• Tasks:– Shortest path between two nodes;– Disconnect two nodes;– Disconnect two subgraphs.
• Results:– One planar grid drawing method (SEIS) produced
significantly more errors than the rest;– For the rest, the average response times were not
significantly different.– So there is not much difference between layout algorithms!
Does 3D Help?
Comparing various visualisations in 2D and 3D• 2D: orthographic (parallel) projection • Static Perspective: perspective projection• Stereo: shutter glasses• Passive rotation: automatic• Hand coupled rotation: mouse-controlled;• Head coupled perspective: head-controlled;
• Stereo, head coupled perspective.
“Stereo, head coupled perspective” setup
Test Setup
• Task: whether two nodes are connected by a path of length 2.
• Dataset: randomly laid out graph.
• Ware, C., Franck, G. (1996)
Results:
• A static perspective is only slightly better than a 2D diagram;
• 3D motion and stereo viewing both help but not particularly important; – Both are more significant than stereo cues.
• Stereo viewing alone increases the understandable graph size by a factor of 1.6;
• Head coupling alone increases by a factor of 2.2;• Combine the two (head-coupled stereo viewing)
increases by a factor of 3;
Beyond Node-Link Diagram
• Matrix Representation– A graph can be represented by a connectivity
matrix.• Advantage: – No edge crossing.
• Disadvantage: – Large empty space for sparse graph.
• Ghoniem, M. et al. (2004)
Node-Link Diagram vs. Matrix
• Tasks:– estimating the number of nodes;– estimating the number of links;– finding the most connected node;– finding a node with a given label;– finding a link between two specified nodes;– finding a common neighbor between two specified nodes;– finding a path between two nodes.
• Dataset– Random graph of size: 20, 50, and 100 nodes;– For each size, different link density: 0.2, 0.4 and 0.6.
Results• When graphs are bigger than 20 vertices, matrix outperforms
node-link diagrams on most tasks. – Only path finding is consistently in favor of node-link diagrams.
• For small graphs:– Node-link diagrams are always more readable than matrices;
• For larger graphs: – Matrices are 30% more accurate; – Matrices have comparable or better answer time.
• For more complex tasks such as “path finding”, interaction is needed: – For example, displaying all the possible paths after selecting two nodes; – For matrix, path can be displayed by connecting cells using curves (mix
matrix with node-link diagram).
yEd Graph Editor
Graphviz - Graph Visualization Software
• Open source.• More a command line tool.• Several types of layout
algorithms.– Hierarchical– Force directed– Radial– Circular
• Fast for large graphs.– Sophisticated algorithms.
Outline
• Introduction• Trees and Hierarchies• General Graphs• Beyond this talk
Graph Visualisation is much more …
What's not covered• Interaction.• Temporal/dynamic graph
visualisation.• Geological graph
visualisation.• Graph visualisation in specific
domains.• Social network analysis
(centralities).• Graph algorithms (such as
clustering).
• Multiple graph visualisation.• Multivariate graph
visualisation.• And many more …
Graph Visualisation
Possible research problems
• Improve existing methods:– Another variation of TreeMap?– Another variation of force-directed methods?
• Methods based on new ideas:– A new visual representation of trees and hierarchies?– A layout algorithm based on a new natural analogy?
• A less well studied area:– Many of those on the last slides.
• … but do we really need them?
Applied Approach
• More problems than available resources can address.– Work on “important” problems.
• A discovery is “important” only because it is useful – Not how difficult to discover it.
• Talk to the users (such as anyone uses graphs)– Yes, it will take time,– Yes, some requirements may seem unreasonable,– But this is the best way to find “important” problems.
• Once has the problem, start working on it.– Use external cognitive tools.– Implement existing methods and apply them to real data: you will
find new research problems.
Contribute to the Community
• You are what you contribute to the community.– Not just how many papers you publish.– Code, dataset, reviewing, organisation, promoting, …
• Missing a Information Visualisation/Visual Analytics Toolkit– Visualisation Toolkit (VTK) for Scientific Visualisation.
• Require lots of efforts, but everyone can contribute.– Take the extra step to make your code actual reusable by
others (and documentation).– Make your tool part of a larger package.– GraphVisToolkit InfoVisToolkit VisualAnalyticsToolkit.
Gephi – Graph Visualisation Platform and Library
Think big we are only limited by our imaginations
And, I am always happy to help!