var table;

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

}


function draw() {

	clear();

	createCanvas(800, 800);

	var titles = []; // Titles
	var cli = []; // Coleman Liau
	var fkg = []; // Flesch Kincaid 
	var gf = []; // Gunning Fog
	var target = 20;
	for (var x=0; x < target; x++) { // top 20 results only
		append(titles, table.getString(x,28));
	}
	for (var x=0; x < target; x++) {
		append(cli, table.getString(x,6));
	}
	for (var x=0; x < target; x++) { 
		append(fkg, table.getString(x,12));
	}
	for (var x=0; x < target; x++) { 
		append(gf, table.getString(x,15));
	}

	var h = 200, w = 200; // Dim of each plot
	var margin = 50;
	var buffer = 20;
	
	stroke(1);
	// P1
	line(margin,margin,margin,margin+h); // y axis  (50,50), (50,300)
	line(margin,margin+h,margin+w,margin+h); // x axis  (50,300), (250,300)
	fill(50);
	textSize(10);
	var xlab = "Rank";
	var y1lab = "Coleman Liau Index";
	textAlign(LEFT);
	text(xlab, margin+w+10, margin+h);
	textAlign(CENTER);
	text(y1lab, margin, margin-10);

	// P2
	line(3*margin+w,margin,3*margin+w,margin+h); 
	line(3*margin+w,margin+h,3*margin+2*w,margin+h); 
	var xlab = "Rank";
	var y2lab = "Flesch Kincaid Grade";
	textAlign(LEFT);
	text(xlab, 3*margin+2*w+10, margin+h);
	textAlign(CENTER);
	text(y2lab, 3*margin+w, margin-10);

	// P3
	line(margin,3*margin+h,margin,3*margin+2*h); 
	line(margin,3*margin+2*h,margin+w,3*margin+2*h); 
	var xlab = "Rank";
	var y3lab = "Gunning Fog";
	textAlign(LEFT);
	text(xlab, margin+w+10, 3*margin+2*h);
	textAlign(CENTER);
	text(y3lab, margin, 3*margin+h-10);

	textAlign(LEFT);
	var textietext = "The Coleman Liau Index, Flesch Kincaid Grade, and the Gunning Fog are all measures of how challenging each book is to read. They Y axes represent the number of years of formal education required to understand the book."
	text(textietext, 3*margin+w, h+3*margin, 2*w-3*margin, 2*h+3*margin);


	for (var i=0; i<target; i++) {
		var xmap = map(i+1, 1, target, margin+buffer, margin+w-buffer); // x values
		var maxy1 = max(cli), maxy2 = max(fkg), maxy3 = max(gf); // Max values on each scale
		var maxY = max(maxy1, maxy2, maxy3); // Get max to make scale uniform
		
		var yceil = ceil(maxY/5)*5; // y axis markings
		for (var p=0; p<yceil; p = p+5) {
			var yaxis = map(p, 0, maxY, margin+h, margin+buffer);
			line(margin-3, yaxis, margin+3, yaxis);
			line(3*margin+w-3, yaxis, 3*margin+w+3, yaxis);
			line(margin-3, yaxis+2*margin+h, margin+3, yaxis+2*margin+h);
			textAlign(RIGHT);
			textSize(10);
			text(p, margin-10, yaxis);
			text(p, 3*margin+w-10, yaxis)
			text(p, margin-10, yaxis+2*margin+h)
		}

		if ((i+1)%10 == 0) { // X axis markings
			var xaxis = map(i+1, 1, target, margin+buffer, margin+w-buffer);
			stroke(0.5);
			line(xaxis, margin+h-3, xaxis, h+margin+3);
			line(xaxis+2*margin+w, margin+h-3, xaxis+2*margin+w, h+margin+3);
			line(xaxis, 3*margin+2*h-3, xaxis, 2*h+3*margin+3);
			textAlign(CENTER);
			fill(50);
			text(i+1, xaxis, h+margin+20);
			text(i+1, xaxis+2*margin+w, h+margin+20);
			text(i+1, xaxis, 2*h+3*margin+20);
		}

		var y1map = map(cli[i], 0, maxY, margin+h, margin+buffer); // coleman-liau index values
		noStroke();
		fill("#fae");
		ellipse(xmap, y1map, 4);

		var y2map = map(fkg[i], 0, maxY, margin+h, margin+buffer); // flesch index values
		fill("rgb(0,0,128)");
		ellipse(xmap+w+2*margin, y2map, 4);

		var y3map = map(gf[i], 0, maxY, margin+h, margin+buffer); // gunning fog index values
		fill("rgb(128,0,0)");
		ellipse(xmap, y3map+h+2*margin, 4);

		stroke(1);
		if (dist(mouseX, mouseY, xmap, y1map) < 5) {
			fill('rgb(255,127,80)');
			ellipse(xmap, y1map, 6);
			textAlign(LEFT);
			fill(50);
			text(titles[i], xmap-10, y1map-30); 
			text("Coleman Liau Index: " + cli[i], xmap-10, y1map-19); 
		}
		if (dist(mouseX, mouseY, xmap+w+2*margin, y2map) < 5) {
			fill('rgb(255,127,80)');
			ellipse(xmap+w+2*margin, y2map, 6);
			textAlign(LEFT);
			fill(50);
			text(titles[i], xmap+w+2*margin-10, y2map-30); 
			text("Flesch Kincaid Grade: " + fkg[i], xmap+w+2*margin-10, y2map-19); 
		}
		if (dist(mouseX, mouseY, xmap, y3map+h+2*margin) < 5) {
			fill('rgb(255,127,80)');
			ellipse(xmap, y3map+h+2*margin, 6);
			textAlign(LEFT);
			fill(50);
			text(titles[i], xmap-10, y3map+h+2*margin-30); 
			text("Gunning Fog: " + gf[i], xmap-10, y3map+h+2*margin-19); 
		}


	}




}