data visualisation - sas institute · data visualisation design guidelines with sas visual...
TRANSCRIPT
Data Visualisation
Design Guidelines with SAS Visual Analytics – Christopher Redpath
A little bit about Visual Perception…
...we don’t notice everything that we see
Ronald A. Rensink -
http://www.psych.ubc.ca/%7erensink/flicker/download/index.html
Working memory is extremely limited
How many “5” are there?
1365984126310294778660013741638
2704879461305429746313529487663
1644908523314772294876315498694
4971301823697431980350349876312
Stephen Few (2012) Show me the numbers,
Second edition.
Analytics Press. Side 68
How many “5” are there?
1365984126310294778660013741638
2704879461305429746313529487663
1644908523314772294876317498694
4971301823697431980350349876312
Stephen Few (2012) Show me the numbers,
Second edition.
Analytics Press. Side 68
Pre-attentive Attributes – Quick Processing
Stephen Few (2004),
Tapping the Power of Visual Perception
Type Attribute Quantitatively Perceived
Form Length Yes
Width Yes – Limited
Orientation No
Size Yes – Limited
Shape No
Enclosure No
Colour Hue No
Intensity Yes – Limited
Position 2-D Position Yes
Colours
Background Colour
Stephen Few - http://www.perceptualedge.com
Colour Pallet
• Use a consistent background
• Make sure that there is enough
contrast between the background and
the data object to make it easily visible
• Use soft, natural colours to display
most information and bright and/or dark
colours to highlight information that
requires greater attention
Qualitative
Sequential
Diverging
Colour Blindness
• 10% of males
• 1% of females
• Majority cannot distinguish between red and green
• To be colour blind safe – avoid combining red and green
in the same visual
Colours of the Rainbow
• Use colour sparingly (where it has a meaning)
Guidelines & Techniques
Data-ink / Data-pixel ratio
Data-pixel ratio
= data-pixels / total pixels used to display the graphic
= proportion of a graphic’s pixels devoted to the non-redundant
display of data-information
= 1.0 – proportion of a graphic that can be erased without loss
of data-information
Data-ink / Data-pixel ratio
• Above all else show the data
• Erase non-data-pixels within reason
• Maximize data-pixel ratio within reason
Know your scales
• Nominal – discrete items that belong to a common category but do not relate to one
another in any particular way
Example: Sales, Operations, Marketing, HR
• Ordinal – Items that do have an intrinsic order but do not correspond to quantitative
values
Example: A, B, C, D, E
• Interval – Like ordinal has an intrinsic order but also corresponds to quantitative values
Example: Jan, Feb, Mar, Apr, May, Jun, Jul etc.
Know the size of your scales
• Always have a bar chart start from 0 on the measure axis
• The length of the bars is an important aspect of the perception of the
data
• Line graphs can be compressed to a range from just
below the lowest value to just above the highest value
• Note: Be careful when values are close together as a compressed
axis could accentuate change
Layout Rules
• Graphics should tend to towards the horizontal
i.e. greater length than height
• Eye is naturally practised in detecting deviations from
the horizon
• Easier to read words from Left to right on horizontally
stretched plot
Layout Rules
• If the nature of the data suggests the shape of the
graphic, follow that suggestion
• Example: Scatter plot between two variables, it is sometimes
better to use a square graph layout to avoid variable bias
• Otherwise use horizontal graphics about 50% wider
than taller
Pie Charts
Pie Charts
• Should be avoided
• Part to whole information can be communicated more clearly
using a bar graph
• Bar graphs are quicker to process
• Pre-attentive visual attribute of line length
• Our visual perception does a poor job of comparing 2D areas and
angles
• Bar charts can also be compressed into a smaller space
Third Dimension
• We cannot do 3D charts it in SAS Visual Analytics
(Horray!) but if we did:
• Should be avoided
• Makes data harder to read
• Skews the axis
• Causes occlusion
• Cannot see everything clearly at once
• Adds useless non-data pixels
Small Multiples
• Related graphs arranged in a matrix
• The same basic graph appears multiple times but each time
differing along a single variable
• Can help avoid change blindness by allowing us not to have
look at another graph or another display to compare the data
Copyr i g ht © 2013, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Dashboards
Many Different Views
• Many think “Dashboard” implies gauges
• Many consider Dashboards to mean “Collection
of little Reports”
• Many consider Dashboards as an end point
Life of a Dashboard
NOTICE
INVESTIGATE
ACT
FOCUS
Layering for Guided Analysis
High Level
Medium Level
Low Level
High
Low
Medium
Low
Medium
High
Medium
Low
High
Medium
High
Low
Context
Areas of Emphasis
Emphasised Neutral
Neutral De-Emphasised
Useful Links
• Stephen Few - http://www.perceptualedge.com
• Color Brewer - http://colorbrewer2.org/
Demo
Copyr i g ht © 2013, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Example of a Dashboard/report built without guidelines
Copyr i g ht © 2013, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Applying the guidelines to the Report/Dashboard
Copyr i g ht © 2013, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Be aware of charts that can be misinterpreted
Copyr i g ht © 2013, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Using custom graphs to help with interpretation