var table, r, yAxisData, xAxisData, zAxisData, maxYLabel, minYLabel,
    maxXLabel, minXLabel, maxXValue, minXValue, maxYValue, minYValue,
    maxZValue, minZValue, minYearRow, maxYearRow, temp1, temp2, temp3, intervalY, intervalX;

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

}


function setup() {
    createCanvas(1000, 1000);

    typeData = 22;
    xAxisData = 46; // Column number of the x axis quantitative value (Whites)
    yAxisData = 2; // Column number of the y axis quantitative value (Asians)
    zAxisData = 28; // Column number of the quantitative value for size (Minorities)
	type = 'Chemistry';  // Change this variable to whatever major you would like data from.
    allTypeRows = [];
    for (r = 1 ; r < table.getRowCount() ; r++) {
        if (table.getString(r, typeData) == type) {
            append(allTypeRows, r);
        }
    }

    maxYValue = int(table.getString(allTypeRows[0], yAxisData));
    minYValue = maxYValue;
    maxXValue = int(table.getString(allTypeRows[0], xAxisData));
    minXValue = maxXValue;
    maxZValue = int(table.getString(allTypeRows[0], zAxisData));
    minZValue = maxZValue;

    for (r = 0 ; r < allTypeRows.length ; r++) {
        temp1 = int(table.getString(allTypeRows[r], yAxisData));
        temp2 = int(table.getString(allTypeRows[r], xAxisData));
        temp3 = int(table.getString(allTypeRows[r], zAxisData));
        if (temp1 > maxYValue) {
            maxYValue = temp1;
        } else if (temp1 < minYValue) {
            minYValue = temp1;
        }
        if (temp2 > maxXValue) {
            maxXValue = temp2;
        } else if (temp2 < minXValue) {
            minXValue = temp2;
        }
        if (temp3 > maxZValue) {
            maxZValue = temp3;
        } else if (temp3 < minZValue) {
            minZValue = temp3;
        }
    }

    minYLabel = int(((minYValue - minYValue % 10) / 10 - 1) * 10);
    minXLabel = int(((minXValue - minXValue % 10) / 10 - 1) * 10);
    intervalY = 10;
    intervalX = 10;
    while (true) {
    	if (intervalY * 9 + minYLabel > int(maxYValue)) {
    		maxYLabel = intervalY * 9 + minYLabel;
    		break;
    	}
    	intervalY += 10;
    }
    while (true) {
        if (intervalX * 9 + minXLabel > int(maxXValue)) {
            maxXLabel = intervalX * 9 + minXLabel;
            break;
        }
        intervalX += 10;
    }
}


function draw() {
    background(255);
	textSize(8);
    textAlign(LEFT);

    var x, y;
    
    // Draws the outline of the graph
    line(75, 65, 75, 675);
    line(75, 65, 685, 65);
    line(75, 675, 685, 675);
    line(685, 65, 685, 675);

    // Marks the axes intervals
    y = minYLabel;

    for (x = 615 ; x > 15 ; x -= 60) {
    	text(y, 35, x, 40, 50);
    	line(73, x, 77, x);
    	y += intervalY;
    }

    y = minXLabel;

    for (x = 135 ; x < 685 ; x += 60) {
        text(y, x - 10, 685, intervalX - 10, 50);
        line(x, 673, x, 677);
        y += intervalX;
    }
    
    var mappedXValue;
    var mappedYValue;
    var mappedZValue;
    // Plots the points in the graph
    for (r = 0 ; r < allTypeRows.length - 1 ; r++) {	
    	temp1 = int(table.getString(allTypeRows[r], yAxisData));
        temp2 = int(table.getString(allTypeRows[r], xAxisData));
        temp3 = int(table.getString(allTypeRows[r], zAxisData));
        mappedYValue = map(temp1, minYLabel, maxYLabel, 0, 540, true);
        mappedXValue = map(temp2, minXLabel, maxXLabel, 135, 675, true);
        mappedZValue = map(temp3, minZValue, maxZValue, 3, 30, true);

        fill(0, 125, 125, 100);
		ellipse(mappedXValue, 615 - mappedYValue, mappedZValue);

        if (dist(mouseX, mouseY, mappedXValue, 615 - mappedYValue) < mappedZValue) {
            fill(0);
            text("x = " + temp2 + ", y = " + temp1 + ", z = " + temp3, mappedXValue - 2 - mappedZValue, 610 - mappedYValue - mappedZValue);
        }
	}

    // Draw two circles for the legend
    fill(0, 125, 125, 100);
    ellipse(725, 90, 3);
    ellipse(725, 135, 30);

    // Label the legend
	fill(0);
    textSize(12);
    text("Number of " + table.getString(0, zAxisData), 715, 57, 60, 60);
    text(minZValue, 725, 95, 60, 60);
    text(maxZValue, 725, 155, 60, 60);
   
    // Labels the axes with the header from the appropriate column number
    textSize(12);
    textAlign(CENTER);
    text("Number of " + table.getString(0, yAxisData), 10, 625, 50, 120);
    text("Number of " + table.getString(0, xAxisData), 150, 725, 200, 50);

    // Prints the built title
    var title = "Number of " + table.getString(0, yAxisData) +
    	" Over the Number of " + table.getString(0, xAxisData) + " With " +
        type + " " + table.getString(0, typeData);
    textSize(20);
    text(title, 150, 15, 400, 50);
}