Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

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

1 318 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

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

×