graph & network data visualization · 2017. 2. 8. · • graphs & networks • terminology...

INFOVIS8803DV > SPRING 17

GRAPH & NETWORK

DATA VISUALIZATION

Prof. Rahul C. Basole

CS/MGT 8803-DV > February 8, 2017

Agenda

• Graphs & Networks

• Terminology

• Challenges

• Layout Algorithms

• Examples

• Gephi Tutorial

Graphs & Networks: A Popular Topic

• Connections throughout our lives and the world

• Model connected set as a Graph

Airline Transportation Networks

Tour de Sys

http://rocs.northwestern.edu/clips/assets/Tour_de_Sys.mp4

Maps of Science

http://www.eigenfactor.org/map/maps.php

GE Healthscape

http://senseable.mit.edu/healthinfoscape/

Brain Connectivity

What is a Graph?

• Vertices (nodes) connected by

• Edges (links)

2: 1,3

Adjacency List DrawingMatrix Representation

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.

Trees are Different*

• Subcase of a general graph

• No cycles

• Typically directed edges

• Special designated root vertex

*More on Trees/Hierarchies in another Class

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

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

Entire research

community’s focus

Graphs: Visual Encoding Issues

• Shape

• Color

• Size

• Location

• Label

• Color

• Size

• Label

• Form

– Polyline, straight line, orthogonal, grid, curved, planar, upward/downward, ...

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

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

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)

What do people want to do with or

learn from network visualizations?

Graph Visualization Task Taxonomy

Topology-

Attribute-

Based Tasks

Browsing

Overview

Topology-

Attribute-

Based Tasks

Browsing

Overview

• 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

Topology-

Attribute-

Based Tasks

Browsing

Overview

• 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

Topology-

Attribute-

Based Tasks

Browsing

Overview

• Follow path

– Follow a given path

• Revisit

– Return to a previously visited node

Topology-

Attribute-

Based Tasks

Browsing

Overview

• Compound exploratory tasks

– Estimate size of a network

– Find patterns

– etc.

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

Types of Layout Algorithms

Source: P. Mutzel, et al, Graph Drawing ‘97

Common Layout Techniques

• Circular

• Arc

• Force-directed

• Matrix

• Circos

• Geographic-Based

• Clustered

• Attribute-Based

• Hierarchical*

• Tree*

Circular Layout

• Ultra-simple

• May not look so great

• Space vertices out

around circle

• Draw lines (edges) to

connect vertices

Hierarchical Edge Bundling

Arc Diagram Layout

Wattenberg

InfoVis ‘02

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

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

d3.js Force-Directed Layout

http://bl.ocks.org/mbostock/4062045

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

Matrix

http://bost.ocks.org/mike/miserables/

Circos

Let’s see some more examples …

Social Network Visualization

People Connections

https://www.ted.com/talks/nicholas_christakis_the_hidden_influence_of_social_networks

Steroids in MLB

Human Diseases

http://www.nytimes.com/interactive/2008/05/05/science/20080506_DISEASE.html?_r=0

Music Artists

http://www.liveplasma.com/

Basole and Park (2014)

NSFNET Traffic

Follow the Money

… or the more academic title “Community Structure in Multi-Scale Transportation

Networks”

https://www.youtube.com/watch?v=kn32vavZqvg

Lots of Examples …

OTS: Linkurio.us

http://linkurio.us/

OTS: Polinode

https://www.polinode.com/

OTS: Cytoscape

http://www.cytoscape.org/

OTS: Gephi

https://gephi.org/

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.

graph & network data visualization · 2017. 2. 8. · • graphs & networks • terminology...

Documents

infovis systems & toolkits

gephi icwsm-tutorial

practica con gephi-facebook

basics gephi tutorial

gephi modularity statistics0801.1647v4

infovis & music

formation gephi : le logiciel gephi

using gephi for network representation and...

gephi cookbook - sample chapter

gephi toolkit tutorial

tutorial - gephi

infovis intro rosaec

ipc subclass detail gephi

tutorial visualization - gephi

network visualization with gephi

infovis in paraview

gephi tutorial: how to import data into gephi

gephi : dynamic features

gephi tutorial layouts

dev8d 2011-gephi