var canvas;
var chart;
var student = [];
var master = [];
var years = [];
var colors =[];
var rangeX,maxX,rangeY,maxY;


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

function setup(){
       canvas = {
        width: 1000,
        height: 2000,
        margin: 20,
           text: '1993-2015 Grad Asian Students in Computer Science',
    };
    chart ={
        width: 600,
        height: 500,
        margin:50,
        label:20,
        stepX:50,
        stepY:50,
        textX:'Masters',
        textY: 'Asians'
    };
    createCanvas(canvas.width,canvas.height);
     for (var i = 0; i <table.getRowCount(); i++) {
             if(table.getRow(i).getString('Major') == 'Computer Science and Math'){
                append(student,table.getRow(i).getString('Asians'));
                append(master,table.getRow(i).getString('Masters'));
             }
    }
  
    
    maxX = Math.round(floor(max(student)/chart.stepX));
    rangeX = Math.round(floor(max(student)/(maxX))); 
    maxY = Math.round(floor(max(master)/chart.stepY));
    rangeY = Math.round(floor(max(master)/(maxY)));
    years=[1993,1995,1997,1999,2001,2003,2006,2008,2010,2013,2015];
    for(var year=0; year < years.length*3;year++){
        append(colors,Math.floor(Math.random() * 255));
    }
    
    
}

function drawAxis(){
    text(canvas.text,0+(canvas.margin*10),canvas.margin);
    text(chart.textX,chart.margin-chart.label,chart.margin-5);
    line(chart.margin,chart.height, chart.width, chart.height); 
    text(chart.textY,(chart.width+chart.margin)/2,chart.height+chart.margin);
    line(chart.margin,chart.margin,chart.margin, chart.height);
    
     for(var j=0;j < chart.height-chart.margin; j+=rangeY){ //Y
        push();
        stroke(220,220,220);
        line(chart.margin,chart.height-j, chart.width, chart.height-j);
        text((j*2)+"K",chart.label,chart.height-j);
        pop();
    }
    
    for(var y=0;y < chart.width-chart.margin;y+=rangeX){ //X
        push();
        stroke(220,220,220);
        line(chart.margin+(y+1),chart.margin,chart.margin+(y+1), chart.height);
        text(y+"K",chart.margin+y,chart.height+chart.label);
        pop();
    }
}

function drawLegand(x,y,w,h){
    rect(x,y,w,h/2);
    text("Year",x+5,y+15);
    for(var i=0;i<years.length;i++){ 
        push();
        fill(colors[i],colors[i+1] ,colors[i+2]);
        noStroke();
        rect(x+5,y+chart.label*(i+1.5),10,10);
        pop();
        text(years[i],x+20,y+chart.label*(i+2));
    }
}

function draw(){
    background(255);
    drawAxis();
   drawLegand(chart.width+chart.label,chart.margin,chart.margin+chart.margin,chart.height);
    for(var i=0; i<student.length;i++){
        push();
        fill(colors[i],colors[i+1] ,colors[i+2]);
        noStroke();
        ellipse(chart.margin+((student[i]/(chart.stepX*1000))*rangeX),chart.height-(master[i]/2000), 10, 10);
        var d = dist(mouseX,mouseY,chart.margin+((student[i]/(chart.stepX*1000))*rangeX),chart.height-(master[i]/2000));
        var percent = Math.round((student[i]/master[i])*100);
         if(d <= 10){
           fill(0);
           noStroke();
           text("Year: "+years[i]+"\nAsian: "+percent+"%",chart.margin+((student[i]/(chart.stepX*1000))*rangeX)-50,chart.height-(master[i]/2000)-20);
       }
        pop();            
    }
}