var majors = [];
var employed=[];
var mean=[];
var years = [];
var canvas;
var axis;
var scale;

function preload(){
    table = loadTable('graduates.csv', 'csv', 'header');
}
function getUniqueColumnValue(columnName){
    var column = table.getColumn(columnName);
    var value = [];
    for(var i=0; i < column.length; i++){
        if(value.indexOf(column[i]) == -1){
            append(value,column[i]);
        }      
    }
    return value;
}
function getScale(maxValue,minValue){
    return  Math.ceil((maxValue-minValue)/100000)*10;
}
function getSmallValue(value){
    return (value/100000)*10;
   
}

function setup(){
    majors=['Computer Science and Math','Electrical Engineering','Biological Sciences'];
    years = getUniqueColumnValue('Year');
    for(var m = 0; m < majors.length; m++){
       var row = table.findRows(majors[m],'Major');
        for(var r =0; r< row.length ;r++){
            append(employed,row[r].obj['Employed']);
            append(mean,row[r].obj['Mean']);
        }
      
    }
      canvas = {
        width: 800,
        height: 800,
        margin: 50,
        label: 30,
        text: 'Major'
    };
    axis = {
        xx1: canvas.margin,
        xy1: canvas.height,
        xx2: canvas.width,
        xy2: canvas.height,
        yx1: canvas.margin,
        yy1: canvas.margin,
        yx2: canvas.margin,
        yy2: canvas.width,
        
    };
    scale = {
        step: canvas.width/3,
        y1: dist(axis.yx1,axis.yy1,axis.yx2, axis.yy2)/(years.length-1),
        y2: dist(axis.yx1,axis.yy1,axis.yx2, axis.yy2)/getScale(max(employed),0),
        y3: dist(axis.yx1,axis.yy1,axis.yx2, axis.yy2)/getScale(max(mean),0)
    };
     createCanvas(canvas.width,canvas.height);
     
}
function drawLegand(x,y,w,h,texts){
    var colors = [0,153,153,255,102,102,102,178,255];
    stroke(0);
    rect(x,y,w,h/2);
    text(texts,x+5,y+15);
    push();
        fill(0,153,153);
        noStroke();
        rect(x+5,y+canvas.label,10,10);
    pop();
       text(majors[0],x+20,y+canvas.label+10);
    push();
        fill(255,102,102);
        noStroke();
        rect(x+5,y+canvas.label+20,10,10);
    pop();
        text(majors[1],x+20,y+canvas.label+30);
     push();
        fill(102,178,255);
        noStroke();
        rect(x+5,y+canvas.label+40,10,10);
    pop();
        text(majors[2],x+20,y+canvas.label+50);    
}
function draw(){
    background(255);
    push();
    stroke(0);
    drawAxis();
    pop();
    drawLegand(canvas.width-(scale.step)+canvas.margin+canvas.label,100,180,200,'Majors');
    for(var i = 0; i<years.length;i++){
        noStroke();
        ellipse(axis.yx1,axis.yy1+(scale.y1*i),2,2);
        var d = dist(mouseX,mouseY,axis.yx1,axis.yy1+(scale.y1*i));
         if(d <= 10){
             push();
           fill(0);
           noStroke();
           text(years[i],mouseX-20,mouseY);
             pop();
         }
     for(var j = 0; j< employed.length; j++){
         if(j%3==0){
             stroke(0,153,153);
         }
         else if(j%3==1){
             stroke(255,102,102);
         }
         else {
             stroke(102,178,255);
         }
        
        line(axis.yx1,axis.yy1+(scale.y1*i),axis.yx1+scale.step,(getSmallValue(employed[j])*scale.y2)+canvas.label+5);
        ellipse(axis.yx1+scale.step,(getSmallValue(employed[j])*scale.y2)+canvas.label+5,2,2);
         var d = dist(mouseX,mouseY,axis.yx1+scale.step,(getSmallValue(employed[j])*scale.y2)+canvas.label+5);
         if(d <= 10){
             push();
           fill(0);
           noStroke();
           text(parseInt(employed[j]).toLocaleString('en'),mouseX+10,mouseY);
             pop();
         }
        ellipse(axis.yx1+(scale.step*2),getSmallValue(mean[j])*scale.y3,2,2);
        var d2 = dist(mouseX,mouseY,axis.yx1+(scale.step*2),getSmallValue(mean[j])*scale.y3);
         if(d2 <= 10){
             push();
           fill(0);
           noStroke();
           text("$"+parseInt(mean[j]).toLocaleString('en'),mouseX+10,mouseY);
             pop();
         }
        line(axis.yx1+scale.step,(getSmallValue(employed[j])*scale.y2)+canvas.label+5,axis.yx1+(scale.step*2),getSmallValue(mean[j])*scale.y3); 
        //text(Math.round((employed[i]*scale.y2)).toLocaleString('en'),axis.yx1+scale.step-canvas.label,getSmallValue(employed[i])*scale.y2);
    }
    }
}

function showtext(){
    text("Hello",100,100);
}

function drawAxis(){
    text('Year',axis.yx1,axis.yy1-canvas.label);
    text('Number of Employed',axis.yx1-canvas.label+scale.step,axis.yy1-canvas.label);
    text((getScale(min(employed),0)*1000).toLocaleString('en'),axis.yx1+scale.step,axis.yy1-5);
    text((getScale(max(employed),0)*10000).toLocaleString('en'),axis.yx1+(scale.step)+10,axis.xy2-5);
    text('Mean of Salary ($)',axis.yx1-canvas.label+(scale.step*2),axis.yy1-canvas.label);
    text('0',axis.yx1+(scale.step*2),axis.yy1);
    text((getScale(max(mean),0)*10000).toLocaleString('en'),axis.yx1+(scale.step*2)+20,axis.xy2-5);
    line(axis.yx1,axis.yy1,axis.yx2, axis.yy2); //Y1 = Year
    line(axis.yx1+scale.step,axis.yy1,axis.yx2+scale.step, axis.yy2); // Y2 = Employed
    line(axis.yx1+(scale.step)*2,axis.yy1,axis.yx2+(scale.step)*2, axis.yy2) //Y3
    for(var i = 0; i<years.length;i++){
        push();
        text(years[i],axis.yx1-canvas.label,axis.yy1+(scale.y1*i));
        pop();
    }
}