let table;

let colors = []; 

​

//load the csv data before the setup is ran.

function preload() {

table= loadTable("womenshappiness.csv", "csv", "header");

music = loadSound("glossy.mp3"); 

}

​

function setup() {

  angleMode(DEGREES);

  createCanvas(1000, 850);

  background(0);

  music.play(); 

  //console.log(table); 

​

//the shades of the purple in array with which every circle is filled up randomly.

  colors.push(color(250, 203, 234)); //pinkish

  colors.push(color(237, 228, 255));

  colors.push(color(215, 187, 245));

  colors.push(color(160, 118, 249));

  colors.push(color(101, 40, 247));

  colors.push(color(243, 204, 255));

  colors.push(color(208, 156, 250));

  colors.push(color(165, 85, 236));

}

​

function draw() {

textAlign(LEFT, BOTTOM);

//extracting the names, ranks and scores from each row of the loaded csv data

  for(let r=0; r<table.getRowCount();r++) {

    const name = table.getString(r, "Country");

    const rank= table.getNum(r, "Rank");

    const score = table.getNum(r, "Score");

//calculating the positions x, y of the ellipses based on the rank of each country.

    const x = 2*(180-rank)*cos(rank*5)+width/2;

    const y = 2*(180-rank)*sin(rank*5)+height/2;

//scaling the score range of (0,100) to fit the range of (0, 30) to control the size of the ellipses, so they could fit the canva.

    const scoremap = map(score, 0, 100, 0, 30);

    ellipse(x, y, scoremap);

    fill(0);

​

//calculating the positions of x, y of the names of the countries  based on the rank of each country.

    let xtext=2.5*(180-rank)*cos(rank*5)+width/2-19;

    let ytext=2.5*(180-rank)*sin(rank*5)+height/2;

//changing the x position of the names of the countries to specific countries in order to avoid overlapping of the names with the ellipses.

    if (rank>=97 && rank<=116){

      xtext = 2.5*(180-rank)*cos(rank*5)+width/2-35; 

    }

    if (rank>=136) {

      xtext = 2.5*(180-rank)*cos(rank*5)+width/2+5;

    }

//checking the distance between the mouse and the ellipse. 

    let d = dist(mouseX, mouseY, x, y);

//if the mouse is on the ellipse, the name of the country and the ellipse corresponding to that country is filled is orange color. 

  if (d < scoremap/2) {

    fill(255, 95, 31);

    text(name, xtext, ytext);

    ellipse(x, y, scoremap);

  } else {

    fill(0);

    text(name, xtext, ytext);

    fill(random(colors));

    ellipse(x, y, scoremap);

    }

  } 

//additional information about the name, source and the title of the data visualization.

  fill(255);

textAlign(RIGHT);

  text('data provided by Meer Atif Magsi', 970, 780);

  text('posted on Kaggle', 970, 800);

  text ('song "Glossy" by Coma-Media', 970, 820);

  textAlign(LEFT);

  text('DATA VISUALIZATION', 30, 50);

  text('The World’s Best Countries For Women, 2021', 30, 70 );

  text('created by Diana', 30, 90);

}