var table;

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

}


function draw() {

	clear();

	createCanvas(800, 800);

	var titles = [];
	var rankArr = [];
	var downloadsArr = [];
	for (var x=0; x < table.getRowCount(); x++) { // Col 23 is rank
		append(rankArr, table.getString(x,23));
	}
	for (var x=0; x < table.getRowCount(); x++) { // Col 11 is downloads
		append(downloadsArr, table.getString(x,11));
	}
	for (var x=0; x < table.getRowCount(); x++) { // Titles
		append(titles, table.getString(x,28));
	}

	var h = 600, w = 700;
	var margin = 50;
	// stroke(1);
	line(margin,h-margin,w-margin,h-margin); // x axis  (50,550), (550,550)
	line(margin,margin,margin,h-margin); // y axis  (50,50), (50,550)

	fill(50);
	var xlab = "Rank";
	var ylab = "Num Downloads";
	textSize(10);
	textAlign(LEFT);
	text(xlab, w-margin + 10, h-margin);
	textAlign(CENTER);
	text(ylab, margin, margin - 10);

	var maxdl = max(downloadsArr), mindl = min(downloadsArr);
	var interval = (w - (2*margin) - 40) / rankArr.length;

	// line(margin-4, margin+20, margin+4, margin+20); // top y axis mark   
	line(margin-4, h-margin, margin+4, h-margin); // bottom y axis mark at 0

	var yceil = ceil(maxdl/5000) * 5000; // 40000
	for (var i=0; i<yceil; i = i+5000) {
		var ymap = map(i, 0, yceil, h - margin, margin);
		line(margin-3, ymap, margin+3, ymap);
		textAlign(RIGHT);
		textSize(10);
		text(i, margin-10, ymap);
	}

	for (var i=0; i<rankArr.length; i++) {
		var y1 = map(downloadsArr[i], 0 , yceil, h - margin, margin);
		var y2 = map(downloadsArr[i+1], 0 , yceil, h - margin, margin);
		var x1 = map(rankArr[i], 1, 100, margin + 15, w - margin -15);
		var x2 = map(rankArr[i+1], 1, 100, margin + 15, w - margin -15);
		stroke(0.5);
		line(x1, y1, x2, y2); // Draw lines

		fill("#fae");
		noStroke();
		ellipse(x1, y1, 5.5); // Draw point ellipses

		if ((i+1)%10 == 0) { // X axis markings
			stroke(0.5);
			line(x1, h-margin-4, x1, h-margin+4);
			// textSize(10);
			textAlign(CENTER);
			fill(50);
			text(i+1, x1, h-margin+20);
		}

		if (dist(mouseX, mouseY, x1, y1) < 5) {
			fill('rgb(255,51,51)');
			stroke(1);
			ellipse(x1, y1, 7);
			textAlign(LEFT);
			fill(50);
			text(titles[i], x1+10, y1-15);
			text("Number of downloads: " + downloadsArr[i], x1+10, y1-5);
		}

		
	}


}