Data Visualisation on the Web

by Peter Cook / @animateddata

@datavisbrighton

#datavisbtn

Why the web?

Ubiquity (phones, tablets, PCs etc.)

Interactivity

Powerful

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

Anatomy of a Web-based Datavis

HTML + SVG

CSS

JavaScript

and/or

canvas element

HTML

Hypertext Markup Language

Building blocks of a web-page

e.g.

	

HTML

Hypertext Markup Language

Building blocks of a web-page

e.g.

SVG

Scalable vector graphics

Browser keeps track of elements

Good for interaction

e.g.

	

  
  
  
  

	

CSS

Cascading Style Sheets

e.g.

	
line {
  stroke: #ccc;
}
circle {
  fill: steelblue;
}
circle.selected {
  fill: #666;
}
	

Canvas

Better for large number of elements

e.g. if >20k elements, consider using canvas

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));
});
	

Examples

SVG + JavaScript

Examples

Canvas + JavaScript

More advanced examples

New York Times (SVG + JavaScript)

Wind map (SVG + Canvas + JavaScript)

Creating content

Interactive tools

Two free tools worth looking at are:

RAW

Datawrapper

Don't forget Google Sheets!

Creating content

Coding

Charting Libraries

Off the shelf charts e.g. bar, line, scatter

Simple, but limited

Flot, Google Charts, Highcharts, NVD3 etc. etc.

e.g. NVD3

Custom coded

JavaScript

Raphaël/Snap.svg

D3

(example)

Raphaël/Snap.svg

Intuitive

Not really designed for datavis

Raphaël supports older browsers

Snap.svg more modern

Raphaël example

D3

A JavaScript library for manipulating & binding data to HTML & SVG

A set of JavaScript components for building data visualisations

Examples

Manipulation

Adding/removing elements

Updating elements e.g. position, radius etc.

Adding events (for interaction)

Data binding

Bind data to elements

Components

Scale functions

SVG helpers (e.g. axes)

Layouts

Geo (e.g. projections)

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

Real-world examples

Vote swings

World cup goals

F1 drivers

Thanks for coming!

animateddata.co.uk

@animateddata

D3 workshop 26th Nov (check my website)