var data; var table; var dict = {}; var canvasWidth = 1000; var canvasHeight = 650; function preload() { table = loadTable('billionaires.csv', 'csv', 'header'); } function setup() { frameRate(1); var rows = table.findRows('USA', 'country code'); for (i = 0; i < rows.length; i++) { var year = parseInt(rows[i].getString("year")); var wib = parseFloat(rows[i].getString("worth in billions")); if (year in dict){ dict[year] += wib; }else{ dict[year] = wib; } } data = dict; createCanvas(canvasWidth, canvasHeight); console.log(dict); } function draw() { fill(0); textSize(20); 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+130+100; var axis_intercept_y = canvasHeight-100; var axis_y_end_height = title_h+20; var axis_x_end_width = canvasWidth; 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); text("Trend of Sum Worth in Billions of USA in Years", canvasWidth/2, title_h); textSize(16); text("Sum Worth in Billions of USA", axis_y_title_pos_x, axis_y_end_height+(axis_intercept_y-axis_y_end_height)/2); text("Year", axis_intercept_x+(canvasWidth-axis_intercept_x)/2, axis_x_title_pos_y); var axis_x_scale_label_pos_y = canvasHeight-50; var axis_y_scale_label_pos_x = axis_intercept_x-80; max_year = Math.max.apply(null, Object.keys(dict)); min_year = Math.min.apply(null, Object.keys(dict)); max_worth = Math.max.apply(null, Object.values(dict)); min_worth = Math.min.apply(null, Object.values(dict)); var axis_x_scale_margin_px = 5; var axis_y_scale_margin_px = 100; fill(58,183,149); for (i = 1; i < Object.keys(dict).length; i++) { prev_pos_x = map(Object.keys(dict)[i-1], min_year-axis_x_scale_margin_px, max_year+axis_x_scale_margin_px, axis_intercept_x, axis_x_end_width); prev_pos_y = map(data[Object.keys(dict)[i-1]], min_worth-axis_x_scale_margin_px, max_worth+axis_x_scale_margin_px, axis_intercept_y-axis_y_scale_margin_px, axis_y_end_height+axis_y_scale_margin_px); pos_x = map(Object.keys(dict)[i], min_year-axis_x_scale_margin_px, max_year+axis_x_scale_margin_px, axis_intercept_x, axis_x_end_width); pos_y = map(data[Object.keys(dict)[i]], min_worth-axis_x_scale_margin_px, max_worth+axis_x_scale_margin_px, axis_intercept_y-axis_y_scale_margin_px, axis_y_end_height+axis_y_scale_margin_px); stroke(58,183,149); strokeWeight(1); line(prev_pos_x, prev_pos_y, pos_x, pos_y); ellipse(prev_pos_x, prev_pos_y, 5); ellipse(pos_x, pos_y, 5); text(Object.keys(dict)[i-1], prev_pos_x-8, axis_x_scale_label_pos_y); text(Object.keys(dict)[i], pos_x-8, axis_x_scale_label_pos_y); stroke(200); line(prev_pos_x, axis_intercept_y-5, prev_pos_x, axis_intercept_y+5); line(pos_x, axis_intercept_y-5, pos_x, axis_intercept_y+5); text(data[Object.keys(dict)[i-1]].toFixed(2), axis_y_scale_label_pos_x, prev_pos_y+3); text(data[Object.keys(dict)[i]].toFixed(2), axis_y_scale_label_pos_x, pos_y+3); stroke(200); line(axis_intercept_x-5, prev_pos_y, axis_intercept_x+5, prev_pos_y); line(axis_intercept_x-5, pos_y, axis_intercept_x+5, pos_y); var prev_d = dist(mouseX, mouseY, prev_pos_x, prev_pos_y); var d = dist(mouseX, mouseY, pos_x, pos_y); if (d < 5 || prev_d < 5) { noStroke(); textSize(12); fill(58,183,149); if (d < 5) { var msg = "Year: " + Object.keys(dict)[i] + "\n" + "Sum Worth: " + data[Object.keys(dict)[i]].toFixed(2); text(msg, mouseX, mouseY-15); } else{ var msg = "Year: " + Object.keys(dict)[i-1] + "\n" + "Sum Worth: " + data[Object.keys(dict)[i-1]].toFixed(2); text(msg, mouseX, mouseY-15); } } } }