INFOVIS 8803DV > SPRING 17 GRAPH & NETWORK DATA VISUALIZATION Prof. Rahul C. Basole CS/MGT 8803-DV > February 8, 2017
INFOVIS8803DV > SPRING 17
GRAPH & NETWORK
DATA VISUALIZATION
Prof. Rahul C. Basole
CS/MGT 8803-DV > February 8, 2017
INFOVIS8803DV > SPRING 17
Agenda
• Graphs & Networks
• Terminology
• Challenges
• Layout Algorithms
• Examples
• Gephi Tutorial
INFOVIS8803DV > SPRING 17
Graphs & Networks: A Popular Topic
• Connections throughout our lives and the world
• Model connected set as a Graph
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
Airline Transportation Networks
INFOVIS8803DV > SPRING 17
Airline Transportation Networks
INFOVIS8803DV > SPRING 17
Tour de Sys
http://rocs.northwestern.edu/clips/assets/Tour_de_Sys.mp4
INFOVIS8803DV > SPRING 17
Maps of Science
http://www.eigenfactor.org/map/maps.php
INFOVIS8803DV > SPRING 17
GE Healthscape
http://senseable.mit.edu/healthinfoscape/
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
Brain Connectivity
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
What is a Graph?
• Vertices (nodes) connected by
• Edges (links)
1 2 3
0 1 0
1 0 1
0 1 0
1
2
3
1: 2
2: 1,3
3: 2
1
3
2
Adjacency List DrawingMatrix Representation
INFOVIS8803DV > SPRING 17
Graph Terminology
• Graphs can have cycles
• Graph edges can be directed or undirected
• The degree of a vertex is the number of edges connected to it– In-degree and out-degree for directed graphs
• Graph nodes and edges can have values (weights) on them (nominal, ordinal or quantitative)
• Many Graph Theoretic Properties– Centrality
– Density
– Clustering
– etc.
INFOVIS8803DV > SPRING 17
Trees are Different*
• Subcase of a general graph
• No cycles
• Typically directed edges
• Special designated root vertex
*More on Trees/Hierarchies in another Class
INFOVIS8803DV > SPRING 17
Graph Uses
• In DataVis any number of data sets can be modeled as a graph
– US telephone system
– Internet
– Distribution network for on-line retailer
– Call graph of a large software system
– Business processes
– Semantic map in an AI algorithm
– Set of connected friends
– Product Similarity
– Co-Purchase Networks
• Graph/network visualization is one of the oldest and most studied
areas of DataVis
INFOVIS8803DV > SPRING 17
Graph Visualization Challenges
• Graph layout and positioning
– Make a concrete rendering of an abstract graph
• Navigation/Interaction
– How to support user changing focus and moving around the graph
• Scale
– Above two issues not too bad for small graphs, but large ones are much
tougher
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
Entire research
community’s focus
INFOVIS8803DV > SPRING 17
Graphs: Visual Encoding Issues
Nodes
• Shape
• Color
• Size
• Location
• Label
Edges
• Color
• Size
• Label
• Form
– Polyline, straight line, orthogonal, grid, curved, planar, upward/downward, ...
INFOVIS8803DV > SPRING 17
Some Aesthetic Considerations
• Minimize Crossings -- minimize towards planar
• Minimize Total Edge Length -- minimize towards proper scale
• Minimize Area (for efficiency)
• Minimize Longest Edge (i.e. Determine Maximum Edge Length)
• Use Uniform Edge Lengths (thereby minimizing variances)
• Minimize Total Bends
INFOVIS8803DV > SPRING 17
Which Matters?
• Various studies examined which of the aesthetic factors matter most
and/or what kinds of layout/vis techniques look best
– Purchase, Graph Drawing ’97
– Ware et al, Info Vis 1(2)
– Ghoniem et al, Info Vis 4(2)
– van Ham & Rogowitz, TVCG ‘08
– …
• Results mixed, but: Edge crossings do seem important
INFOVIS8803DV > SPRING 17
Network Visualization Nirvana
1. Every node is visible
2. For every node, you can count its degree
3. For every link, you can follow it from source to destination
4. Clusters and outliers are identifiable
* Shneiderman et al. (2008)
INFOVIS8803DV > SPRING 17
What do people want to do with or
learn from network visualizations?
INFOVIS8803DV > SPRING 17
Graph Visualization Task Taxonomy
Topology-
Based
Tasks
Attribute-
Based Tasks
Browsing
Tasks
Overview
Tasks
INFOVIS8803DV > SPRING 17
Graph Visualization Task Taxonomy
Topology-
Based
Tasks
Attribute-
Based Tasks
Browsing
Tasks
Overview
Tasks
• Adjacency
– Find the set of nodes adjacent to a node
• Accessibility
– Find the set of nodes accessible to a node
• Common connection
– Given nodes, find the set of nodes connected to all
• Connectivity
– Find shortest path
– Identify clusters
– Identify connected components
INFOVIS8803DV > SPRING 17
Graph Visualization Task Taxonomy
Topology-
Based
Tasks
Attribute-
Based Tasks
Browsing
Tasks
Overview
Tasks
• On the nodes
– Find the nodes having a specific attribute value
• On the edges
– Given a node, find the nodes connected only by certain kinds of edges
INFOVIS8803DV > SPRING 17
Graph Visualization Task Taxonomy
Topology-
Based
Tasks
Attribute-
Based Tasks
Browsing
Tasks
Overview
Tasks
• Follow path
– Follow a given path
• Revisit
– Return to a previously visited node
INFOVIS8803DV > SPRING 17
Graph Visualization Task Taxonomy
Topology-
Based
Tasks
Attribute-
Based Tasks
Browsing
Tasks
Overview
Tasks
• Compound exploratory tasks
– Estimate size of a network
– Find patterns
– etc.
INFOVIS8803DV > SPRING 17
Challenges
• SCALE
– May run out of space for vertices and edges (turns into “ball of string”)
– Can really slow down algorithm
– Clustering can help
• Extract highly connected sets of vertices
• Collapse some vertices together
• NAVIGATION/INTERACTION
– How do we allow a user to query, visit, or move around a graph?
– Changing focus may entail a different rendering
INFOVIS8803DV > SPRING 17
Types of Layout Algorithms
Source: P. Mutzel, et al, Graph Drawing ‘97
INFOVIS8803DV > SPRING 17
Common Layout Techniques
• Circular
• Arc
• Force-directed
• Matrix
• Circos
• Geographic-Based
• Clustered
• Attribute-Based
• Hierarchical*
• Tree*
INFOVIS8803DV > SPRING 17
Circular Layout
• Ultra-simple
• May not look so great
• Space vertices out
around circle
• Draw lines (edges) to
connect vertices
INFOVIS8803DV > SPRING 17
Hierarchical Edge Bundling
INFOVIS8803DV > SPRING 17
Arc Diagram Layout
Wattenberg
InfoVis ‘02
INFOVIS8803DV > SPRING 17
Force-directed Layout
• Example of constraint-based layout technique
• Impose constraints (objectives) on layout
– Shorten edges
– Minimize crossings
– …
• Define through equations
• Create optimization algorithm that attempts to best satisfy those
equations
INFOVIS8803DV > SPRING 17
Force-directed Layout
• Spring model (common)
– Edges – Springs (gravity attraction)
– Vertices – Charged particles (repulsion)
• Equations for forces
• Iteratively recalculate to update positions of vertices
• Seeking local minimum of energy
– Sum of forces on each node is zero
INFOVIS8803DV > SPRING 17
d3.js Force-Directed Layout
http://bl.ocks.org/mbostock/4062045
INFOVIS8803DV > SPRING 17
Lots of Variants …
• Fruchterman-Reingold Algorithm
– Add global temperature
– If hot, nodes move farther each step
– If cool, smaller movements
– Generally cools over time
• Kamada-Kawai algorithm
– Examines derivatives of force
equations
– Brought to zero for
minimum energy
INFOVIS8803DV > SPRING 17
Matrix
http://bost.ocks.org/mike/miserables/
INFOVIS8803DV > SPRING 17
Circos
INFOVIS8803DV > SPRING 17
Let’s see some more examples …
INFOVIS8803DV > SPRING 17
Social Network Visualization
INFOVIS8803DV > SPRING 17
People Connections
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
https://www.ted.com/talks/nicholas_christakis_the_hidden_influence_of_social_networks
INFOVIS8803DV > SPRING 17
Steroids in MLB
INFOVIS8803DV > SPRING 17
Human Diseases
http://www.nytimes.com/interactive/2008/05/05/science/20080506_DISEASE.html?_r=0
INFOVIS8803DV > SPRING 17
Music Artists
http://www.liveplasma.com/
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
Basole and Park (2014)
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
NSFNET Traffic
1993
INFOVIS8803DV > SPRING 17
Follow the Money
… or the more academic title “Community Structure in Multi-Scale Transportation
Networks”
https://www.youtube.com/watch?v=kn32vavZqvg
INFOVIS8803DV > SPRING 17
INFOVIS8803DV > SPRING 17
Lots of Examples …
INFOVIS8803DV > SPRING 17
OTS: Linkurio.us
http://linkurio.us/
INFOVIS8803DV > SPRING 17
OTS: Polinode
https://www.polinode.com/
INFOVIS8803DV > SPRING 17
OTS: Cytoscape
http://www.cytoscape.org/
INFOVIS8803DV > SPRING 17
OTS: Gephi
https://gephi.org/
INFOVIS8803DV > SPRING 17
HW5: Networks
• Which Tech Giant Poaches The Most Employees?
• http://www.talentful.co/blog/2017/1/9/who-poached-who
– Convert the Infographic of Companies and their Poaching Strategies into a network visualization using Gephi (or any other graph visualization tool)
– Encode the data provided in the infographic into your network visualization. Consider what variables you want to encode and how (node size/color, edge thickness/color)
– Experiment with the built-in layouts to find one that you find most compelling.
– Export an image of your network visualization.
– Make sure your nodes are labeled and that you provide a color legend.
– In your “report” describe what insight(s) does the network visualization provide that the infographic does not?
• Bring two (2) copies of the network visualization to class and submit HW4 on T-Square.