Visualising Data in the Browser:

A Practitioner's Approach


by Peter Cook / @animateddata

Data Visualisation

The transformation of data into visual form

Why?

Identify patterns, trends etc.

Engaging

Wimbledon results

Spreadsheet with row for each of 127 matches

Visual overview

Trends

Analysis

Examples

William Playfair (1805)

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

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

Data visualisation on the web

Free and open technologies (HTML, SVG, CSS, D3)

Interactivity

Distribution

Powerful

HTML, SVG, CSS

(also Canvas element)

JavaScript

Data loading, drawing, manipulation and interaction

e.g.

	
csv.forEach(function(row) {
  var pt = projection([+row.longitude, +row.latitude]);

  ctx.fillStyle = colorScale(+row.depth);

  drawCircle(ctx, pt[0], pt[1], radiusScale(+row.mag));
});
	

D3

A JavaScript library for manipulating HTML & SVG

A set of JavaScript components for building data visualisations

Examples

D3

Visualising lists

Bar chart

Line graph

Stream graph

Bubble chart

Visualising trees

Tree layout

Radial tree

Circle packing

Sunburst partition

Treemap

Visualising networks

Force-directed graph

Co-occurrence matrix

Hive plot

Bundle

Chord diagram

Visualising geographic data

Choropleth

Bubbles

Cartogram

Circles

D3 helpers

Scale functions

SVG helpers (e.g. axes)

Layouts

Geo (e.g. projections)

Building data visualisations

My process

1. Data & questions

2. Transformation into visual form

(e.g. position, shape, colour)

3. Prototyping

4. Iteration

F1 Timeline

Question: what is the pattern of F1 driver ages over time?

Data: Ergast Developer API

View

Transform into visual form

Iterate...

over...

and over...

again...

Interesting facts

>800 drivers

>22000 rect elements for each race result

Dimensions: 6130px x 16800px

263kb total download (that's small!)

Thanks for listening!

animateddata.co.uk

@animateddata

@datavisbrighton (MeetUp Group) 25th Nov

D3 workshop 26th Nov (check my website)