function setup() {

  createCanvas(600, 400);

  fem_values= [6826, 852, 112, 2, 44, 9, 494, 1, 3]

fem_century= [19, 18, 17, 12, 16, 15, 20, 13, 0]

m_value= [126234, 121305, 52739, 33934, 6505, 3565, 24534, 5277, 2904, 4523, 2119, 3214, 1550, 1443, 2617, 1223, 1390, 4501, 2463, 2340, 1829, 1, 2]

m_century= [18, 19, 17, 16, 20, 0, 15, 14, 12, 13, 7, 6, 8, 5, 2, 10, 4, 3, 11, 9, 1, 153, 28]

sorted_centuries= [153, 28, 20, 19, 18, 17, 16, 15, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];

b=[18, 19, 17, 16, 20, 0, 15, 12, 13]

  femVal= [1,2,5,10,101,290]

  MaxNum_fem_val= max(fem_values)

  rectHeight=200

  // console.log("MaxNum_fem_val", MaxNum_fem_val);

  // console.log((100/MaxNum_fem_val)*rectHeight);

  //nheight=(fem_values[1]/MaxNum_fem_val)*rectHeight;

  for (let h = 0; h < fem_values.length; h++){

    if (fem_century[h]=== 13){

 //     console.log("pos", h, "at",fem_century[h],"we have", fem_values[h])

    }

  }

}

​

function draw() {

  //Guide rect 

  background(240);

  noStroke();

  let hnum =80;

  let wnum=5;

  let offset_rect=wnum+19;

  for (let i = 0; i < m_value.length; i++) {

    if (20 >= m_century[i]){

    push();

  fill(0);

      x = height-hnum*2

​

      fill(0);

  rect(m_century[i]*(25)+20, hnum, wnum+10, x);

​

      pop();

  //Q: is the century b, aka [18, 19, 17, 16, 20, 0, 15, 12, 13]

    //Q: is the century greater than or equal to zero? 

    //A: actually all of them are greater than or equal to zero

      push();

      // fill('red');

      text(m_century[i]+1, m_century[i]*(25)+20,hnum+250);

      if(m_century[i]===18){

         for (let h = 0; h < fem_values.length; h++){

    if (fem_century[h]=== 18){

      // rect(x,y,w,h)

      //height = fem Pieces/Total Number of Pieces

      total_Values=fem_values[h]+m_value[i]

      proportion_Value=fem_values[h]/(fem_values[h]+m_value[i])

​

      rect(m_century[i]*(25)+20, hnum, wnum+10, proportion_Value*rectHeight)

    }

         }

      }

      //if male century is equal to any of the female centuries

      if(m_century[i]===19||15||18||17||12||16||15||20||13||0){

        //for loop of fem length

         for (let h = 0; h < fem_values.length; h++){

           //if fem century equals m century

    if (fem_century[h]===m_century[i]){

      total_Values=fem_values[h]+m_value[i]

      proportion_Value=fem_values[h]/(fem_values[h]+m_value[i])

      push();

       fill(130, 148, 198);

  quad(m_century[i]*(25)+20,hnum, m_century[i]*(25)+20+wnum+10, hnum, m_century[i]*(25)+20+wnum+10,hnum+x,m_century[i]*(25)+20, hnum+x)

      pop();

      rect(m_century[i]*(20), hnum, wnum, proportion_Value*rectHeight)

      fill('red');

      //CYAN FEM RECT

      rect(m_century[i]*(25)+20, hnum, wnum+10, proportion_Value*rectHeight)

// //HOVER TEXT

            if (mouseX > (m_century[i]*(25)+20) && (mouseX < (m_century[i]*(25)+20+wnum+10)) && (mouseY > hnum) && (mouseY < hnum+x)){

//             fill('green');

//       push();

//   quad(m_century[i]*(25)+20,hnum, m_century[i]*(25)+20+wnum+10, hnum, m_century[i]*(25)+20+wnum+10,hnum+x,m_century[i]*(25)+20, hnum+x)

//       pop();

    console.log(proportion_Value*100);

//         fill('green');

//         rect(mouseX+10, mouseY, 40,20);

//         fill(0);

//         text(round(proportion_Value*100, 2),mouseX+10, mouseY+10);

}

//   else {

//   //fill(0);

//   }

    }

         }

      }

      pop();

  }

  }

}