Data Visualisation in the Browser

with D3.js


by Peter Cook / @animateddata

Data Visualisation

The transformation of data into visual form

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

Why Data visualisation?

charts.animateddata.co.uk/tennis

TECHNOLOGY

Browser technology

HTML5

Canvas

Scalable Vector Graphics (SVG)

Canvas

Vector based

Markup (HTML) unchanged when drawing

JavaScript to draw

Scalable Vector Graphics (SVG)

Vector graphics markup

Graphical elements (e.g. <circle>) added to the document

Can author SVG directly or use JavaScript

JavaScript

Pre-built charts e.g. Highcharts

D3 - components for building visualisations

D3

What is D3?

A JavaScript library for manipulating HTML & SVG

A set of JavaScript helpers for building data visualisations

Examples

HTML/SVG manipulation

Data binding

Append/remove/update HTML/SVG elements

Transitions

Events

Example

Data visualisation helpers

Scale functions

Reusable components e.g. axes

Layouts e.g. trees

Mapping - projection, geoJSON to SVG paths (example)

More examples

Wimbledon 2013

UK Temperature

NYT Drought Crops

NYT State Swings

Thanks for listening!

animateddata.co.uk

@animateddata

@datavisbrighton (MeetUp Group)