var canvas;
var chart;
var student=[];
var years;
var range;
function preload(){
    table = loadTable('graduates.csv', 'csv', 'header');
}
function setup() {
    canvas = {
        width: 1000,
        height: 800,
        margin: 20,
        text: 'Asian Students'
    };
    chart ={
        width: 600,
        height: 400,
        margin:50,
        label:20,
        textX: 'Student(K)',
        textY: 'Year'
    }
    createCanvas(canvas.width,canvas.height);
    years=[1993,1995,1997,1999,2001,2003,2006,2008,2010,2013,2015];
   
    for (var i = 0; i <years.length; i++) {
        var rows = table.findRows(years[i].toString(), 'Year'); 
         for (var r = 0; r < rows.length; r++) {
             if(rows[r].getString('Major') == 'Computer Science and Math'){
                append(student,rows[r].getString('Asians'));
             }
         }
    }
    range = ceil((max(student)-min(student))/10000);
    
}
function drawAxis(){
    text(canvas.text,((chart.width+chart.margin)/2)-(canvas.text.length*2),canvas.margin);
    text(chart.textX,chart.margin-chart.label,chart.margin-5);
    line(chart.margin,chart.height, chart.width, chart.height); //X
    text(chart.textY,(chart.width+chart.margin)/2,chart.height+chart.margin);
    line(chart.margin,chart.margin,chart.margin, chart.height); //Y

    for(var j=1;j < chart.height-chart.margin; j+=range){
        push();
        stroke(220,220,220);
        line(chart.margin,chart.height-j, chart.width, chart.height-j);
        text(Math.round((j*2)/10)*10 + "K",chart.label,chart.height-j);
        pop();
    }
    for(var j=0;j <years.length;j++){
        push();
        stroke(220,220,220);
        line(chart.margin+((chart.width/years.length)*j+1),chart.margin,chart.margin+((chart.width/years.length)*j+1), chart.height);
        text(years[j],chart.label+((chart.width/years.length)*j),chart.height+chart.label);
        pop();
    }
}

function draw(){
    background(255);
    drawAxis();
   for(var j=0; j < years.length ; j++){ 
       push();
        stroke(220,20,60);
        fill(220,20,60);
        ellipse(chart.margin+(chart.width/years.length)*j, chart.height-(student[j]/2000), 8, 8);
        line(chart.margin+(chart.width/years.length)*j,chart.height-(student[j]/2000),chart.margin+(chart.width/years.length)*(j+1),chart.height-(student[j+1]/2000));
         var d = dist(mouseX,mouseY,chart.margin+(chart.width/years.length)*j,chart.height-(student[j]/2000));
         if(d <= 8){
           fill(0);
           noStroke();
           text(parseInt(student[j]).toLocaleString('en'),chart.margin+(chart.width/years.length)*j-10,chart.height-(student[j]/2000)-10);
           
       }
       pop();
   }
}