Measurecamp 6 Workshop: Data Visualisation
-
Upload
sean-burton -
Category
Data & Analytics
-
view
105 -
download
2
Transcript of Measurecamp 6 Workshop: Data Visualisation
Data Visualisation13th March 2015 13:30 – 16:30
Sean Burton
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Overview
• A bit about me…
• Who’s in the room…
• Some background…
• Getting started…
• Exercise!
• Bringing it all together…
• Next steps…
• The wrap up.
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Intros…
Sean [email protected] | @sean_d_burton & @analytdata | analyt.co.uk
I'm passionate about improving customer experience and business value by using a
blend of data, technology and psychology.
About me:
• Formerly the Director of Measurement at Seren Design Ltd.
• A 15 year career covering: eLearning, Content Management Systems, Interaction
Design, Product Management, Web Analytics, and Data Visualisation.
• Extensive experience with FTSE 100 companies across financial,
telecommunication, gaming, and retail sectors.
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Please be patient…
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
19:00 20:00 21:00 22:00 23:00 0:00 1:00 2:00 3:00 4:00 5:00 6:00
Me Daughter Wife
Am
ou
nt
of
be
d o
ccu
pie
d
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
http://xkcd.com/1080/large/
Perception: Colour blindness
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Perception: Visual Processing Pathways
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Perception: Components & Orientation
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Perception: Beauty – Fibonacci & the Golden Ratio
• Finonacci• 0 0 1 1 2 3 5 8 13 21 …
• Each number is the sum of the preceding two numbers
• Equates to a ratio of 1:1.618033987
• The Golden Ratio (Divine proportion, Golden Mean, or Phi) refers to the fact that this ratio appears repeatedly in nature as well as works of art
• Constructal Law (Bejan, 1996 (http://constructal.org/)):• “The eye scans an image the fastest when it is shaped as a golden ratio rectangle.”
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Perception: Information Overload
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Perception: Working Memory: 7 ±2
• Theory that “the number of objects an average human can hold in working memory is 7 ± 2”
• From the paper “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information” by George Miller 1956.
• ‘Chunking’ allows for people to apply meaning to individual objects to group them together making them easier to remember.
• Cowan (2001) has proposed that working memory has a capacity of about four chunks in young adults.
• Allowing audience to get the gist will significantly aid retension
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Digg Labs
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Tree Diagrams
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Flows & Infographics
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Mapping
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Mapping
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Mapping
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Mapping
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Donut & stacks
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Bubble
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Venn & Word Clouds
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Augmentation
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Data Types and how to use them
• Nominal Scale• Clustering or grouping
• Ordinal Scale• Ranked
• Interval Scale• Allows for the degree of
difference between items
• Ratio Scale• Referenced against a non-
arbitrary zero, e.g. absolute zero. Basically means ‘how much’ or ‘how many’.
*Theory of typology – Stevens 1946 (On the theory of scales and measurement, Science)0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples of Visualisation: Corrections
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Exercise
• Get into groups of 3 or 4…
• Plan out a visualisation of the other groups in terms of: name, age, gender, job role, etc. (5 mins)
• Draw appropriate charts to tell the story of the group (5 mins)
• Present back (5 mins each group)
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
• A quick experiment…
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Sales
1st Qtr
2nd Qtr
3rd Qtr
4th Qtr
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
• … what was the best quarter?
• … what % of sales did the 2nd quarter have?Sales
1st Qtr
2nd Qtr
3rd Qtr
4th Qtr
0
1
2
3
4
5
6
7
8
9
1st Qtr 2nd Qtr 3rd Qtr 4th Qtr
Sales
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Everything should be made as simple as possible but
not simpler. “
”0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Ethos of Design
• Simple but not simplistic• Visualisations should be sophisticated without being complex.
• Less is often more!
• Interactive and meaningful• Goal is to make data tangible/tactile so that the end user can relate to it easily,
view it from a different perspective, and gleam insight.
• Context, Context, Context!
• Balance of form and function• Every element of the visualisation must have purpose, however the aesthetic
must also be maintained to retain emotional connection.
• it’s all about visual patterns
• Tell a story
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Ethos of Design
• Audience. • Who are you writing for? The general public will have a different level of expertise to statistical specialists, just as
a school textbook will have different requirements to a scientific journal. If you are unsure, aim your work at a less specialist audience.
• Purpose. • What will the data be used for? If they are intended for reference and further calculation you might present them
differently to if you are demonstrating a particular fact. In practice it is usually only tables that are effective for presenting reference material.
• Clarity. • Will people understand what you're showing? A specialist audience may allow you to use more complex and
unusual presentation techniques, but you should still aim to present the data clearly and correctly.
• Medium. • Will the data appear in a book or on a website? A large table or graphic might work fine on paper but be less
suitable online if it forces users to scroll around. On the other hand, online technology might allow you to make the data interactive in a way that would be impossible on paper. Note that although many aspects of good practice apply to all media, these guidance notes are primarily targeted at static information suitable for print.
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Ethos of Design
• Relevance. • Avoid unnecessary data. Don't put extra variables in a table, or extra features on a map just because you think they're
interesting. Will they be useful to the reader? If not, you probably don't need them.
• Ink to data ratio. • If there's ink on the page which doesn't add to the description or interpretation of data you should ask yourself whether it's
necessary. Whilst some lines and annotations can make things clearer and add visual appeal, too many add clutter. Things to avoid include drawing horizontal lines between every row or column in a table, or drawing too many gridlines on a chart.
• Colour association. • This applies to charts and particularly maps. Most people associate red with Labour and blue with Conservative, for example, so
producing a chart where the colours of the bars are reversed would be confusing. Similarly, on a health map, areas with high levels of a particular disease should normally be coloured darker.
• Colour recognition.• Consider too the suitability of your colour choice for colour-blind people - http://www.vischeck.com is an interesting way of
checking. Also think of the implications if people are likely to photocopy your work, or if they use a black and white printer.
• Format. • Remember that for demonstration (explanatory) purposes, a combination of presentation methods is often best. Specifically, your
tables, charts and maps should be accompanied by text.
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Simplicity
• Drop background as it delivers nothing of value
• Remove pointless decimals from vertical scale
• Place data labels with data series, and remove legend
• Retain gridlines but reduce their prominence
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
NSO Tips: (Excel) chart formatting
• Apply sound design principles;
• Use colour strategically: mute axis and grid lines by greying them out; grey out some contextual data also; use soft colours; use saturated colours sparingly and with a clear purpose of emphasis;
• What the users see is not what you see in your monitor: if needed, test for other monitors and output formats (b&w print, colour print, PDF, overhead projector);
• There is no rational justification to use pseudo-3D charts and other dubious effects(gradients, glow…), so never use them if you what to be rational;
• Use a clear font;
• Don’t emphasize everything (for obvious reasons);
• The y axis scale should start at zero; this is particularly important if you are using bar charts; make sure you have a good reason to break this rule;
• A chart is not a table: by labelling every single data point you make it harder for the user to search for trends or patterns; if you have to, place the labels where they can do no harm;
• Annotate: Add labels for the last, the lowest, the highest or any other relevant data point; add data or comments where appropriate;
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
NSO Tips: (Excel) column and bar charts
• A column chart is not a skyline: if you can’t see the individual patterns, consider removing some series or create several smal ler charts;
• If you are charting categorical data sort the columns; if there is more than one series, allow the user to sort the data;
• If you are displaying time series, column charts are not interchangeable with line charts: column charts allow you to compare individual data points, while a line chart shows the trend; be sure to select what your audience wants to see;
• For target/actual series (like budget/actual) overlap them but make sure they can’t be taken for stacked bars; you can do it by using a different column width for each series or by setting filling to none (usually the target series);
• Use horizontal bar charts when x labels are too large to be correctly displayed;
• The y axis scale should start at zero; this is particularly important if you are using bar charts; make sure you have a (very) good reason to break this rule;
• If you really need to label each column try to minimize its impact; in Excel 2003, select Format Data Labels / Alignment / LabelPosition: Inside Base;
• Don’t use multiple colours for a single data series;
• Avoid stacked bar charts;
• Use category/subcategory to label the x axis. For example, instead of having Mar-2008, Apr-2008… use Mar, Apr and place 2008 in the second line.
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
NSO Tips: (Excel) Line charts
• Don’t use line markers unless you really need them to identify b&w printed charts;
• Don’t use a legend; directly label the series, instead;
• If you can’t easily see the pattern of each series you may have too many;
• In a time series, the spacing between markers in the x-axis should be proportional. For example, if you have data for years 1980, 1990, 2000 and 2008, the spacing between 2000 and 2008 should be smaller than between other dates; if you can’t do it with line charts use a scatter plot;
• If you are comparing two series like imports/exports or profit/expenses, chart the differences, not the actual series (or at least add a small chart with the differences, below the main chart;
• If you are comparing two time series with very different units of measurement, consider using a logarithmic scale;
• You don’t have to start the Y-axis scale at zero; break the scale if you need;
• If you are using different line styles you may be emphasizing some series more than the others; make sure that’s consistent with your users needs (emphasize what is important);
• Add a trend line (make sure the trend is plausible…);
• Don’t use line charts for categorical data; if you need a profile chart use a scatter plot and switch axis.
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
NSO Tips: (Excel) pie charts
• Do you really need a pie chart?
• Pie charts shouldn’t be compared (comparing market shares in two regions, for example);
• Don’t use the “exploded” option;
• Five is in general the maximum number of slices you can use in a pie chart, but two is better…;
• If there is no other meaningful order, order the slices from maximum to minimum;
• Put “other” in a grey slice;
• Don’t use a legend, just label the slices;
• Use a very small pie chart in a supporting role for a more complex chart;
• Use the appropriate colour codes to identify groups of slices;
• Start the first slice at 0º (noon);
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
…but as Albert said…
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Good KPIs are “Übermetrics”…
Good KPI
Strategic measures of
success
ActionableEasy to
understand
Based onvalid data
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Components of a good dashboard
Appropriate real-time information
Warning lights and graphics
Capacity andcurrent levels
Relevant historic data
Key information displayed clearly
Ability to adjust metrics through action
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Dashboard development process
Requirements analysis
• Interviews with stakeholders
Data and systems review
•Review data sources
•Review current reports
•Review reporting systems
Design
•Conceptual reporting model
•Data model
•Dashboard wireframes
•Mock ups
Prototype
•Dashboard design and prototyping
•Reporting technology selection
Automation
•Production systems
•Dissemination
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Dashboard: Stephen Few
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Dashboards customised to desired reporting periods.
Commentary section to allow additional context for known events or insight.
KPIs requiring attention are clearly
highlighted.
Sparklines are used to give trended view of relevant metric.
Each metric is shown in context to the last reporting period and to the
average over last year.
Example Dashboard
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples: Membership Dashboard
51
Engagement
PerformanceAcquisition
Buzz
MoM: -2 (-%3)YoY: +16 (%8)
MoM: -16 (-%3)YoY: +19 (%11)
New Visits
Repeat Visits
Star Users
Mentions
Re-Tweets
Followers
245
110 70MoM:+26 (+10%)YoY: +6 (+3%)
MoM: -16 (-9%) YoY: -6 (-3%)
PPC
Organic
Qual. visits
Train Visits
Bookstore
Executive DashboardSite: www.mysite.comDate: 01/07/2010 – 31/07/2010
Insight and Action1. Insightful comment about data
• Recommended action2. Insightful comment about data
• Recommended action
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Examples: Charity Dashboard
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Dashboards: 5 key elements
• Relevance• Make sure you’re showing the right stuff to the right
person at the right time!
• Context• Try to ‘ground’ each metric, by showing: the metric, it’s
trend; and a comparator
• Also think about other associated metrics
• Colour• Use sparingly, e.g. only red for alerts
• Don’t depend on the colour to convey meaning – couple with an icon, e.g. green up-arrow vs red down-arrow.
• Story• Try to configure your dashboard to tell a story. Most
people read top-left to bottom-right – try to layout metrics accordingly
• Aesthetic• Be driven by the function and not the form. Tailor your
design to your audience, you don’t want an exec to be put off your dashboard simply because it’s ugly!
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
Dashboards: Excel, PowerPoint and the web
• PowerPoint is great for mocking up dashboards and testing navigation designs.
• VBA within PowerPoint can result in dynamically built slides, pulling new data directly from Google Analytics and other sources
• Excel is massively powerful and doesn’t have to boring! • (show examples
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
A few helpful links…
• Data vis tools• Datawrapper
• Infogr.am
• PiktoChart
• Google Fusion Tables
• Visumap & Ggobi (High-dimensionality data visualisation)
• http://supermetrics.com/
• Web libraries• Chartjs (http://www.chartjs.org/)
• D3 (http://d3js.org/) and DC (http://dc-js.github.io/dc.js/)
• Examples for inspiration• http://dadaviz.com/i/851
• Golden Ration• http://www.hongkiat.com/blog/golden-ratio-in-moden-
designs/
0191 704 2045 | analyt.co.uk | [email protected] | @analytdata
A couple of great books:• The Visual Display of Quantitative Information (Edward
Tufte)http://www.amazon.co.uk/gp/product/0961392142/ref=oh_aui_detailpage_o06_s00?ie=UTF8&psc=1
• Information Dashboard Design (Stephen Few)http://www.amazon.co.uk/gp/product/1938377001/ref=oh_aui_detailpage_o06_s00?ie=UTF8&psc=1
@analytdatatwitter
webanalyt.co.uk
http://www.surveygizmo.com/s3/1800143/MeasureCamp-V-Training
Training Feedback