var table;
var xaxis = [];
var zaxis = [];
var yaxis = [];
var maxx,maxy,maxz = 0;
var minx,miny,minz = 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 = 1800, height = 2400, margin = 20,
		w = width - 2 * margin,
		h = height - 2 * margin;
		var columnforx = 22, columnfory = 20;
	createCanvas(width, height);
  sumarray = {};
	allxaxis = table.getColumn('age');
  allyaxis = table.getColumn('worth in billions');
  allzaxis = table.getColumn('gender');
	//Unique x axis values
	totalcount = allxaxis.length;
	for (i = 0;i < totalcount; i++) {
			xaxis.push(allxaxis[i]);
		  yaxis.push(allyaxis[i]);
			if (allzaxis[i] == "male"){ zaxis.push(1); }
			else if (allzaxis[i] == "female") { zaxis.push(2); }
			else if (allzaxis[i] == ""){ zaxis.push(3); }
			else { zaxis.push(4); }
	}

	maxx = max(allxaxis);
	minx = min(allxaxis);
	maxy = max(allyaxis);
	miny = min(allyaxis);
	minz = 1;
	maxz = 5;
	// noLoop();
}

function draw(){
	background(255);
  xstart=50;  xend=450;
  ystart=50;  yend=450;

	for(i = xstart; i <= xend; i++) {
    if(i%100 == 0 ) {
			for(j = 0; j < 3; j++) {
				for(k = 0; k < 3; k++) {
					line(i+j*600, yend+k*800, i+j*600, ystart+k*800);
				}
			}
    }
  }

  for(i = ystart; i <= yend; i++) {
    if(i % 100 ==0){
			for(j = 0; j < 3; j++) {
				for(k = 0; k < 3; k++) {
      		line(xstart+j*600, i+k*800, xend+j*600, i+k*800);
				}
    	}
		}
  }

  fill("black");
  stroke(2);
	for (i=0;i<3;i++) {
		line(xstart+600*i, ystart, xstart+600*i, 2050); //Y-axis
	}

	for (i=0;i<3;i++) {
		line(50, 450+800*i, 1800, 450+800*i);
	}//X-axis

	fill("black");
	textSize(30);
	text("X-Axis : AGE",725,500);
	text("X-Axis : AGE",725,2100);
	text("X-Axis : GENDER",225,1300);
	text("X-Axis : GENDER",225,2100);
	text("X-Axis : WORTH in $Bn",1325,500);
	text("X-Axis : WORTH in $Bn",1325,1300);
  rotate(-PI/2);
			//LABELS VERTICAL
		  text("Y-Axis : GENDER", -400, 625);
			text("Y-Axis : GENDER", -400, 1225);
			text("Y-Axis : AGE", -1200, 25);
			text("Y-Axis : AGE", -1200, 1225);
			text("Y-Axis : WORTH in $Bn", -2000, 25);
			text("Y-Axis : WORTH in $Bn", -2000, 625);
			textSize(16);
  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);
	  }
	fill("white");rect(0, 0, 600, 600);fill("black");textSize(64);text("GENDER", 250, 300);
	fill("white");rect(600, 800, 600, 600);fill("black");textSize(64);text("AGE", 750, 1100);
	fill("white");rect(1200, 1590, 590, 600);fill("black");textSize(64);text("WORTH IN $BN", 1250, 1900);
	fill("blue");textSize(12);
	// print(mouseX,mouseY);

	//GENDERz vs AGEx
	for (i = 0; i < xaxis.length; i++) {
		fill("blue");
		posy = map(zaxis[i], minz, maxz, 450, 50);
		posx = map(xaxis[i], minx, maxx, 650, 1100);
    ellipse(posx, posy, 3, 3);
		ellipse(-posy+600, -posx+1900, 3, 3);
	}

	//GENDERz vs WORTHy
	for (i = 0 ; i< xaxis.length; i++) {
		fill("green");
		posy = map(zaxis[i], minz, maxz, 450, 50);
		posx = map(yaxis[i], miny, maxy, 1250, 1700);
    ellipse(posx, posy, 3, 3);
		ellipse(-posy+600, -posx+3300, 3, 3);
	}

	//AGEx vs WORTHy
	for (i = 0 ; i< xaxis.length; i++) {
		fill("red");
		posx = map(xaxis[i], minx, maxx, 650, 1100);
		posy = map(yaxis[i], miny, maxy, 2050, 1600);
    ellipse(posx, posy, 3, 3);
		ellipse(-posy+3300, -posx+1900, 3, 3);
	}
}