data visualisation - sas institute · data visualisation design guidelines with sas visual...

47
Data Visualisation Design Guidelines with SAS Visual Analytics Christopher Redpath

Upload: others

Post on 18-Jul-2020

13 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Data Visualisation

Design Guidelines with SAS Visual Analytics – Christopher Redpath

Page 2: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

A little bit about Visual Perception…

...we don’t notice everything that we see

Page 3: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Ronald A. Rensink -

http://www.psych.ubc.ca/%7erensink/flicker/download/index.html

Working memory is extremely limited

Page 4: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

How many “5” are there?

1365984126310294778660013741638

2704879461305429746313529487663

1644908523314772294876315498694

4971301823697431980350349876312

Stephen Few (2012) Show me the numbers,

Second edition.

Analytics Press. Side 68

Page 5: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

How many “5” are there?

1365984126310294778660013741638

2704879461305429746313529487663

1644908523314772294876317498694

4971301823697431980350349876312

Stephen Few (2012) Show me the numbers,

Second edition.

Analytics Press. Side 68

Page 6: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 7: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Colours

Page 8: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Background Colour

Stephen Few - http://www.perceptualedge.com

Page 9: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 10: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Qualitative

Page 11: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Sequential

Page 12: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Diverging

Page 13: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 14: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 15: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Colours of the Rainbow

• Use colour sparingly (where it has a meaning)

Page 16: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Guidelines & Techniques

Page 17: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 18: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 19: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 20: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Data-ink / Data-pixel ratio

• Above all else show the data

• Erase non-data-pixels within reason

• Maximize data-pixel ratio within reason

Page 21: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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.

Page 22: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 23: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 24: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 25: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 26: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 27: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 28: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 29: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Pie Charts

Page 30: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 31: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness
Page 32: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 33: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 34: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 35: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Copyr i g ht © 2013, SAS Ins t i tu t e Inc . A l l r ights reser ve d .

Page 36: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Dashboards

Page 37: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Many Different Views

• Many think “Dashboard” implies gauges

• Many consider Dashboards to mean “Collection

of little Reports”

• Many consider Dashboards as an end point

Page 38: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Life of a Dashboard

NOTICE

INVESTIGATE

ACT

FOCUS

Page 39: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Layering for Guided Analysis

High Level

Medium Level

Low Level

High

Low

Medium

Low

Medium

High

Medium

Low

High

Medium

High

Low

Context

Page 40: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Areas of Emphasis

Emphasised Neutral

Neutral De-Emphasised

Page 41: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Useful Links

• Stephen Few - http://www.perceptualedge.com

• Color Brewer - http://colorbrewer2.org/

Page 42: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

Demo

Page 43: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 44: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 45: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 46: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

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

Page 47: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness

www.SAS.com

Questions