Anatomy of a data visualisation.

Premasagar Rose, Dharmafly

these slides:
← arrow keys →

The story of the Southwark Circle data viz by Dharmafly.

data viz =

concept + psychology + art + maths + interaction design + engineering

so many different types

Wolfram's outgoing email, over 23 years

Flights over Europe

Ruby on Rails commit history

Scale of the universe


Greek debt

Euro crisis

Force-directed graph

Growth of Airbnb over time

Hacker News article popularity

d3.js examples

what makes a good data visualisation?


  1. meaningful


  1. selection
  2. analysis
  3. source


  1. beautiful
  2. simple
  3. efficient


  1. easy
  2. tactile
  3. moreish
  4. illuminating

what we did

show Southwark Circle's social impact

the brief

Southwark Circle

support, sharing, teaching
and learning for older people


improve the "Third Age" of life

supporting the little things in life

raw ingredients

the helpers logged "learnthings"


personal social impact events,
by category, person and locations

show Southwark Circle's social impact

the brief

what would you create?

idea development

Tufte Envisioning Information

research ~ edward tufte

symbols ~ kisho nenkan

high-density ~ kisho nenkan

High-information graphics... convey a spirit of quantitive depth and a sense of statistical integrity

evolving previous work

atomic ~ people, networks & collisions

interconnected ~ game concept for the Science Museum


eliss ~ steph thirion

noby noby boy ~ keita takahashi

busyness = good

pencil on paper

community of people

key of symbols


too gamey?

poker chips?


ta dah!

how we made it

Salesforce API → Sinatra → JSON

html6, css4



draws vectors in SVG with JavaScript

create an SVG container:

var paper = Raphael(
    htmlContainer, // DOM node or id
    300, // width
    300 // height
var circle =, 150, 100); // x, y, radius

  'fill': 'orange',
  'stroke': 'blue',
  'stroke-width': 10
paper.path('M50,150 L150,250 L250,50') // Move to, line to...
    stroke: 'green',
    'stroke-width': 10
paper.path('M50,150 L150,250 L250,50 z') // 'z' = close the path
  .attr('fill', 'blue');

events and animation{
    {cx:10, cy:290, r:5}, // attr to animate (x, y, radius)
    600,                  // animation time
    'bounce'              // easing algorithm

and much more...

know thy bottlenecks

oh, the time slider!

coordinate systems!

need... more... power


☄ Data Viz Lab

July 27, Aug 10, Aug 24

@L4RP /

3 free events in summer 2012 for designers, journalists & programmers.

At Dharmafly's Lab for the Recently Possible, Brighton & Hove, UK.

any questions?


these slides:

resources / credits