Data Visualization

Part of the expertise that I have 2 hours per week, Monday to Tuesday, is creative technology. In the expertise, it focuses on engineering and art.  This is the third project that we did in the expertise, which is data visualization. What data visualization is how we use data to display it in a creative canvas. We use p5.js which is part of the Javascript package, to code. My data is Cambodian provinces’ demographic, this also included the poverty rate. I got the data from Open Development which is a website that contains a lot of data from countries in South-East Asia. I represent each province with a dot, the bigger dot the higher number of the poverty rate. I made a logic that if a province that had a high poverty rate then it would take a long time to develop. So as our mouse moves to the right, it represents a high level of development. So as stated earlier, if a province has a high poverty rate, it means that the time it takes for the dot to reach the mouse is longer compare to the time it takes for a province that has a lower poverty rate. As an example, Phnom Penh has a really low poverty rate, so the dot is very very small and the speed to develop is fast!

Data visualization of the poverty rate in Cambodia 

Here is a link to the simulation:  https://www.openprocessing.org/sketch/520492# 

Below is an example of the code: 

let prov = [];
class Data{ 
  constructor(pov_rate, speed){ 
    this.pov_rate = pov_rate; 
    if(speed > 5) this.speed = speed; 
    else  this.speed = 2; 
    this.lastPosY = 0; 
    this.lastPosX = 0; 
  }
  
  setTo(posX, posY){ 
    noStroke(); 
    this.lastPosY = posY; 
    this.lastPosX = posX; 
    ellipse(posX, posY, abs(this.pov_rate)* 1.5); 
  }

  runTo(goal, i){ 
    var sp = 25 - (this.pov_rate - this.speed); 
    var run = this.lastPosX + sp/5; hit = collidePointCircle(mouseX,mouseY, run, this.lastPosY, abs(this.pov_rate) * 1); 
    if(hit){  
      fill('#8E44AD'); 
      textSize(30); 
      textAlign(CENTER); 
      text(obj.data[i].PRO_Name, width/2, 50); 
      textSize(20); 
      text("Poverty Rate: " + obj.data[i].pov_rate + "%", width/2, 80);
      fill('#FFC300'); 
    }else{ 
      fill('#5386CC'); 
    } 
    if(run < goal - 20) this.setTo(run, this.lastPosY); 
    else ellipse(run, this.lastPosY, abs(this.pov_rate)*1.5); 
  }
}

Leave a Reply

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