var table, c, yAxisData, xAxisData, maxLabel, maxValue, minYearRow, maxYearRow, temp, interval, year;

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

}


function setup() {
    createCanvas(3000, 1000);
    minYearRow = 0;
    maxYearRow = 0;
    xAxisData = 22; // Column number of the x axis nominal value (Type of Major)
    yAxisData = 2; // Column number of the y axis quantitative value (Asians)
	year = '2013';  // Change this variable to whatever year you would like data from.

    for (c = 1 ; c < table.getRowCount() ; c++) {
    	if (table.getString(c, 49) == year) {
    		minYearRow = c;
    		break;
    	}
    }
    for (c = minYearRow ; c < table.getRowCount() ; c++) {
    	if (table.getString(c, 49) != year) {
    		maxYearRow = c;
    		break;
    	}
    }
    maxValue = int(table.getString(minYearRow, 36));

    for (c = minYearRow + 1 ; c < maxYearRow ; c++) {
    	temp = int(table.getString(c, yAxisData));

    	if (temp > maxValue) {
			maxValue = temp;
		}
    }

    interval = 10;
    while (true) {
    	if (interval * 10 > int(maxValue)) {
    		maxLabel = interval * 10;
    		break;
    	}
    	interval += 10;
    }
}


function draw() {
    background(255);
	textSize(8);
    
    var x, y;

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

    x = 85;

    var mappedValue;
    // Builds the bars and extends the x-axis as it goes.
    for (c = minYearRow ; c < maxYearRow ; c++) {
    	temp = table.getString(c, yAxisData);
    	mappedValue = map(temp, 0, maxLabel, 0, 600);
		text(table.getString(c, xAxisData), x, 685, 45, 150);
		fill(0, 125, 125, 100);
		rect(x, 675 - mappedValue, 30, mappedValue);
		fill(0);
		if (mouseX >= x && mouseX <= x + 30 && mouseY >= 675 - mappedValue && mouseY <= 675) {
			text(temp, x, 670 - mappedValue);
		}

		x += 55;
	}
	
	fill(0);
	// Draws the lines for the axes
	line(75, 65, 75, 675);
	line(75, 65, x, 65);
    line(75, 675, x, 675);
    line(x, 65, x, 675);
   
    // Labels the axes with the header from the appropriate column number
    textSize(12);
    text("Number of " + table.getString(0, yAxisData), 10, 625, 50, 120);
    text(table.getString(0, xAxisData), 150, 725, 200, 50);

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