I attend a Guardian : Data Visualization Course
This is a summary of what I learn and what is best practise for data visualisation.
Follow @adamfrostuk @skelington @gDigitalAgency @guardianclasses or attend the course its excellent.
Data Visualization Process
Start with examining the data – are their outliers? is it accurate?
Data : Is it a credible and comprehensive dataset? Seek out interesting patterns and trends in the data. Use a web producer, data analyst or journalist. To produce integrity
Is this story important? What is the most important part to the audience link it into narrative.
Story : What does your audience care about? Find a story in the data that will resonate with your audience. Use a web producer, data analyst or journalist. To produce meaning.
Which chart will serve the story – is the chart making the story easier to understand. Bar chart are effective communicators.
Chart : Which charts will bring your story to life? Choose the best chart for your story. Use a data analyst or designer. Use Photoshop/Adobe Illustrator. To produce function.
Does your chart look good? If you graphic doesn’t look clear and engaging, then nobody’s going to look at it.
Design : Does your chart look good? Experiment with colour, space and text until the information is beautiful. Use a designer. Use Photoshop/Adobe Illustrator. To produce form.
Different Approaches – Tufte vs. McCandless
LOVE – Evidence (if you notice the chart first and not the data- then you have failed) vs. Information (apply graphic design principles to data journalism)
ROLE – Theorist (Universities orientated) vs. Practitioner (blog and produces informatics for journalism)
DISPLAY – Present all the data to show top-level trends vs. Selective use of data to guide reader to key story
ACCURACY – Never cheat data vs. Tweak visuals if it makes the story clearer
DESIGN – Design should be minimal or invisible vs. Design should be used to emphasis the story
PRIORITY – First loyalty is to data vs. First loyalty is to audience
FOLLOWERS – Loved by academics and statisticians vs. Loved by journalists and graphic designers
Deciding the story :
How do you decide when data will benefit from visual storytelling?
Quantity of data
More than one number, usually multivariate. Not just putting a number in a circle. comparison / change / composition
Character or type of data
When visualising will speed up OR deepen understanding.
Building and structuring your story : What is a story?
Journalist : Who? What? Where? When? Why? How? (Supporting information then wider context)
Teacher : Bloom’s taxonomy: Key cognitive skills
- Knowledge (give people basic facts and concepts)
- Understand (help them to understand by organizing and comparing)
- Apply (use these facts in new contexts and situations)
- Analyse (identify causes/ motives, assemble evidence for these facts)
- Evaluate (make judgements about whether the facts are valid)
- Synthesize/Create (combine different sets of facts to form a new whole, or propose alternative facts).
Object-based learning. “Shared attention” theory of teaching/ storytelling.
Writer : Aristotle: exposition, rising action, climax, falling action or resolution, dénouemont
Christopher Booker’s seven stories
- overcoming the monster (Jack and the Beanstalk, James Bond, Jaws)
- rags to riches (Aladdin, Cinderella, David Copperfield)
- the quest (Odyssey, Don Quixote, Lord of the Rings)
- voyage and return (Alice in Wonderland, Peter Pan)
- comedy (Twelfth Night, Pride and Prejudice)
- tragedy (Faust, King Lear)
- rebirth (Silas Marner, A Christmas Carol)
Emma Coats, Storyboard artist, Pixar: Once upon a time there was _____. Every day, _____. One day _____. Because of that, _____. Because of that, _____. Until finally _____.
Salesperson : AIDA (Attention, Interest, Desire, Action)
- Attention: The audience must be aware of what the product or service is.
- Interest: Interest is generated by telling people more about the offering.
- Desire: Desire is created – giving people an emotional response to the product.
- Action: Audience are told what action to take if they want the product and/or audience takes this action.
Selection. Of all the possible stories there are, it is this story that is most relevant or interesting. Emphasis. I’m now going to structure this story to emphasise this piece of information and then this and then this.
For infographics and charts: Selection. Of all the data there is, I am going to choose these datasets. Emphasis. I am going to emphasise this dataset as it is the most important. Then I’m going to emphasise this, and then this.
Great Examples
Using data to tell a story
- Only visualise your data when it’s necessary. Sometimes the information is stronger as text.
- One story per chart/ infographic. Audience, medium and subject matter will determine the size and shape of your story.
- Only show data that supports this story. The Rule of Seven can be helpful here.
- Always show a key/legend. If you can, make your key part of the story.
- If your story has many chapters, then guide your reader through it. Most important information first – so readers can take what they need. Be as concise as possible.
- If your chapter has many sections, then break it into manageable chunks. Think about how you memorise a phone number.
Design
Decide upon the look and functioning of (a building, garment, or other object), typically by making a detailed drawing of it.
Pattern perception & table lookup- Charts need to be showing the data and the insight
Clarity & persuasion- Good visual storytelling requires both at the same time
Legibility & readability- Text not only contains information but also structures it and aids reading
Consistency & contrast- Consistency aids reading and enables contrast for visual drama
Cause & Effect- The visual dramatisation of ‘therefore & however’
Data & visualisation- The data needs to be telling its own story
Interactive Storytelling
- Subject matter predicates certain limits and constraints
- Medium (e.g. software) establishes certain functional rules
- Audience predicates certain requirements and priorities
1.Your interactive should have a single story or purpose.
2.Your interactive should tell a story before the user has clicked on anything.
3.Only use datasets that support your story or subject.
Remember every filter you add is asking your audience to make another choice.
4.Use drilldowns or the bottom part of the page to put secondary or contextual information.
5.Make it immediately obvious how the user can filter or reshape the interactive to tell their story.
6.If a key is required, make it dynamic or interactive too.
7.Remember users on mobiles and older browsers.
Examples
Interaction Explanation, Exploration or Information
Interface Obvious and intuitive (clear & persuasive)
Structure Showing, Hiding & Telling
Animation Bringing the data and story to life
Key blogs & bloggers
flowingdata.com
http://www.informationisbeautifulawards.com
blog.visual.ly
visualoop.com
visualizing.org
Guardian and New York Times data blogs, Washington Post, The Economist, The FT (behind paywall)
Five Thirty Eight, The NYT’s Upshot, Vox
Design inspiration: http://www.behance.net
Design desperation: wtfviz.net
How to…books
The Functional Art by Alberto Cairo
A Kidd’s Guide to Graphic Design by Chip Kidd
The Information Design Workbook by Kim Baer
Infographics – The Power of Visual Storytelling by Jason Lankow et al (Column Five)
Best practice examples
The Best American Infographics 2013 by Gareth Cook
Visual Storytelling: Inspiring a new visual language (Gestalten)
Understanding the World by Sandra Rengren
Around the World – The Atlas for Today (Gestalten)
Knowledge is Beautiful by David McCandless
London – The Information Capital by James Cheshire and Oliver Uberti
Miscellaneous
Dataclysm by Christian Rudder
Just My Type by Simon Garfield
Resources and tools
Design:
Illustrator / InDesign / Photoshop (adobe.com/uk/products/creativecloud.html)
Inkscape (www.inkscape.org)
Resources:
Colour: color.adobe.com
Icons: thenounproject.com
Fonts: http://www.google.com/fonts
Charts: http://www.datavizcatalogue.com
Javascript: http://www.codecademy.com
For data:
data.gov.uk
data.un.org
data.worldbank.org
data.london.gov.uk
Software & charting libraries
Interactive charts:
- datawrapper.de
- Google charts
- For Maps: Google Fusion tables and CartoDB
Infographics:
- infogr.am
- piktochart.com
Charting tools:
- app.raw.densitydesign.org
- datavisu.al
- visage.co
Websites:
- shorthand.com
- strikingly.com
- quadrigram.com
Dashboards:
- tableausoftware.com
- chartio.com
- powerbi.microsoft.com
Javascript Libraries:
- highcharts.com
- d3js.org
