Download - Graph (Network) Visualisation
Graph Visualisation ― Understanding Complex Relationships
Kai Xu Middlesex University, UK
Graphs
Graph Visualisation • A vertical slice in the Visual
Analytics field – Many related fields
• This talk: top half – Evaluation (how well the methods
work) – Visual Representation (trees) – Layout algorithms (general graphs) – Applications and libraries
• Not in this talk – Network analysis, such as
centrality and clustering – Application domains, such as
sociology and biology
Human Computer Interaction
Information Visualisation
Graph Drawing
Algorithms
Vision, Perception, and Psychology
Applied Theoretical
Mathematics
Tree and Hierarchy • What's a “tree”?
– A (connected) graph without cycles.
– ‘Root’ and ‘leaf’ • What's a “hierarchy”?
– A (connected) directed graph without cycles.
• Very important in Information Visualisation – Common in the real world. – Simpler than general graphs:
allows larger graphs.
What is the Most Famous Tree Visualisation?
Indented Layout • Places all items vertically • Indentation: parent child
relationships • Example: Windows
explorer • Problems:
– Only showing part of the tree
– Bad aspect ratio (not space efficient)
6/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.
7/45
Layered Layout
8/45
Radial drawing
Space-Filling Methods - Treemap
• Containment ↔ hierarchy – Partitions space
recursively according to the size of subtrees
• Space-efficient compare to node-link diagram
• Effective in showing the leaf nodes – Less so for non-leave
nodes
10/45
Information Slice and Sunburst Diagrams
• Information slice – 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.
14/45
Tree Representation Evaluation - Utility
• “User Experiments with Tree Visualization Systems”, InfoVis 2004
• Compared 6 tree visualisation systems
• Result: – Windows Explorer scores best – Only TreeMap achieves
similar results • Implications:
– Not all results are generalisable
– User familiarity is important
Tree Representation Evaluation - Aesthetics
“Qualities of Perceived Aesthetic in Data Visualization”, CHI 2007
Ranked first
Ranked last
Less popular
Layout – Are these the same graph?
What makes a good layout? - Aesthetics
Layout aesthetics are the properties algorithms try to optimise • Edge 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
• Most important: – Edge crossing
• Less effective: – Edge bends – Symmetry
• Not obvious: – Angular resolution – Orthogonality.
Undirected Graphs – Force-Directed Methods • Nodes:
– Electrically charged particles: repel each other. – Ensure nodes are not too close to each other
• Edges: – Spring that connects particles; – Attraction force when longer than the natural length; repulsion
force otherwise. – Ensure node distance is about the natural spring length.
• What the algorithm tries to optimise?
1. 2.
Symmetry
Directed Graph – Layered Layout
• A difficult problem – Slow with large graphs
(hundreds of nodes) – No global optimisation
Sugiyama method 1. Layer assignment: nodes are
assigned to horizontal layers; 2. Crossing reduction: within each
layer the nodes are ordered to reduce the number of crossings;
3. Horizontal coordinate assignment: the x-coordinates of each vertex is determined.
Example
Layout vs. Graph Readability • 3 types of layout
algorithms: – Force-directed: 3 variations – Planar orthogonal grid
drawing: 2 variations – Planar grid drawing: 3
variations
• Results – SEIS performed
significantly worse than the rest
– For the rest, the results were not significantly different.
Large/Dense Graphs
• ‘Hairball problem’ • Connectivity matrix
– Advantage: No edge crossing – Disadvantage: Large empty
space for sparse graph • Evaluation
– For small graphs, node-link diagrams are always better
– When graphs have more than 20 nodes, matrix are better except ‘path finding’ task
Curved Edges • My professional network
in LinkedIn (using Gephi) • Edge bundling and
confluent drawing – Group edges together to
reduce visual complexity • Evaluation on edge
curvature – Compared different types
of curved edges – Aesthetics: straight line – Performance: straight line
and Lombardi layout
Graph Visualisation Software (GUI) • yEd - Graph Editor
– Commercial product but freely available
– Includes many layout and network algorithms
– Mature • Gephi
– Open source and Java based
– Focus on social network analysis
– Still in development (0.8.2 beta)
– Not the easiest to write plug-in
Graph Visualisation Library • JGraph
– Open-source commercial product
– Best free implementation of force-directed layout
– Java (JGraphX) and JavaScript (mxGraph)
• GraphViz – A collection of different layout
algorithms such as hierarchical, force-directed, radial and circular
– Available as both command line tool and C++ library
• JUNG (Java Universal Network/Graph Framework) – Open source Java library – Mainly social network analysis
and some layouts • Part of Information
Visualisation libraries – D3.js (JavaScript) – ProtoVis (JavaScript) – InfoVis Toolkit (JavaScript) – Flare (Flash) – Prefuse (Java)
• Domain specific – Cytoscape (biology) – Pajek (sociology)
Summary
• What's touched: – Visual Representation (trees) – Layout algorithms (general graphs) – Evaluation – Software and libraries
• What's not covered: a lot • If you want to know a bit more:
– Visual Analysis of Large Graphs: State-of-the-Art and Future Research Challenges (2011)