var table; var xaxis = []; var yaxis = [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 = 2400, height = 800, margin = 20, w = width - 2 * margin, h = height - 2 * margin; var columnforx = 22, columnfory = 20; createCanvas(width, height); b1 = createGraphics(600, 800); b2 = createGraphics(600, 800); b3 = createGraphics(600, 800); b4 = createGraphics(600, 800); sumarray = {}; allxaxis = table.getColumn('age'); allyaxis = table.getColumn('worth in billions'); allgender = table.getColumn('gender'); allyear = table.getColumn('year'); //Unique x axis values totalcount = allxaxis.length; for (i=0,j=1;i<totalcount;i++,j++) { xaxis.push(allxaxis[i]); yaxis.push(allyaxis[i]); } maxx = max(xaxis); minx = min(xaxis); maxy = max(yaxis); miny = min(yaxis); } function draw(){ background(255); xstart=50; xend=450; ystart=50; yend=450; fill("grey"); for(i=xstart;i<=xend;i++){ if(i%100 ==0 ){ for(j=0;j<4;j++){ line(i+j*600,yend,i+j*600,ystart);} } } for(i=ystart;i<=yend;i++){ if(i%100 ==0){ for(j=0;j<4;j++){ line(xstart+j*600,i,xend+j*600,i);} } } fill("black"); stroke(2); for (i=0;i<4;i++){ line(xstart+600*i, yend, 50+600*i, 50); //Y-axis } line(50, 450, 2400, 450); //X-axis fill("black"); text("X-Axis : Age",225,500); text("X-Axis : Age",825,500); text("X-Axis : Age",1425,500); text("X-Axis : Age",2025,500); rotate(-PI/2); text("Y-Axis : Worth in Billions", -300, 30); rotate(PI/2); fill("purple"); for(i=0;i<4;i++){ posx = map(min(xaxis), minx, maxx, 50, 450); text(min(xaxis), posx+600*i, 470); posx = map(max(xaxis), minx, maxx, 50, 450); text(max(xaxis), posx+600*i, 470); } fill("orange"); for(i=0;i<4;i++){ posy = map(min(yaxis), miny, maxy, 450, 50); text(min(yaxis),25+600*i,450); posy = map(max(yaxis), miny, maxy, 450, 50); text(max(yaxis),25+600*i,50); } for (i = 0, j=1; i< xaxis.length; i++, j++) { fill("pink"); posx = map(xaxis[i], minx, maxx, 50, 450); posy = map(yaxis[j], miny, maxy, 450, 50); if (posy==0){ posy=50; } var barsize = int(dist(posx, posy, posx, 450)); var barwidth = 10; if (allgender[i]=="male") { fill("blue"); ellipsewidth=3; } else if (allgender[i]=="female") { fill("pink"); ellipsewidth=10; } else if (allgender[i]==""){ ellipsewidth=6; fill("red"); } else { ellipsewidth=3; fill("orange"); } // if(mouseX>posx && mouseX<posx+barwidth){ // pos_string=""+xaxis[i]+","+yaxis[j]; // // text(pos_string,posx,posy); // // print(mouseX,mouseY,posx,posx+barwidth,posy,barsize); // }else { // } ellipse(posx,posy,ellipsewidth,ellipsewidth); if (allgender[i]=="male"){ ellipse(posx+600,posy,ellipsewidth,ellipsewidth); }else if (allgender[i]=="female") { ellipse(posx+1200,posy,ellipsewidth,ellipsewidth); }else if (allgender[i]=~"married") { ellipse(posx+1800,posy,ellipsewidth,ellipsewidth); } } fill("green"); // ellipse(mouseX,mouseY,5,5); fill("blue");ellipse(500,10,3,3);text("Male",510,10); fill("pink");ellipse(500,30,10,10);text("Female",510,30); fill("red");ellipse(500,50,6,6);text("No Gender",510,50); fill("orange");ellipse(500,60,3,3);text("Married Couple",510,60); }