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);
}