Graph Visualization cs 5764 Information Visualization Chris North

Graph Visualization cs 5764: Information Visualization Chris North

Where are we? • • Multi-D 1 D 2 D 3 D 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) A • Nodes: – Size, color, shape, location, label, … • Links: – Direction, width, color, shape, label, … • Other approaches? • adjacency matrix, containment, … B C 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/Graph. Layout/example 1. html

Tree Layout • Web. Sphinx • http: //www-2. cs. cmu. edu/~rcm/websphinx/workbench. html

Hyperbolic Layout • Munzner, “H 3” •

Attribute Value Layout • Eick, “See. Net” •

Scale up

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

SHri. MP • Storey, “SHri. MP” •

Think. Map – 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 • 3 D

Star. Light • http: //www. pnl. gov/infoviz/technologies. html#starlight • PNL