var table;

function preload(){
  table = loadTable('billionaires.csv', 'csv','header');
}

function setup() {
  createCanvas(800, 600);

  textSize(15);
  textAlign(CENTER);
  fill(0);
}

function draw() {
  var person = ["Bill Gates", "Carlos Slim Helu", "Amancio Ortega", "Warren Buffett","Larry Ellison"];
  var networth = [76, 72, 64, 58.2, 48];
  var count=person.length;

  background(204);
  stroke(153);
  line(60,60,60,540);
  line(60,540,740,540);
  for(var i=0; i<5; i++){
    fill(0,0,0);
    var num = max(networth)+4-i*20;
    text(num, 50, max(networth)+4+115*i);
  }
  var total = 700;
  fill(0,0,0);
  text("Billionaire Name", 750, 550);
  fill(0,0,0);
  text("Net Worth/B", 50, 50);
  fill(0,0,0);
  text("Top 5 Richest Billionaires in the World in 2014", 400, 80);
  // console.log(person[0]);
  // console.log(ratio);
  for(var i=0; i<count; i++){
    textSize(10);
    fill(0,0,0);
    text(person[i], 140+600*i/count, 550);

    if(mouseX > 130+600*i/count && 
      mouseY >  540-6*networth[i]&&
      mouseX < 150+600*i/count && 
      mouseY < 550)
    {
      fill(0,0,0);
      text(networth[i], mouseX+14, mouseY-5); 
    }

    for(var j=0; j<networth[i];j++){
      fill(75,255,75);
      text("$",140+600*i/count, 540-6*j);
    }
  }

  




}