let table;
let tb_rows;
let age_range;
let worth_range;
var dict = {};
let canvasWidth = 1240;
let canvasHeight = 1500;

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


function setup() {
    // Data processing
    tb_rows = table.getRows();
    age_range = colValsMinMax("age");
    worth_range = colValsMinMax("worth in billions");

    var categories = table.getColumn("category");
    for (var i = 0; i < categories.length; i++) {
		dict[categories[i]] = 1;
    }

    frameRate(1);
    createCanvas(canvasWidth, canvasHeight);
}


function colValsMinMax(colName) {
    var vals = []
    for (var i = 0; i < table.getRowCount(); i++) {
        if (tb_rows[i].getNum("age") !== -1) {
            vals.push(tb_rows[i].getNum(colName));
        }
    }
    let obj = {
        values: vals,
        min: min(vals),
        max: max(vals),
    }
    return obj;
}


function draw() {
    fill(0);

    // // Setting metadata of axis and titles
    var axis_y_end_height;
    var axis_x_end_width = canvasWidth;

	var plots_col_count = 3;
	var plots_col_pos_x_start = -50;
	var plots_col_width = 250;
	var plots_row_count = 4;
	var plots_row_pos_y_start = -100;
	var plots_row_height = plots_col_width;

	for (m = 1; m <= Object.keys(dict).length/plots_col_count+1; m++) {
		axis_intercept_y = plots_row_pos_y_start + ((canvasHeight - 50 - plots_row_pos_y_start)/plots_row_count)*m;
		axis_y_end_height = axis_intercept_y - plots_row_height;

		var col_count;

		if ((Object.keys(dict).length - (m-1)*plots_col_count) < plots_col_count) {
			col_count = Object.keys(dict).length%3;
		}else{
			col_count = plots_col_count;
		}

		for (i = 1; i <= col_count; i++) {
			var category_i = (m*3)-3+i-1;
			category_name = Object.keys(dict)[category_i];

			axis_x_end_width = plots_col_pos_x_start + ((canvasWidth - 50 - plots_col_pos_x_start)/plots_col_count)*i;
			axis_intercept_x = axis_x_end_width - plots_col_width;

			var title_pos_y = axis_y_end_height;
			var title_pos_x = axis_intercept_x+(axis_x_end_width-axis_intercept_x)/2-30;
			var axis_y_title_pos_x = axis_intercept_x-100;
			var axis_x_title_pos_y = axis_intercept_y+60;
			var category_name;

			// Plot axis
			stroke(0);
			line(axis_intercept_x, axis_intercept_y, axis_intercept_x, axis_y_end_height);
			line(axis_intercept_x, axis_intercept_y, axis_x_end_width, axis_intercept_y);

			// Margin for plotting and scale labels on axis
			var axis_x_scale_label_pos_y = axis_intercept_y+20;
			var axis_y_scale_label_pos_x = axis_intercept_x-30;
			var axis_x_scale_margin_px = 3;
			var axis_y_scale_margin_px = 3;

			// Title for chart and axis
			textSize(14);
			fill(0);
			text(category_name, title_pos_x, title_pos_y);
			textSize(12);
			text("Worth \nin Billions", axis_y_title_pos_x, axis_y_end_height+(axis_intercept_y-axis_y_end_height)/2);
			text("Age", title_pos_x, axis_x_title_pos_y);

			// Plot points in scatter plot
			for (k = 0; k < table.getRowCount(); k++) {
				if ((tb_rows[k].getNum("age") != -1) && (tb_rows[k].getString("category") == category_name)) {
					var age = tb_rows[k].getNum("age");
					var worth = tb_rows[k].getNum("worth in billions");

					var pos_x = map(age, age_range.min, age_range.max, axis_intercept_x+axis_x_scale_margin_px, axis_x_end_width-axis_x_scale_margin_px);
					var pos_y = map(worth, worth_range.min, worth_range.max, axis_intercept_y-axis_y_scale_margin_px, axis_y_end_height+axis_y_scale_margin_px);
					fill(65,157,120);
					ellipse(pos_x, pos_y, 5);

					    var d = dist(mouseX, mouseY, pos_x, pos_y);
					    var name = tb_rows[k].getString("name");
					    if (d < 5) {
						noStroke();
						textSize(12);
						fill(58,183,149);
						var msg = "Name: " + name;
						text(msg, mouseX, mouseY-15);
					    }
				}
			}

			fill(65,157,120);

			// plot x axis scale label
			for(label_i = 1; label_i <= 10; label_i++) {
			    var label_pos_x = ((axis_x_end_width-axis_x_scale_margin_px)-(axis_intercept_x+axis_x_scale_margin_px))/10*label_i + (axis_intercept_x+axis_x_scale_margin_px);
			    text(Math.round(((age_range.max-age_range.min)/10*label_i + age_range.min)), Math.round(label_pos_x)-5, axis_x_scale_label_pos_y);
			    stroke(100);
			    line(label_pos_x, axis_intercept_y-2, label_pos_x, axis_intercept_y+2);
			}

			// plot y axis scale label
			for(label_i = 1; label_i <= 10; label_i++) {
			    var label_pos_y = ((axis_intercept_y-axis_y_scale_margin_px)-(axis_y_end_height+axis_y_scale_margin_px))/10*(11-label_i) + (axis_y_end_height+axis_y_scale_margin_px);
			    text(Math.round(((worth_range.max-worth_range.min)/10*label_i + worth_range.min)), axis_y_scale_label_pos_x, Math.round(label_pos_y)+5);
			    stroke(100);
			    line(axis_intercept_x-2, label_pos_y, axis_intercept_x+2, label_pos_y);
			}
		}
	}
}