sketch.js

let data = [];
let companies = [];
let dataLoaded;
let maxData;

function preload(){
  dataLoaded = loadTable("WIT_stat.csv", "csv", "header");
}

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  rectMode(BOTTOM);

  for(let i = 0; i < 20; i++) {
    let percent = dataLoaded.getNum(i, "percent_female_eng");
    let company = dataLoaded.getString(i, "company");
    //console.log(i, company);
    data.push(percent);
    companies.push(company);

  }

  // for (var i = 0; i < 30; i = i + 1) {
  //   var randomNumber = random(20, 80);
  //   data.push(randomNumber);
  // }
  //maxData = max(data);
  maxData = 100;

}

function draw() {
  background(43, 53, 63);

  var angleSeparation = 360 / data.length;
  var padding = 50;

  if (frameCount <= 400) {
    maxValue = constrain(frameCount * 2, 0, 400);
  } else {
    maxValue = 400;
  }
  var offset = 200;
  var dataMultiplier = (height/2-offset-padding) / maxData;


  for (var i = 0; i < data.length; i = i + 1) {
    push();
    var currentData = data[i];
    var currentCompany = companies[i];

    var finalHeight = currentData * dataMultiplier;
    var animatedHeight = map(maxValue, 0, 400, 0, finalHeight);
    //var animatedHeight = finalHeight;
    translate(width / 2, height / 2);
    rotate(angleSeparation * i);


    fill(0, 171, 203);
    stroke(0, 86, 74);
    rect(0, offset, angleSeparation*2, 100 * dataMultiplier)

    fill(139, 171, 203);
    stroke(89, 86, 74);

    rect(0, offset, angleSeparation*2, animatedHeight);
    //text(currentData, offset-50, 0);
    translate(0, offset-60);
    rotate(90);

    text(currentCompany, 0, 0);


    pop();
  }


}