graph visualization cs5764: information visualization chris north

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