The 7 New Social Classes Infographic:

Small infographic I did for a page in Campaign magazine for the company Mindshare.

Based off the BBC’s The Great British Class Survey

Infographic I did in collaboration with the design studio Infogr8 for the Walking Dead TV show.

ERASMUS students coming into a UK university Information Graphic

ERASMUS students going out of a UK university Information Graphic

University Institutional Links with Australia Diagram Map 4

Another map I did showing Chinese Institutional links with the university.

International University Links & Relationship Network Map:

Shows the different kinds of links each UK university college has with a Chinese university abroad.  From this diagram you can also see which colleges have the most links with universities abroad and the strength of those links.

Note: real names of the UK colleges are have been censored out.

International Uni Links in China Map/Diagram in Full

International Uni Links in China Map/Diagram:

A shot from a small project I did last week for a London University and their international department.

Norse Mythology Family Tree Shot

Original post

Norse Mythology Family Tree (Circular)

Full Size

European Debt Crisis: GDP & Government Debt Visualization (2002 - 2011)

Although this isn’t the best way of displaying this type of data over time, I wanted to see if I could build the original infographic to be time based.

It’s interesting to see how GDP and debt have increased over a decade, however I wish I had the data to do this visualisation over a longer period of time.

Spain GDP & Government Debt Visualization (2002 - 2011)

I’ve just been playing around with Processing and figuring out how I can make my European Debt Crisis Information Graphic time-based.  I need to start somewhere and here’s the code I’ve written so far:

float[] data;
float[] debt;
int time;
int step;
int yeaar;
float x, y;

void setup() {
  size(300, 300); 
  String[] spain = loadStrings("data.txt");
  String[] debt_data = loadStrings("debt.txt");
  data = float(split(spain[0], ","));
  debt = float(split(debt_data[0], ","));
  time = millis();
  step = 0;
  yeaar = 2002;
  PFont f = createFont("Arial", 16, true);
  textFont(f);
}

void draw() {
  background(255);
 
  // Timer
  int passedtime = millis() - time;
 
  // Counter
  if(passedtime >= 1000) {
    if(step < 9) {
      step = step + 1;
      yeaar = yeaar + 1;
    } else {
      step = 0;
      yeaar = 2002;
    }
    // Reset time
    time = millis();
  }
 
  // Debt position
  x = ((width - data[step]) / 2);
  y = ((height - data[step]) / 2);
 
  //GDP Block
  noStroke();
  fill(43, 56, 189);
  rectMode(CENTER);
  rect(150, 150, data[step], data[step]);
 
  // Debt % Block
  fill(255, 0, 10, 200);
  rectMode(CORNER);
  rect(x, y, (data[step] * debt[step]), data[step]);
 
  // Text
  fill(0);
  text(yeaar, 130, 240);
  text("Spain Government Debt & GDP", 40, 50);
}

Interactive version of the European Debt Crisis infographic:

http://www.rinodesign.co.uk/processing_projects/1/gdp_debt_poster.html (may take a few seconds to load)

This is probably the first big project I have produced using the Processing programming language.  I originally wanted to do this for the Information is Beautiful Awards challenge, but I didn’t have the time or confidence to get it done in code.  However now this is done, I can maybe start at exploring other ways to make the data interactive.  My next plan is to try it out as being an animated time-based graphic.