Graph Visualisation
Unpicking the Hairball
Joe Parry
What does data look like?
Data is invisible
To be seen, data must be
encoded
How?
Visual encoding by data type
Quantitative
Quantitative

Ordinal
Ordinal

Nominal
Nominal

Position

Position

Density

Hue...
Graph Encoding
Edge
Vertex

Vertex
Edge

Vertex
Vertex
The Hairball!
Matrix
Edge bundling
Hive plots

Hive Plots
..but the most intuitive is still..
Edge
Vertex

Vertex
Common Graph Visualization Mistakes
• 3D
– Occlusion problems
– Difficult to navigate
– Hard to print

• Bad Colour Choice...
Common Graph Visualization Mistakes
• No Tooltip
– Need more information on hover

• No emphasis of important nodes
• Blac...
Demos!
Weapons against the hairball
1. Start with the Question
2. Meaningful Visual Encoding
3. Interaction
4. Visual Filters
5. Aggregation
6. Use a great tool ;-)
All demos made with

To see the demos that were shown during this
presentation, get in touch:

keylines.com/contact
Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013
Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013
Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013
Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013
Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013
Upcoming SlideShare
Loading in...5
×

Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013

628

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Graph Visualization – Unpicking the Hairball - Joe Parry @ GraphConnect London 2013

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×