Joe Parry
Graph VisualisationUnpicking the Hairball
What does data look like?
Data is invisible
To be seen, data must be encoded
How?
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
Graph Encoding
Vertex Vertex
Edge
Vertex
Vertex
Edge
The Hairball!
Matrix
Edge bundling
Hive plots
Hive Plots
..but the most intuitive is still..
Vertex Vertex
Edge
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?
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
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