var rows;
var student = [];
var major = [];
var width, height;
var X1,Y,X2;
var x,y,w,h;
var range;

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

function setup() {
    
    width = 800, height = 500;
    X1=20, Y=height-10, X2=width;
    rows = table.findRows('2015', 'Year');
    for (var r = 0; r < rows.length; r++) {
        if(rows[r].getString('Asians') > 200000){
            append(major, rows[r].getString('Major'));
            append(student,rows[r].getString('Asians'));
        }
    }
    
    range = ceil(((max(student)-min(student))/(100000*student.length)));
    createCanvas(width, height);
    
}

function drawAxis(){
    line(X1,Y, X2, Y); //xAxis
    line(X1,0,X1,Y); //yAxis
    text(0,X1-20,height);
    text('Student(100k)',25,10);
    for(var j=1;j<=5;j++){
        stroke(220,220,220);
        line(X1,(j/student.length)*(height/1.2),width,(j/student.length)*(height/1.2));
        text((range)*(student.length-j+1),X1-20,(j/student.length)*(height/1.2));
    }
    for(var k=0;k<major.length;k++){
        text(major[k],((k/student.length)*width)+65,height);
    }
    
}

function draw() {
    background(255);
  drawAxis();
    for(var i=0;i<student.length;i++){
        x = (i/student.length)*width;
        y = 0;
        w = (Y/student.length)-50;
        h = student[i]/1000;
        push();
        var scale = (max(student)/1000-h)+(Y-max(student)/1000);
        translate(x,y);    
        fill(0,0,255);
        noStroke();
        rect(w,scale,w,h);
        if(mouseX > w+x && mouseY > height-h+y && 
           mouseX < ((w*2))-10+x && mouseY < height-10){
            fill(255);
            textStyle(BOLD);
            text(parseInt(student[i]).toLocaleString('en'),w+(1/5*w),height-h+10);
        }  
        pop();
    }
    
     
}