24
Graph Visualisation ― Understanding Complex Relationships Kai Xu Middlesex University, UK

Graph (Network) Visualisation

  • Upload
    kai-xu

  • View
    1.075

  • Download
    2

Embed Size (px)

DESCRIPTION

This is my talk at the Visual Analytics Summer School 2013 in London.

Citation preview

Page 1: Graph (Network) Visualisation

Graph Visualisation ― Understanding Complex Relationships

Kai Xu Middlesex University, UK

Page 2: Graph (Network) Visualisation

Graphs

Page 3: Graph (Network) Visualisation

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

Page 4: Graph (Network) Visualisation

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.

Page 5: Graph (Network) Visualisation

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

Page 6: Graph (Network) Visualisation

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

Page 7: Graph (Network) Visualisation

Layered Layout

8/45

Radial drawing

Page 8: Graph (Network) Visualisation

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

Page 9: Graph (Network) Visualisation

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

Page 10: Graph (Network) Visualisation

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

Page 11: Graph (Network) Visualisation

Tree Representation Evaluation - Aesthetics

“Qualities of Perceived Aesthetic in Data Visualization”, CHI 2007

Ranked first

Ranked last

Less popular

Page 12: Graph (Network) Visualisation

Layout – Are these the same graph?

Page 13: Graph (Network) Visualisation

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

Page 14: Graph (Network) Visualisation

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.

Page 15: Graph (Network) Visualisation

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

Page 16: Graph (Network) Visualisation

Example

(Run the local HTTP server first)

Page 17: Graph (Network) Visualisation

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.

Page 18: Graph (Network) Visualisation

Example

Page 19: Graph (Network) Visualisation

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.

Page 20: Graph (Network) Visualisation

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

Page 21: Graph (Network) Visualisation

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

Page 22: Graph (Network) Visualisation

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

Page 23: Graph (Network) Visualisation

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)

Page 24: Graph (Network) Visualisation

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)