The document outlines a data visualization design workshop led by Cam Taylor, focusing on effective practices for visualizing rapidly growing data. Key topics include understanding the audience, utilizing appropriate visuals, and integrating data visualization into everyday work to enhance clarity and engagement. The workshop emphasizes the importance of storytelling with data and avoiding common pitfalls in data presentation.

1. Data Visualisation
Design Workshop
July 2016

2. Cam Taylor
@heycamtaylor
Product & UX @ 3CS software

3. 1. The Problem
2. Data
3. Audience
4. Visuals
5. Pro Tips
6. Team Exercise
Today’s
Topics

4. Data in growing faster & faster
It’s 2016 and…

5. Literally everything is connected – even toilet paper and toilets - and we’ve got the
technology to capture, store and process the data coming from all the internet of things.
Source: https://www.raspberrypi.org

6. Meaning…
There’s to use & understand it

7. Source: https://infocus.emc.com/rachel_west/delivering-on-the-promise-of-big-data/

8. Data Vis to the Rescue!?
…our brains are much better at interpreting large amounts of data visually
Easier, faster to understandHarder, slower to understand
Same
data
but in
visual
form
Source: http://www.slideshare.net/idigdata/data-visualization-best-practices-2013/6-Audience_Considerations_What_information_does

9. But…
It’s to visualise data well
Which means not all data visualisation’s are clear, precise, efficient

10. That doesn’t seem to blunt anyone’s enthusiasm though…
Source: google image search “info graphics”

11. Even Adobe gets it wrong…
Source: https://myanalyticsscore.com

12. …A lot of apps, reports, infographics, dashboards etc look great
but don’t present data well & don’t say anything meaningful
Source: http://line25.com/articles/25-visually-stunning-app-dashboard-design-concepts

13. We’re unwittingly making it harder to
find the needles of useful information
in rapidly growing mounds of hay.
Stephen Few – Perpetual Edge

15. Every time
someone
makes a
dashboard or
infographic…
Another way of thinking
about it

16. Even as UX’ers sometimes we’re just as guilty…

17. Like focusing too much on data input
and not thinking enough about output
We’ve all deliberated over something like
whether the labels should go above or
adjacent to fields for hours...
…And then we throw a dashboard
together because the competitor has it,
the client or boss demands it or marketing
want a better screenshot for the website.
https://uxdesign.cc/design-better-forms-96fadca0f49c#.wuctxle4h http://www.kaushik.net/avinash/wp-content/uploads/2008/04/sub-optimal-dashboard-1.jpg

18. So today’s a good time to learn a few new things and
refresh the stuff we already know….
...about good data visualation practices

19. 1. The Problem
2. Data
3. Audience
4. Visuals
5. Pro Tips
6. Team Exercise
Today’s
Topics

20. Identify & understand the story you are trying to tell
How are our sales tracking?
What clothes should I pack for my holiday?
What’s our conversion rate?
Should I buy this stock?
Where is global warming at its worst?
This will inform research, analysis and design to deliver your message

21. Why are people dying of cholera…
*Not this Jon Snow
Meet Dr John Snow*
https://en.wikipedia.org/wiki/John_Snow
Traced the source of a
cholera outbreak
which killed 600 in
Soho, London in
September 1854.
https://HBO.com
An example…

22. Taking the data he’d captured from his street corner
detective work...
…He commissioned lithographer Charles Cheffins to
illustrate the clusters of cholera cases

23. http://blogs.plos.org/publichealth/files/2013/03/John-Snows-cholera-map-of-009.jpg

24. Broad St Water Pump
Radius of Cholera Deaths
http://blogs.plos.org/publichealth/files/2013/03/John-Snows-cholera-map-of-009.jpg
Cholera Deaths

25. What transpired?
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002Je

26. 100 years after the event, a pub near the site of the old
water pump was named in Jon Snow’s honour.
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002Je

27. 1. The Problem
2. Data
3. Audience
4. Visuals
5. Pro Tips
6. Team Exercise
Today’s
Topics

28. Who are we designing the Data for?

29. 1. Frequency of Use
3. Familiarity with the Subject
2. Abstraction & Level of Detail
Daily
Weather Forecast
Yearly
Annual Report
Expert
Analytics for SEO experts
Ignorant
Blog/Newspaper Infographic
High Level
CEO Exec Sumamary
Detailed
Analyst Report

30. Casual cyclist…
An example…
http://media.148apps.com/screenshots/426826309/us-applewatch-2-strava-running-and-cycling-gps-run-and-ride-tracker.jpeg

31. …vs the enthusiast/amateur
Source: Stava.com

32. …vs the Professional & their Coach
To the uninitiated this is too much data & too complicated but for the the expert who looks at it everyday it’s just right.
Source: TrainingPeaks.com

33. 1. The Problem
2. Data
3. Audience
4. Visuals
5. Pro Tips
6. Team Exercise
Today’s
Topics

34. Single Data Points
For Critical and Headline Info
eg bank balance
Use Sparingly
Otherwise it won’t stand out
Can Show Status
eg with green & red for +/-
Context Determines Accuracy
eg $56k vs $56,364.32
Source: Anz.com

35. Single Data Points + Showing Change
Spark Lines
Very small line chart, typically drawn without axes or coordinates
Arrows & Chevrons
Indicates direction of movement
Source: Commbank.com.auSource: Google Web Trends 2015

36. Bar Charts
Versatile
Can be used for comparing categories, change over time and parts of a whole
Very easy to interpret
People are better at judging length/height vs area

37. Bar
Chart
Tips
Start Y-Axis at 0
Generally, truncating
bars distorts the truth.
Order the Data
With common sense (alphabetical,
sequentially or by value)
Use Horizontal Labels
Vertical or slanted labels are harder to read.
Turn the chart horizontal if labels are long.
Use Minimal Colour
Save alternate colours for
highlighting exceptions
Jan Feb Mar Apr May June July
30
60
0
90
Coffees I’ve Consumed in 2016 so Far*
Space the Bars
½ the bar’s width between is a
good starting point
Add Targets and Goals
To show tracking of actuals vs planned or
target amounts
Goal = 50

38. Pie & Donut Charts
Donut Charts
Best used with a single data point
showing progress, completion, capacity,
scarcity etc
Pie Charts
Good for showing the parts of a
whole (a breakdown of 100%) for
things like market share (above).
Note: Research has shown it is difficult to compare different sections of a given pie chart, or to compare data across different pie
charts. Pie charts can be replaced in most cases by bar charts.
Source: BRW Australia

39. Pie Chart Tips
All Data = 100%
Otherwise your visualisation will
lose all credibility.
Watch for rounding to push you
over 100%.
Max 5-6 Categories
Otherwise it’s too hard to differentiate
between data and reduces the
effectiveness of the chart.
Group smaller categories together (ie.
Other) but make sure it doesn’t hide
critical info.
Slices = correct proportion
Make sure the sizes of the pie or
donut are accurate. Avoid
perspective (see above, 19.5% is not
bigger than 21.2%)
Source: Des Traynor
193%!

40. Line Charts
What is it Exactly?
Displays information as a series of
data points connected by lines.
Best Suited to
Illustrating trends, volatility, velocity of individual metrics (one
line) or the relationship between several (multiple lines).
Source: Google Web Trends 2015

41. Line Chart Tips
Do
- Place labels next to the lines
- Complement visual chart with tabular data
- Make the data the hero
Don’t
- Clutter chart with point data
- Make the reader jump back and
forth with a separate legend
- Distract with surrounding content
Source: http://www.perceptualedge.com/example2.php

42. Plots
Scatter Plot
Shows how data rates against two variables at
the same time. Good for spotting outliers.
Can show a third variable with dot colour and
add lines to show positive or negative trends.
Bubble Plot
Same as a scatter plot but shows a forth variable
with bubble size.
Watch for overlap and check big bubbles don’t
obscure smaller bubbles behind.
http://www.slideshare.net/Visage/data-visualization-101-how-to-design-chartsandgraphs

43. Maps
Heat map or Choropleth map
Geographical areas are shaded or
patterned based on the variable being
displayed.
Source: http://stateofobesity.org/adult-obesity/
Bubble Map
Great for showing specific values at
Geographical locations or regions.
https://internationalmedicalcorps.org/europe-response

44. Illustrations
Brings data to life and easier to relate to
Adds an extra layer to the story when done well. Quite often
include common objects for comparison.
Keep colours and artistic effects to a minimum – it’s easy for
these to take the focus of the data.
National geographic does amazing work with illustrations in
data vis.
Vultures Endangered
Which ones, how big are they and how endangered?
Asteroid Diameter
Compared to New York City

45. Iconography
Helps Imply Context Immediately – Minimises reading and maximises scan-ability
But make sure it doesn’t distract from the data and serves a purpose.

46. Even Photos
Composite Image
This image shows the plane takeoffs.
Source: http://feltron.tumblr.com/
With Data Overlaid
This image shows radiation levels in a Russian town.

47. http://airbnb.com
Add data visualisation elements to everyday work
Not just reserved for reports, dashboards and info graphics etc. Add things where it
makes sense and helps people comprehend information. For example, AirBNB’s
distribution chart on their price range control.
Bringing it Together
How do we take this stuff and use it tomorrow

48. Source: 3CS software
Add data visualisation elements to everyday work
There’s lots of place where adding small visualisations makes sense
and adds value.
This is our products Hourly, showing the budget details visually when
selecting and displaying budgets on projects.
Bringing it Together
How do we take this stuff and use it tomorrow

49. Bringing it Together
http://stateofobesity.org/adult-obesity/
Combine Elements to Tell a Better Story
Use multiple elements to help explain and explore. For
example, tabular data and visuals work well together so
the reader can delve into more detail if desired.
Take advantage of Interactive & Rich Mediums
Can you use animations, filtering, sorting, highlighting,
drill downs (interactive) or do you need to present
everything to the user (static)
How do we take this stuff and use it tomorrow

50. 1. The Problem
2. Data
3. Audience
4. Visuals
5. Pro Tips
6. Team Exercise
Today’s
Topics

51. Comprehension - Make it easier not harder
If your data visualisation has the same effect on users as an Escher
diagram, then you haven’t done your job well…

52. Be mindful of the science…
http://www.dashboardinsight.com/CMS/b5144547-0ecb-40c0-aaf2-a5f96c8b6e7f/Remove-junk-chart.png
Remove Chart Junk
Stuff that distracts the viewer from the information and
makes it hard to focus on the data.
Aim for a High Data Ink Ratio
The amount of content on the page dedicated to
the actual data vs lines, boxes, and backgrounds etc

53. …but a find a balance with the art
Get Creative
Data Vis needs to engage.
It doesn’t matter how clear
or concise it is if no one
wants to look at or interact
with it.
This sample is one from
Nicholas Felton’s annual
Feltron reports blending
both accuracy and beauty.
Source: Feltron Report

54. Don’t Deceive (Accidentally or Deliberately)
Avoid 3D
• It messes with sizing and makes things look
bigger and smaller than they are
http://www.perceptualedge.com/blog/wp-content/uploads/2014/01/deaths-by-cause-treemap.jpg
Also Watch out for
• Bad grouping (eg. important data hidden in other)
• Not starting axes at 0
• Flipped axes (something looks like it’s improving but it’s
actually getting worse and vice-versa)
• Curved, smoothed line charts that imply detail you don’t
have (Lines should be straight between data points)
• Area charts making data shape affect other attributes
• Using shapes or icons on bubble charts

55. In summary…
It’s
• Workout what story to tell or question to answer (Data)
• Understand who you’re designing for (Audience)
• Know your visual elements and how to use them (Visuals)
• Integrate visualisations into everyday work
• Remember to take advantage of interactive mediums
• Don’t make the user work to extract the data
• Balance the art & science
• Don’t deceive
to visualise data well
Remember the kittens…
Up next… Team Exercise

56. 1. The Problem
2. Data
3. Audience
4. Visuals
5. Pro Tips
6. Team Exercise
Today’s
Topics

57. Identify and Visualise the Following on a Dashboard
How are the people in your group connected?
Might be hobbies, mutual friends, colour of your clothes, place of birth, places travelled etc
Who has the longest daily commute?
Additional prompts: Did you drive, ride, use public transport or uber? How long was it? How far was it?
Where do each of you live in Brisbane?
Additional prompts: Are there multiple people in certain areas? Where were you previously?
What’s the breakdown of smart phone brands at your table?
Additional prompts: What’s most popular
What time did each of you wake up today?
Additional prompts: Who was earliest? Who was latest? Was it earlier or later than the day before.
Get into groups of 5-10
BONUS

58. To get in touch:
Cam@3cssoftware.com.au
Thank You