Beyond the Bar Chart

Creative data visualisation

By Peter Cook / @animateddata

Bar charts

Pie charts

Line graphs

Scatter plots

Any others?

Where have we come from?

William Playfair (1805)

Where are we now?

http://www.xcellextech.com/Blog/2010/06/designing-interactive-excel-2007-charts/

Where are we heading?

http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html

New era of data visualisation

Innovative

Insightful

Interactive

Beautiful

Dynamic

Ubiquitous

Open

Science...

Source: Information Dashboard Design, by Stephen Few

...or art?

www.georgeandjonathan.com

Data visualisation...

charts.animateddata.co.uk/tennis

...rather than infographic

Source: GOOD magazine

Examples

Corporate taxes

www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html

US Gun Deaths

guns.periscopic.com

UK Temperature History

charts.animateddata.co.uk/uktemperaturelines

Music

www.georgeandjonathan.com

Theory

Data structures

Lists (e.g. people, events)

Trees (e.g. hierarchies, directory strucures)

Networks (i.e. relationships)

Visual marks

shape

size

position

colour

Data visualisation be thought of as:

"the transformation of data into visual marks"

Example

Data mapped to rectangles

Another example

Data mapped to circles

We're not thinking in terms of bar charts, pie charts etc.

Instead we're asking:

How we can transform our data into shape, size, position & colour?

So, how does this help us?

We can get more creative with data...

How many different visualisations from one set of data?

The data

Spreadsheet from tennis-data.co.uk

Single table, each row represents a single match

Each match consists of: round, winner, loser, ATP points, games won in each set etc.

Wimbledon official website

Google images 'Wimbledon 2013 results'

From 1877

Overviews

Heroes

Interesting matches

Creative process

Ask questions of your data

Sketch ideas on paper

Start with something (anything!) and keep improving

Tools for browser-based custom visualisations

SVG and/or Canvas

JavaScript, D3.js

General drawing libraries: Raphael, Snap.svg

Also look at: ractive.js, variance, vega (trifacta)

Less customisable, but easier

raw.densitydesign.org

trifacta.github.io/vega/editor

Tableau

Charting libraries

Highcharts

FusionCharts

Google Charts

nvd3

Resources

datastori.es

thewhyaxis.info

www.visualisingdata.com

Recommended authors: Alberto Cairo, Edward Tufte, Stephen Few, Nathan Yau

Thank You

Peter Cook / @animateddata / animateddata.co.uk



Data Visualisation Brighton meetup

27th May 7.30pm (Brighton)

www.meetup.com/Data-Visualisation-Brighton-Meetup/