var table;

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


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

function draw(){
	clear()
	var total_Rape = table.getColumn('Totals.Violent.Rape');
	var years = table.getColumn('Year');
    
	push();
	fill(0,0,0)
    textSize(30)
    textStyle(BOLD)
    text("Alabaster P.D. Rape Crimes", 250, 500)
    pop()

	fill(0,0,0)

	textSize(10);
	text('# of Rapes', 10, 200);
	line(99,10,99, 410);

	textSize(10);
	text("Years", 410, 450);
	line(100,400,800, 400);

	for(var x = 0; x < table.getRowCount(); x++){
		var tick1 = map(years[x], min(years), max(years), 110,800)
		line(tick1,400, tick1,406)
	}
	for(var x = 0; x < table.getRowCount(); x++){
		var tick1 = map(years[x], min(years), max(years), 110,800)
		text(years[x], tick1-10, 420)
	}

	for(var x = 0; x < table.getRowCount(); x++){
		var tick2 = map(total_Rape[x], min(total_Rape), max(total_Rape), 400,10)
		line(95,tick2, 98,tick2)
		text(total_Rape[x], 85,tick2)
	}
	
	translate(110,400);
	for(var x = 0; x < table.getRowCount(); x++){
		fill(128, 128, 128)
		var bar = map(years[x], min(years), max(years), 0, 690)
		var h = map(total_Rape[x], min(total_Rape), max(total_Rape), 0,390)
		
		rect(bar-5, 0,10, -h);
		if(mouseX-110 > (bar-5) && mouseY-400 < (0) && mouseX-105 < ((bar-5)+10) && mouseY-410 > -h){
			fill(0,0,0)
			textSize(10);
			text(total_Rape[x], mouseX-110, mouseY-400)
		}
	} 
}