Post on 19-Dec-2015
Graph Visualization
cs5764: Information Visualization
Chris North
Where are we?
• Multi-D• 1D• 2D• 3D• Trees• Graphs• Document collections
• Design Principles• Empirical Evaluation• Visual Overviews
Networks
• Graph = nodes + edges • Nodes and edges have attributes
• Tabular storage: 1 table for nodes, 1 table for edges
• Examples:• Web, roads, telephone, internet, cpu architecture, travel,
document citations
• Tasks:• shortest path, all paths
• neighbors, degree
• topology, connected components, sub-graphs
• Web domain: broken links, navigation, update, sitemap, orientation
Visualization Approaches
• Connections (nodes & links)• Nodes:
– Size, color, shape, location, label, …
• Links:– Direction, width, color, shape, label, …
• Other approaches?• adjacency matrix, containment, …
AC
B A
Yuk
Challenges
• Graph layout
• Scale
• Navigation
• Problem: Bowl of spaghetti!
Graph Layout Styles
• Straight line
• Arc
• Orthogonal
Aesthetic constraints
• Minimize link crossings
• Minimize link lengths
• Minimize link bends
• Maximize symmetries
• …
Not Trivial
Common Layout Algorithms
• Circular
• Concentric
• Layering
• Force directed
• Clustering
• Hierarchical clustering
• Convert to tree
• Geographic, pre-determined
Circular Layout
Radial Layout• http://bailando.sims.berkeley.edu/infovis.html
Force directed layout
• Springs, gravity, clustering• http://java.sun.com/applets/jdk/1.2/demo/applets/GraphLayout/example1.html
Tree Layout
• WebSphinx
• http://www-2.cs.cmu.edu/~rcm/websphinx/workbench.html
Hyperbolic Layout
• Munzner, “H3”•
Attribute Value Layout
• Eick, “SeeNet”•
Scale up
Multi-Digraphs
• Korn, “Multi-Digraphs”•
Adjacency Matrix
Connex
by
PNNL
Hierarchical Aggregation• by Feiner
• 1. Cluster
• 2. Group hierarchically
Hierarchical Aggregation
Hierarchical Aggregation
• 3. Link inheritance
SHriMP
• Storey, “SHriMP”•
ThinkMap – Visual Thesaurus• http://www.visualthesaurus.com
• Show only depth 1 from focus node
Harmony Web Browser
• by Keith Andrews
• Show limited depth from focus node
Harmony Web Landscape
• 3D
StarLight• http://www.pnl.gov/infoviz/technologies.html#starlight
• PNL