Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual...
Transcript of Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual...
![Page 1: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/1.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/7.jpg)
Colours
![Page 8: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/10.jpg)
Qualitative
![Page 11: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/11.jpg)
Sequential
![Page 12: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/12.jpg)
Diverging
![Page 13: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/13.jpg)
![Page 14: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/16.jpg)
Guidelines & Techniques
![Page 17: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/18.jpg)
![Page 19: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/19.jpg)
![Page 20: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/22.jpg)
![Page 23: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/23.jpg)
![Page 24: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/24.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/25.jpg)
![Page 26: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/26.jpg)
![Page 27: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/27.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/28.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/29.jpg)
Pie Charts
![Page 30: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/30.jpg)
![Page 31: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/31.jpg)
![Page 32: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/32.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/33.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/34.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/35.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/36.jpg)
Dashboards
![Page 37: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/37.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/38.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/39.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/40.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/41.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/42.jpg)
Demo
![Page 43: Data Visualisation - Sas Institute · Data Visualisation Design Guidelines with SAS Visual Analytics ... requires greater attention. Qualitative. Sequential. Diverging. Colour Blindness](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/43.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/44.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/45.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042621/5f5544240d8b9b0d67542ed6/html5/thumbnails/46.jpg)
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