Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing graph visualizations - unpicking the hairball

2,314 views

Published on

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.

Published in: Technology
  • Be the first to comment

Designing graph visualizations - unpicking the hairball

  1. 1. Graph Visualisation Unpicking the Hairball Joe Parry
  2. 2. What does data look like?
  3. 3. Data is invisible
  4. 4. To be seen, data must be encoded
  5. 5. How?
  6. 6. 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
  7. 7. Graph Encoding
  8. 8. Edge Vertex Vertex
  9. 9. Edge Vertex Vertex
  10. 10. The Hairball!
  11. 11. Matrix
  12. 12. Edge bundling
  13. 13. Hive plots Hive Plots
  14. 14. ..but the most intuitive is still..
  15. 15. Edge Vertex Vertex
  16. 16. 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?
  17. 17. 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
  18. 18. Demos!
  19. 19. Weapons against the hairball
  20. 20. 1. Start with the Question
  21. 21. 2. Meaningful Visual Encoding
  22. 22. 3. Interaction
  23. 23. 4. Visual Filters
  24. 24. 5. Aggregation
  25. 25. 6. Use a great tool ;-)
  26. 26. All demos made with To see the demos that were shown during this presentation, get in touch: keylines.com/contact

×