Creative Data Visualisation

with HTML5


by Peter Cook / @animateddata

Creative Data Visualisation

The transformation of data into visual form

Probably not using pre-built charts (e.g. bar charts, line graphs)

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

HTML5

the latest standard for HTML

<canvas> element for drawing

Scalable Vector Graphics (SVG) - markup for graphics

What will we be making?

Visualisations based on...

30 days of earthquake data

Source: http://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php

Earthquake depth

Earthquake depth & magnitude

Earthquake map

Earthquake spiral

Earthquake chart

How will we do this?

Load CSV data into the browser

Draw shapes based on the data using:

canvas element or SVG

Caveats

I'm presenting a few different approaches

Not necessarily recommended for production, but good for learning the basics

Creative data visualisation - process

Start with questions

Think how your data can be transformed into graphical elements (e.g. shape, size, position, angle, colour) to answer your questions

This process can be done on paper!

The technology

Canvas element

Draw shapes in the browser using JavaScript

No access to the shapes once drawn

A bit like painting on a canvas... hence the name

SVG

Markup for graphics (e.g. rectangles, circles, lines, curves)

Styled using CSS

Elements can be added/removed/manipulated using JavaScript

Better for accessibility

Snap.svg

A JavaScript library for adding, removing and manipulating SVG elements

(Successor of Raphaƫl.js)

D3.js

A JavaScript library for adding, removing and manipulating DOM elements

Data-driven

Also contains many functions useful for data visualisation

e.g. loading data & scale functions

More info

Canvas: cheat sheet & Canvas Tutorial by MDN

SVG: W3C Recommendation & SVG docs by MDN

Snap.SVG docs

D3 docs & Interactive Data Visualization (Scott Murray)

Getting started

Download project

Set up project

Download project

github.com/prcweb/creative-datavis-html5

Download the zip and expand to where you usually put projects

Set up project

Mac

In Terminal, navigate to project directory and start server

cd ~/Development/projects/creative-datavis-html5/
python -m SimpleHTTPServer 8050

In browser go to localhost:8050

Set up project

Windows

If you're comfortable setting up a local server, go ahead

If you have python already installed, similar to Mac set-up

Otherwise, open /localhack examples in your browser

Code editor

Ideally use Sublime Text

In Sublime, add project folder to project (Project menu)

Canvas visualisations

1 - Getting started

Use D3 to load earthquake CSV data

Loop through resulting array and draw a rectangle for each earthquake

2 - D3 scales

Use D3 scale functions

3 - Lines and Circles

depth on y-axis

magnitude as circle area

sequence on x-axis

4 - Geo

Use D3 to project lat/lon

5 - Animated Geo

Use setTimeout to sequence circle drawing

6 - Spiral

Arrange circles in spiral

SVG visualisations

1 - Lines and Circles

Use Snap.SVG to draw lines and circles

Still using D3 scales

2 - Interaction

Add hover event handler to circles

3 - D3

Use D3 to bind data to circles and lines

4 - D3 transitions

Use D3 to animate lines and circles

5 - Bars and Lines

Use bars to represent magnitude

Use lines to represent depth

Using Snap.SVG

6 - Bars and Lines

Using D3

Interaction

Technology sum up

Canvas for dense, non-interactive visualisations

SVG for interactive

Recommend D3 for scales, CSV and non-trivial SVG

Thank you!

If you enjoyed this workshop, please tell others

@animateddata