Joe Parry

Seeing GraphsHow to successfully visualize connected data

Agenda

• The graph design process• Interaction models• Why animate?• Strategies for visualizing larger networks• A reference architecture

GRAPH MODELLING + Data Visualisation

= Graph Visualisation

Why use the graph data model?

Data models are generally interchangeable, but each have their own strengths in certain.

The graph data model is good for…

• Social interactions• Dependency management• Organizational structures• Connectivity of systems• Biological processes• Financial transactions• Communications• http://keylines.com/why

Good in what sense?

Graph models answer questions:

• what depends on what• how do things flow• where are the risks• impact analysis

A quick clarification…

In any data, there is not ‘one graph’. Any single data set can be modelled in many different ways:

Perhaps more suitable for understanding social networks?

Probably a more accurate picture of how email sending works

Graph Modelling

+ DATA VISUALISATION= Graph Visualisation

Data is invisible

To be seen, data must be VISUALLY ENCODED

There are many different options for encoding data

We need to understand which works best for our audience

Fortunately, people have already researched the most accurate encoding methods…

Quantitative Ordinal Nominal

More Accurate

Less Accurate

Quantitative Ordinal Nominal

Position Position Position

Length Density Hue

Angle Saturation Density

Slope Hue Saturation

Area Length Shape

Density Angle Length

Saturation Slope Angle

Hue Area Slope

Shape Shape Area

Visual encoding by data type

Data visualisation is a DESIGN PROCESS

Graph Modelling

+ Data Visualisation

= GRAPH VISUALISATION

There are several design options for graph

visualisation

Matrix

• All nodes have a column & a row• A dot is put in the middle if a link exists• Good for finding clusters• But requires a lot of cross referencing to

understand the details

Edge bundling

• Nodes are around the edge• Links between the nodes are bundled to

show patterns• Detail can become spread out• Computationally difficult to create

Hive plots

Hive Plots

• Nodes are grouped into categories• Links between nodes are added• This can help display huge networks

with a lessened ‘hairball’ effect• But generally Hive Plots are less intuitive

Classic node-link diagram

• Intuitive• Easy to understand• The most ‘successful’ option

for conveying data

INTERACTIONS

Why is interaction needed?

• The user needs to drive their own focus

• Allows the user to see details on demand

• Allows the user to add or remove bits of the graph

Interactions users expect

• Zooming• Multiple node selection• Hover and tooltip events• Context menus• Gestures & tablet support• Expand on demand• Searching• Commands

ANIMATION

Why animate?

• Users expect it• It provides smoother transitions:

– eases context switching for users– Allows them to keep a mental model

• Animations– can show data– can show dynamics

STRATEGIES FOR LARGER NETWORKS

Beyond a certain size, no automatic layout will help you decipher a graph

Your options include:

1. Use color

2. Use filters

3. Allow users to expand

4. Link & Node aggregation

REFERENCE ARCHITECTURE

Graph Database

Neo4j

Web Server

Reference Architecture

Document Store

Search Index

User Authentication(eg Active Directory)

Chart Storehttp://keylines.com/architecture

Cambridge Intelligence

Start-up, founded May 2011We make network visualisation tools

(big data projects, fraud, security services)

All demos made with

info@keylines.com

Questions?

Contact Information