290 likes | 300 Views
This article explores the concepts and techniques of graph visualization, including graph structures, visualization approaches, layout styles, and common layout algorithms. It also discusses challenges and provides examples of graph visualization applications.
E N D
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, … A C A B
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 • …
Common Layout Algorithms • Circular • Concentric • Layering • Force directed • Clustering • Hierarchical clustering • Convert to tree • Geographic, pre-determined
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”
Multi-Digraphs • Korn, “Multi-Digraphs”
Adjacency Matrix Connex by PNNL
Hierarchical Aggregation • by Feiner • 1. Cluster
Hierarchical Aggregation • 2. Group hierarchically
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
StarLight • http://www.pnl.gov/infoviz/technologies.html#starlight • PNL