This presentation was delivered at GraphConnect London on 19 November 2013. Joe Parry, CEO of Cambridge Intelligence and creator of the network visualization software 'KeyLines', spoke on the subject of good and bad graph design. This presentation includes tips on how to ensure your graph visualizations are informative, intuitive and attractive.

1. Graph Visualisation
Unpicking the Hairball
Joe Parry

2. What does data look like?

7. Data is invisible

8. To be seen, data must be
encoded

9. How?

11. Visual encoding by data type
Quantitative
Quantitative
Ordinal
Ordinal
Nominal
Nominal
Position
Position
Density
Hue
Angle
Saturation
Density
Slope
Hue
Saturation
Area
Length
Shape
Density
Angle
Length
Saturation
Slope
Angle
Hue
Less Accurate
Position
Length
More Accurate
Area
Slope
Shape
Shape
Area

12. Graph Encoding

13. Edge
Vertex
Vertex

14. Edge
Vertex
Vertex

15. The Hairball!

16. Matrix

17. Edge bundling

18. Hive plots
Hive Plots

19. ..but the most intuitive is still..

20. Edge
Vertex
Vertex

21. Common Graph Visualization Mistakes
• 3D
– Occlusion problems
– Difficult to navigate
– Hard to print
• Bad Colour Choice
– Red/Green
– Rainbow
• No Labels
– What is this vertex anyway?!
• No Legend
– What are these categories?

22. Common Graph Visualization Mistakes
• No Tooltip
– Need more information on hover
• No emphasis of important nodes
• Black backgrounds
– (Only appropriate for users in the dark)
• Bad navigation
– Should use all of
mouse, touch, gestures
• No Interaction!
– Users need to interact with /
manipulate the data

23. Demos!

24. Weapons against the hairball

25. 1. Start with the Question

26. 2. Meaningful Visual Encoding

27. 3. Interaction

28. 4. Visual Filters

29. 5. Aggregation

30. 6. Use a great tool ;-)

31. All demos made with
To see the demos that were shown during this
presentation, get in touch:
keylines.com/contact