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

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


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

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

    var color_arr = [];
    color_arr.push([192,74,188]);
    color_arr.push([65,157,120]);
    color_arr.push([23,137,252]);
    color_arr.push([213,41,65]);
    color_arr.push([255,173,105]);
    color_arr.push([171,225,136]);
    color_arr.push([125,128,218]);
    color_arr.push([112,169,161]);
    color_arr.push([255,53,98]);
    color_arr.push([193,100,94]);

    for (i = 0; i < Object.keys(dict).length; i++) {
        dict[Object.keys(dict)[i]] = color_arr[i];
    }
    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);
    // background(233,235,248);

    // Setting metadata of axis and titles
    var title_h = 50;
    var axis_y_title_pos_x = 10;
    var axis_x_title_pos_y = canvasHeight-10;

    var axis_intercept_x = axis_y_title_pos_x+50+120;
    var axis_intercept_y = canvasHeight-100;
    var axis_y_end_height = title_h+80;
    var axis_x_end_width = canvasWidth;

    // Plot axis
    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);

    // Title for chart and axis
    textSize(20);
    text("Age V.S. Worth in Billions For All Countries", canvasWidth/2-100, title_h);
    textSize(16);
    text("Worth in Billions", axis_y_title_pos_x, axis_y_end_height+(axis_intercept_y-axis_y_end_height)/2);
    text("Age", axis_intercept_x+(canvasWidth-axis_intercept_x)/2, axis_x_title_pos_y);

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

    // Plot points in scatter plot
    for (i = 0; i < table.getRowCount(); i++) {
        if (tb_rows[i].getNum("age") != -1) {
            var age = tb_rows[i].getNum("age");
            var worth = tb_rows[i].getNum("worth in billions");
            var category = tb_rows[i].getString("category");
            var rgb_arr = dict[category];
            fill(rgb_arr[0], rgb_arr[1], rgb_arr[2]);

            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);
            ellipse(pos_x, pos_y, 7);

            var d = dist(mouseX, mouseY, pos_x, pos_y);
            var name = tb_rows[i].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);
    fill(100);

    // plot x axis scale label
    for(i = 1; i <= 10; i++) {
        var label_pos_x = ((axis_x_end_width-axis_x_scale_margin_px)-(axis_intercept_x+axis_x_scale_margin_px))/10*i + (axis_intercept_x+axis_x_scale_margin_px);
        text(Math.round(((age_range.max-age_range.min)/10*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-5, label_pos_x, axis_intercept_y+5);
    }

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

    // plot color label for category
    textSize(16);
    fill(0);
    text("Category", axis_x_end_width-200, title_h+10);

    textSize(14);
    for(i = 0; i < Object.keys(dict).length; i++) {
        var category = Object.keys(dict)[i];
        var rgb_arr = dict[category];
        fill(rgb_arr[0], rgb_arr[1], rgb_arr[2]);
        if (category == "") {
            category = "\"\"";
        }
        text(category, axis_x_end_width-200, title_h+30+15*i);
        ellipse(axis_x_end_width-50, title_h+28+15*i, 15, 10);
    }

}