Upcoming SlideShare
×

# Graph (Network) Visualisation

2,734 views

Published on

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

Published in: Technology, Education
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
2,734
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
37
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Graph (Network) Visualisation

1. 1. Graph Visualisation ― Understanding Complex Relationships Kai Xu Middlesex University, UK
2. 2. Graphs
3. 3. Graph Visualisation – Many related fields • This talk: top half – Evaluation (how well the methods work) – Visual Representation (trees) – Layout algorithms (general graphs) – Applications and libraries – Network analysis, such as centrality and clustering – Application domains, such as sociology and biology Human Computer Interaction Information Visualisation Graph Drawing Algorithms Mathematics Theoretical • Not in this talk Vision, Perception, and Psychology Applied • A vertical slice in the Visual Analytics field
4. 4. 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.
5. 5. 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
6. 6. 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
7. 7. Layered Layout Radial drawing 8/45
8. 8. 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
9. 9. 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
10. 10. 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
11. 11. Tree Representation Evaluation - Aesthetics Less popular Ranked last Ranked first “Qualities of Perceived Aesthetic in Data Visualization”, CHI 2007
12. 12. Layout – Are these the same graph?
13. 13. 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
14. 14. 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.
15. 15. 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? Symmetry 1. 2.
16. 16. Example (Run the local HTTP server first)
17. 17. 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.
18. 18. Example
19. 19. 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.
20. 20. 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
21. 21. 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
22. 22. 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
23. 23. 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)
24. 24. 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)