An introduction to the art & science…
• Still, after almost a decade of being popularised, under
• Here is a deﬁnition that is broadly agreed upon within the
• Based on (non-visual) data.
• Produce an image.
• The result must be readable and recognisable.
• Allow the user to draw meaning from large, unwieldy,
• Speed - rapid interpretation of the data.
• Depth - interpretation at many levels.
• Insight - genuine discovery of information.
• Recall - images are easier to remember.
• Engagement - encourage interaction and discovery.
– David McCandless
“In an endless jungle of websites with text-
based content, a beautiful image with a lot of
space and colour can be like walking into a
clearing. It's a relief.”
– Edward Tufte
“The minimum we should hope for with any
display technology is that it should do no
In the ﬁeld of Data Visualisation there is a
growing idea that you need to fall into one of
these two camps;
• Scientiﬁc and evidence based - Tufte
• Fun, bold and colourful - McCandless
You don’t - you need to be in both…
• Why is it so important?
• “Big Data”
• Impatience - people just don’t look at your data!
• let’s go through a quick example…
• Tell me about the distribution of earthquakes across the
globe in the ﬁrst month of 2015?
• The USGS ATOM data ﬁle for the last 24 hrs is over 200
• Now take a look at the visualisation and see if you feel
more able to answer the question?
How? In Theory
• Use traditional story telling techniques - a
beginning, middle and end. It works!
• Photography. Proven techniques, e.g. blur.
• Standard patterns!
• Elements from the natural world (blue is sea, not
How? In Practice
• D3. Really? Is it interactive?
• Static - Photoshop
• Does it matter?
• Let’s take a look at an example in a bit more
• “Male vs Female membership of the UK
• You kind of already know the answer before I show
• This is a common weakness in many visualisations
- they aren’t showing you anything new!
What do you notice?
• It was deﬁnitely a leading question. The author had a
clear agenda - to highlight discrimination against
• What about the context? How many women actually
stood for election?
• We are implying that people aren’t voting for women,
but we aren’t backing that up with evidence.
• This is only part of the picture. Don’t leave your users
with more questions than answers!
• In the context of UK Politics there is heavy colour
bias, so you need to consider that in your design.
• Detail - I expect to see the differences between
• If we are showing scale accurately, I would have
matched either the X or Y.
• You can read more about this case study on Visual
Volumes, where it is fully deconstructed;
• What’s the story? What are you really trying to tell people,
or hope that they discover themselves?
• Visualisations can and should be powerful - they should
prompt a debate and discussion.
• They should also form a level playing ﬁeld for that debate,
with no obvious bias.
• Don’t take sides and don’t choose a leading question - let
the user explore the data and draw their own conclusions.
• Make it as easy as possible to reach those conclusions.
• Try to paint a complete picture. This is not always
easy, but at least be honest about the gaps in your
• Don’t leave them wanting more, or more confused
than they were to begin with.
• Always disclose your data source.
• Be careful to not distort or miss-represent the data
(e.g. uneven scales).
• Focus on giving the user the ability to digest and
interpret the numbers, not the medium you use to
visualise the numbers.
• User experience and good design is essential.
• Be wary of information overload.
• Remember your goal and the original story and try
to tie your user back to that - stay focussed.