designing graph visualizations - unpicking the hairball

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