Data Visualisation: Facebook Users as a Proportion of Internet Users, Europe (2010)

24Jun11

Play with the sketch on openprocessing.

This project attempts to visualise the influence Facebook has on Europe’s population of internet users. The data is shown per country – the larger blue circle represents the percentage of the population with internet access, the inner white circle represents the Facebook penetration rate. If the two circles are almost the same size, this indicates that a large proportion of a country’s “online” population also use the social networking site – for example, Iceland, with a fraction under 95% of its population being connected to the internet, has Europe’s highest Facebook penetration rate of almost 61%. In the Netherlands, Poland, and others, Facebook loses out to popular national social networks (such as Hyves in the Netherlands).

There are no figures currently available for the number of Facebook users in The Vatican City (along with some of Europe’s other smallest nations), so questions about the existence of the personal Facebook accounts of Pope Benedict and his aides will have to remain unanswered for now.

The processing sketch makes use of Karsten Schmidt’s ToxicLibs.

Read on for the source code:

//    HENDERSONSIX [2011]
//    FACEBOOK USERS AS A PROPRORTION OF POPULATION WITH INTERNET ACCESS, PER COUNTRY, EUROPE (2010)
//    THIS PROCESSING SKETCH IS RELEASED UNDER A CC-BY-SA LICENSE.
//    FOR MORE INFO, REFER TO http://creativecommons.org/licenses/by-sa/2.0/
//    DATA SOURCED FROM 
//    http://www.culturalpolicies.net/web/statistics-participation.php?aid=189&cid=74&lid=en
//
//    Please report ommissions and errors on http://hendersonmedia.wordpress.com/2011/06/24/data-visualisation-facebook-users-as-a-proportion-of-internet-users-europe-2010/

import toxi.geom.*;
import toxi.color.*;
import toxi.physics2d.*;
import toxi.physics2d.behaviors.*;

VerletPhysics2D physics;

Cluster cluster;
PFont infoFont;


void setup() {
  size(900, 600);
  physics = new VerletPhysics2D();
  physics.setWorldBounds(new Rect(0, 0, width, height));

  Vec2D center = new Vec2D(width/2, height/2);
  cluster = new Cluster(random(30, 40), center);
  smooth();

  infoFont = loadFont("Monospaced.plain-12.vlw");
  textFont(infoFont, 12);
}

void draw() {
  physics.update();
  background(255);

  cluster.display();
  cluster.renderText();
  cluster.panel();

  ui();
}

void ui() {
  fill(0);
  textAlign(LEFT);
  text("Facebook Users as a Proportion of the Population with Internet Access, Europe, 2010", 10, 20);
  fill(59, 89, 152);
  ellipse(15, 40, 10, 10);
  fill(0);
  text("Internet Users as a % of Population", 30, 45);
  fill(255);
  strokeWeight(1);
  stroke(59, 89, 152);
  ellipse(15, 55, 10, 10);
  fill(0);
  text("Facebook Users as a % of Population", 30, 60);
  text("r   Refresh", 12, 75);
  text("c   Display Country Names", 12, 90);
  text("Source: http://culturalpolicies.net", 10, height-15);
}

void keyPressed() {
  if (key=='r') {
    setup();
  }
  if (key==' '){
    save(frameCount+".jpg");
    println("saved "+frameCount);
  }
}


void setup() {
  size(900, 600);
  physics = new VerletPhysics2D();
  physics.setWorldBounds(new Rect(0, 0, width, height));

  Vec2D center = new Vec2D(width/2, height/2);
  cluster = new Cluster(random(30, 40), center);
  smooth();

  infoFont = loadFont("Monospaced.plain-12.vlw");
  textFont(infoFont, 12);
}

void draw() {
  physics.update();
  background(255);

  cluster.display();
  cluster.renderText();
  cluster.panel();

  ui();
}

void ui() {
  fill(0);
  textAlign(LEFT);
  text("Facebook Users as a Proportion of the Population with Internet Access, Europe, 2010", 10, 20);
  fill(59, 89, 152);
  ellipse(15, 40, 10, 10);
  fill(0);
  text("Internet Users as a % of Population", 30, 45);
  fill(255);
  strokeWeight(1);
  stroke(59, 89, 152);
  ellipse(15, 55, 10, 10);
  fill(0);
  text("Facebook Users as a % of Population", 30, 60);
  text("r   Refresh", 12, 75);
  text("c   Display Country Names", 12, 90);
  text("Source: http://culturalpolicies.net", 10, height-15);
}

void keyPressed() {
  if (key=='r') {
    setup();
  }
  if (key==' '){
    save(frameCount+".jpg");
    println("saved "+frameCount);
  }
}

class Node extends VerletParticle2D {
  float sz, fsz;
  color fbc;

  Node(Vec2D pos, float _sz, float _fsz) {
    super(pos);
    sz = _sz;
    fsz = _fsz;
    fbc = color(59, 89, 152);
  }

  void display() {
    noStroke();
    ellipseMode(CENTER);
    fill(color(fbc));
    ellipse(x, y, sz, sz);
    fill(255);
    ellipse(x, y, fsz, fsz);
  }

  void selected() {
    strokeWeight(2);
    stroke(255, 0, 0);
    ellipseMode(CENTER);
    fill(color(fbc));
    ellipse(x, y, sz, sz);
    fill(255);
    ellipse(x, y, fsz, fsz);
  }

  boolean showStats() {
    PVector m = new PVector(mouseX, mouseY);
    PVector loc = new PVector(x, y);
    float d = m.dist(loc);

    if (d < (sz/2)) {
      return true;
    }
    else {
      return false;
    }
  }
}

class Cluster {
  ArrayList nodes;
  float di;
  int entryCount = 0;
  String[] dataset;
  String[] country = new String[50];
  float[] netUsers = new float[50];
  float[] fbUsers = new float[50];
  int cindex, index, findex = 0;

  Cluster(float d, Vec2D center) {
    nodes = new ArrayList();
    di = d;
    dataset = loadStrings("fullstats.txt");

    for (int i=0; i<dataset.length; i+=7) {
      String[] cparts = split(dataset[i], '\n');
      country[cindex] = cparts[0];
      cindex++;
    }

    for (int i=4; i<dataset.length; i+=7) {
      String[] parts = split(dataset[i], '\n');

      netUsers[index] = float(parts[0]);
      index++;
    }

    for (int i=5; i<dataset.length; i+=7) {
      String[] fparts = split(dataset[i], '\n');
      fbUsers[findex] = float(fparts[0]);
      findex++;
    }

    for (int i=0; i<dataset.length/7; i++) {
      nodes.add(new Node(center.add(Vec2D.randomVector()), netUsers[i], fbUsers[i]));
    }

    for (int i=0; i<nodes.size(); i++) {
      VerletParticle2D p1 = (VerletParticle2D) nodes.get(i);
      for (int j=i+1; j<nodes.size(); j++) {
        VerletParticle2D p2 = (VerletParticle2D) nodes.get(j);
        physics.addSpring(new VerletMinDistanceSpring2D(p1, p2, (netUsers[i]+netUsers[j])/1.9, netUsers[i]/5000));
      }
    }
  }

  void display() {
    for (int i=0; i<nodes.size(); i++) {
      Node n = (Node) nodes.get(i);
      n.display();
    }
  }

  void renderText() {
    for (int i=0; i<nodes.size(); i++) {
      Node n = (Node) nodes.get(i);
      if (n.showStats()) {
        n.selected();
        noStroke();
        textAlign(LEFT);
        String info = country[i]+'\n'+"Net Access: "+netUsers[i]+"%"+'\n'+"Facebook Users: "+fbUsers[i]+"%";
        fill(0, 155);
        float w = textWidth(info);
        rect(n.x-4, n.y-12, w+8, 54);
        fill(255);
        text(info, n.x, n.y);
      }

      if (keyPressed) {
        if (key=='c') {
          String info = country[i];
          fill(0, 155);
          float w = textWidth(info);
          rect(n.x-4, n.y-12, w+8, 16);
          fill(255);
          text(info, n.x, n.y);
        }
      }
    }
  }

  void panel() {

    for (int i=0; i<nodes.size(); i++) {
      fill(0);
      float countryWidth = textWidth(country[i]);
      Node n = (Node) nodes.get(i);
      if (mouseX > width-countryWidth && mouseX < width) {
        if (mouseY > (i*12)-6 && mouseY < (i*12)+6) {
          n.selected();
          noStroke();
          textAlign(LEFT);
          textSize(12);
          String info = country[i]+'\n'+"Net Access: "+netUsers[i]+"%"+'\n'+"Facebook Users: "+fbUsers[i]+"%";
          fill(0, 155);
          float w = textWidth(info);
          rect(n.x-4, n.y-12, w+8, 54);
          fill(255);
          text(info, n.x, n.y);
          fill(59, 89, 152);
        }
      }
      textAlign(RIGHT);
      text(country[i], width-5, i*12-1);
    }
  }
}

About these ads