var table; var xaxis = []; var yaxis = [0]; //The bar charts always start with 0 var maxx = 0; var minx = 0; function preload() { //my table is comma separated value "csv“ and has a header specifying the columns labels table = loadTable('billionaires.csv', 'csv','header'); } function setup() { //count the columns var width = 800, height = 800, margin = 20, w = width - 2 * margin, h = height - 2 * margin; var columnforx = 22, columnfory = 20; createCanvas(width, height); sumarray = {}; allxaxis = table.getColumn('year'); allyaxis = table.getColumn('worth in billions'); //Unique x axis values for (x of allxaxis) { if(!xaxis.includes(x)){ xaxis.push(x); sumarray[x] = 0; } } datapoints = allxaxis.length; // datapoints = 5; for (i=0; i < datapoints; i++){ // print(allxaxis[i],allyaxis[i]); sumarray[allxaxis[i]] = sumarray[allxaxis[i]]+parseFloat(allyaxis[i]); } // print (sumarray); //Sum of Y-axis values for (x of xaxis){ yaxis.push(sumarray[x]); } //yaxis=yaxis.slice(1); maxx = max(xaxis); minx = min(xaxis); maxy = max(yaxis); miny = min(yaxis); print("Maxx="+maxx+" Minx="+minx); print("Maxy="+maxy+" Miny="+miny); // noLoop(); } function draw(){ background(255); xstart=50; xend=450; ystart=50; yend=450; // Grid lines display fill("grey"); tint(255, 127); // Display at half opacity for(i = xstart; i <= xend; i++){ if(i % 100 == 0 ){ line(i, yend, i, xstart); } } for(i = ystart; i <= yend; i++){ if(i % 100 == 0){ line(xstart, i, xend, i); } } fill("black"); stroke(2); line(xstart, yend, 50, 50); //Y-axis line(50, 450, 450, 450); //X-axis //Labels for both the axis fill("black"); text("X-Axis : Year", 225, 500); rotate(-PI/2); text("Y-Axis : Total Worth in Billions", -300, 10); rotate(PI/2); //Mapping values of axes on the line for (x of xaxis){ posx = map(x, minx, maxx, 70, 450); text(x, posx, 470); } // for (var i = 0; i < yaxis.length; i++){ // posy = map(i, miny, maxy, 450, 50); // text(i, 10, posy); // } for (y of yaxis) { posy = map(y, miny, maxy, 450, 50); text(y.toFixed(), 0, posy); } //To display the pink bars for (i = 0, j = 1; i< xaxis.length; i++, j++){ fill("pink"); posx = map(xaxis[i], minx, maxx, 70, 450); posy = map(yaxis[j], miny, maxy, 450, 0); if (posy == 0){ posy = 50; } //Hovering the mouse var barsize = int(dist(posx, posy, posx, 450)); var barwidth = 20; if( mouseX > posx && mouseX < posx+barwidth){ fill("black"); pos_string = "" + xaxis[i] + "," + yaxis[j].toFixed(); text(pos_string, posx, posy); fill("red"); // print(mouseX,mouseY,posx,posx+barwidth,posy,barsize); }else { fill("pink"); // print(mouseX,mouseY,posx,posx+barwidth,posy,barsize); } box = rect(posx, posy, barwidth, barsize); fill("blue"); ellipse(posx, posy, 5, 5); } fill("black"); ellipse(mouseX,mouseY,10,10); }