Anatomy of a data visualisation.

Premasagar Rose, Dharmafly
@premasagar

The story of the Southwark Circle data viz by Dharmafly.

data viz =

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

so many different types

what makes a good data visualisation?

purpose

1. meaningful

data

1. selection
2. analysis
3. source

appearance

1. beautiful
2. simple
3. efficient

experience

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

what we did

the brief

support, sharing, teaching
and learning for older people

purpose

improve the "Third Age" of life

supporting the little things in life

• finding a plumber
• help with facebook
• learning to sms
• teaching spanish
• socials

raw ingredients

the helpers logged "learnthings"

• skills
• capabilities
• relationships
• lifestyle

"learnthings"

personal social impact events,
by category, person and locations

the brief

what would you create?

• heatmap?
• force-directed graph?
• charts?
• ?

idea development

research ~ edward tufte

symbols ~ kisho nenkan

high-density ~ kisho nenkan

evolving previous work

atomic ~ people, networks & collisions

interconnected ~ game concept for the Science Museum

inspirations

eliss ~ steph thirion

noby noby boy ~ keita takahashi

pencil on paper

community of people

key of symbols

mockups

too gamey?

poker chips?

skillful

ta dah!

dharmafly.com/circleviz/

how we made it

html6, css4

interface

raphaël

draws vectors in SVG with JavaScript

create an SVG container:

var paper = Raphael(
    htmlContainer, // DOM node or id
    300, // width
    300 // height
);

var circle = paper.circle(150, 150, 100); // x, y, radius

circle.attr({
  'fill': 'orange',
  'stroke': 'blue',
  'stroke-width': 10
});

paper.path('M50,150 L150,250 L250,50') // Move to, line to...
  .attr({
    stroke: 'green',
    'stroke-width': 10
  });

paper.path('M50,150 L150,250 L250,50 z') // 'z' = close the path
  .attr('fill', 'blue');

events and animation

circle.click(function(){
  circle.animate(
    {cx:10, cy:290, r:5}, // attr to animate (x, y, radius)
    600,                  // animation time
    'bounce'              // easing algorithm
  );
});

know thy bottlenecks

oh, the time slider!

• time segments
• pre-compute into lookups

coordinate systems!

need... more... power

• throttle
• delegate
• SVG groups & classes
• translateZ
• jsperf
• boil it down

summary

• many different forms
• purpose, data, appearance, experience
• build the right thing
• start on paper
• iterate
• use the right tools
• optimise the bottlenecks

☄ Data Viz Lab

July 27, Aug 10, Aug 24

@L4RP / L4RP.com

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

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

any questions?

@premasagar

these slides: anatomydataviz.dharmafly.com