How to visualize graphs. Learn how to

1. Joe Parry
Seeing Graphs
How to successfully visualize connected
data

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

3. GRAPH MODELLING
+ Data Visualisation
= Graph Visualisation

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. • Social interactions
• Dependency management
• Organizational structures
• Connectivity of systems
• Biological processes
• Financial transactions
• Communications
• http://keylines.com/why

6. Good in what sense?
Graph models answer questions:
• what depends on what
• how do things flow
• where are the risks
• impact analysis

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. Graph Modelling
+ DATA VISUALISATION
= Graph Visualisation

9. Data is invisible
To be seen, data must be
VISUALLY ENCODED

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. 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. Data visualisation is a
DESIGN PROCESS

13. Graph Modelling
+ Data Visualisation
= GRAPH VISUALISATION

14. There are several design
options for graph visualisation

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. 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. 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. Classic node-link diagram
• Intuitive
• Easy to understand
• The most ‘successful’ option
for conveying data

19. INTERACTIONS

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. Interactions users expect
• Zooming
• Multiple node selection
• Hover and tooltip events
• Context menus
• Gestures & tablet support
• Expand on demand
• Searching
• Commands

22. ANIMATION

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. STRATEGIES FOR LARGER
NETWORKS

25. Beyond a certain size, no automatic layout
will help you decipher a graph
Your options include:

26. 1. Use color

27. 2. Use filters

28. 3. Allow users to expand

29. 4. Link & Node aggregation

30. REFERENCE ARCHITECTURE

31. Graph Database
Neo4j
Web Server
Reference Architecture
Document Store
Search Index
User Authentication
(eg Active Directory)
Chart Store
http://keylines.com/architecture

32. Cambridge Intelligence
Start-up, founded May 2011
We make network visualisation tools
(big data projects, fraud, security services)

33. All demos made with
info@keylines.com
Questions?
Contact Information