Graph (Network) Visualisation

  • View

  • Download

Embed Size (px)


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

Text of Graph (Network) Visualisation

  • 1.Graph Visualisation Understanding Complex Relationships Kai Xu Middlesex University, UK

2. Graphs 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 biologyHuman Computer Interaction Information Visualisation Graph Drawing Algorithms MathematicsTheoretical Not in this talkVision, Perception, and PsychologyApplied A vertical slice in the Visual Analytics field 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. 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. 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. Layered Layout Radial drawing8/45 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. 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. 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. Tree Representation Evaluation - Aesthetics Less popularRanked lastRanked firstQualities of Perceived Aesthetic in Data Visualization, CHI 2007 12. Layout Are these the same graph? 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. 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. 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? Symmetry1.2. 16. Example(Run the local HTTP server first) 17. Directed Graph Layered Layout A difficult problem Slow with large graphs (hundreds of nodes) No global optimisationSugiyama 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. Example 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. 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. 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. 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. 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. 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)