Life and Death Data Visualization Project

So for my project this week I wanted to do some data visualization that could be regarded, “live”. I got some interesting rates of from http://www.ecology.com/birth-death-rates/ where I found that the rate of birth worldwide is about 4 every second and the rate of death as 1.78 every second.

The idea was to basically show the user how many people have born and died since they opened the application and perhaps make them understand the importance of life by its fragility and beauty.

I used this data to implement a simple data visualization which you can see in the video below:

I randomly switched from the ‘lifeMode’ to the ‘deathMode’ with a 0.02 probability every 1/60th of a second and played a heart beat sound when it changes to give this visualization a more rushed feel.

I used the simple black and white color scheme to make it simple for the user to understand what is death and being born as it can be commonly derived that white represents life and black represents death.

The user can switch to and fro from death and life by clicking anywhere. And as some type of easter egg I implemented a system where it recognizes how long you stay in either the life or death by clicking and displays it in a pie chart if you press any key on your keyboard (as you can see towards the end of the youtube video). This basically is a type of personality test which shows the user whether they focus of life or death more.

 

float seconds,deaths,births;
float currentRadius=0;
int d = 0;
boolean lifeMode=true; //default lifeMode value is true which is the number of people born will be displayed first
boolean probability(float prob) { float value=random(0,1); if(prob>value) { return true; } else { return false; } } //probability function
boolean startControl=false;
boolean counting=false;
float lifePoints=1;float deathPoints=1;
boolean debug=false;
int[] angles={180,180};
void setup() {
  fullScreen();
//size(640,420);
  smooth();
  frameRate(60);
}

void draw() {
  //println((lifePoints/(lifePoints+deathPoints))*100 + " life percentage and" + (deathPoints/(lifePoints+deathPoints))*100);
  float lifePercent=((lifePoints)/(lifePoints+deathPoints))*360;
  float deathPercent=(deathPoints)/(lifePoints+deathPoints)*360;
  angles[0]=int(lifePercent);
  angles[1]=int(deathPercent);
  if(!debug){
  println(lifePercent + " --- " + deathPercent);
  if(lifeMode) { background(0);fill(255); if(counting) {lifePoints+=1;} } else { background(255);fill(0);if(counting) {deathPoints+=1;} } //switch bg color depending on mode
if(probability(0.01)) { changeLifeMode(true); } //switch mode randomly with a probability of 0.01
seconds = frameCount/60; 
deaths=(seconds*1.78); //1.78 deaths per second
births=(seconds)/0.25; //4 deaths per second
float rate=births-deaths;
if(rate>=currentRadius) {
currentRadius+=0.5; //to smoothe the radius increase rather than mapping the rate directly to radius
}
int scaler;
if(lifeMode) {scaler=4;} else {scaler=2;} 
noStroke();
ellipse(width/2,height/2,currentRadius*scaler,currentRadius*scaler);
if(lifeMode) { fill(0);textSize(16 + 16*currentRadius*0.02); } else { fill(255);textSize(16 + 16*currentRadius*0.01); }

textAlign(LEFT,CENTER);
String msg;
float textPlace;
if(lifeMode) { msg=int(births)+" born.";textPlace=(currentRadius*0.02*2+msg.length()*2); } else { msg=int(deaths)+" dead.";textPlace=(currentRadius*0.01*2+msg.length()*1.5); }
if(lifeMode) { text(msg , width/2-2.5*(textPlace), height/2);  } else { text(msg, width/2-2.5*(textPlace)-20, height/2); } //displaying text depending on mode
fill(255);
} else {
  background(200);
  float lifePercent2=((lifePoints)/(lifePoints+deathPoints))*100;
  float deathPercent2=(deathPoints)/(lifePoints+deathPoints)*100;
  pieChart(300, angles);
  fill(0);
  textSize(18);
  text("Life focus percent: " + lifePercent2 + "%" ,0.1*width,height*0.9);
  text("Death focus percent: " + deathPercent2 + "%" ,0.6*width,height*0.9);
}
}
void changeLifeMode(boolean auto) {
lifeMode=!lifeMode;
if(auto) {
counting=false;
}
}
void mousePressed() {
  counting=true;
startControl=true;
changeLifeMode(false);
}

void keyPressed() {
debug=!debug;
}

void pieChart(float diameter, int[] data) {
  float lastAngle = 0;
  for (int i = 0; i < data.length; i++) { 
    if(i==0) { fill(255); } else if(i==1) { fill(0); }
    
    arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(data[i]));
    lastAngle += radians(data[i]);
  }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *