Joe Parry
Seeing Graphs
How to successfully visualize connected
data
Agenda
• The graph design process
• Interaction models
• Why animate?
• Strategies for visualizing larger networks
• A ref...
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...
• Social interactions
• Dependency management
• Organizational structures
• Connectivity of systems
• Biological processes...
Good in what sense?
Graph models answer questions:
• what depends on what
• how do things flow
• where are the risks
• imp...
A quick clarification…
In any data, there is not ‘one graph’. Any single
data set can be modelled in many different ways:
...
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, pe...
Quantitative Ordinal Nominal
More Accurate
Less Accurate
Quantitative Ordinal Nominal
Position Position Position
Length De...
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 r...
Edge bundling
• Nodes are around the edge
• Links between the nodes are bundled to
show patterns
• Detail can become sprea...
Hive plots
Hive Plots
• Nodes are grouped into categories
• Links between nodes are added
• This can help display huge net...
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 t...
Interactions users expect
• Zooming
• Multiple node selection
• Hover and tooltip events
• Context menus
• Gestures & tabl...
ANIMATION
Why animate?
• Users expect it
• It provides smoother transitions:
– eases context switching for users
– Allows them to ke...
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 Director...
Cambridge Intelligence
Start-up, founded May 2011
We make network visualisation tools
(big data projects, fraud, security ...
All demos made with
info@keylines.com
Questions?
Contact Information
Upcoming SlideShare
Loading in …5
×

Seeing Graphs - How to successfully visualize connected data

844 views
624 views

Published on

How to visualize graphs. Learn how to

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
844
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Seeing Graphs - How to successfully visualize connected data

  1. 1. Joe Parry Seeing Graphs How to successfully visualize connected data
  2. 2. Agenda • The graph design process • Interaction models • Why animate? • Strategies for visualizing larger networks • A reference architecture
  3. 3. GRAPH MODELLING + Data Visualisation = Graph Visualisation
  4. 4. 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…
  5. 5. • Social interactions • Dependency management • Organizational structures • Connectivity of systems • Biological processes • Financial transactions • Communications • http://keylines.com/why
  6. 6. Good in what sense? Graph models answer questions: • what depends on what • how do things flow • where are the risks • impact analysis
  7. 7. 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
  8. 8. Graph Modelling + DATA VISUALISATION = Graph Visualisation
  9. 9. Data is invisible To be seen, data must be VISUALLY ENCODED
  10. 10. 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…
  11. 11. 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
  12. 12. Data visualisation is a DESIGN PROCESS
  13. 13. Graph Modelling + Data Visualisation = GRAPH VISUALISATION
  14. 14. There are several design options for graph visualisation
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Classic node-link diagram • Intuitive • Easy to understand • The most ‘successful’ option for conveying data
  19. 19. INTERACTIONS
  20. 20. 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
  21. 21. Interactions users expect • Zooming • Multiple node selection • Hover and tooltip events • Context menus • Gestures & tablet support • Expand on demand • Searching • Commands
  22. 22. ANIMATION
  23. 23. 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
  24. 24. STRATEGIES FOR LARGER NETWORKS
  25. 25. Beyond a certain size, no automatic layout will help you decipher a graph Your options include:
  26. 26. 1. Use color
  27. 27. 2. Use filters
  28. 28. 3. Allow users to expand
  29. 29. 4. Link & Node aggregation
  30. 30. REFERENCE ARCHITECTURE
  31. 31. Graph Database Neo4j Web Server Reference Architecture Document Store Search Index User Authentication (eg Active Directory) Chart Store http://keylines.com/architecture
  32. 32. Cambridge Intelligence Start-up, founded May 2011 We make network visualisation tools (big data projects, fraud, security services)
  33. 33. All demos made with info@keylines.com Questions? Contact Information

×