let colorRatio = [0,0,0,0]; // default colors 

let shade = 60; // default opacity

let fileRow;

​

// loads the data from the uploaded file into the strings array 

function preload() {

  strings = loadStrings("olympics2024.csv");

}

​

function setup() {

  createCanvas(1200, 1200);  

  noStroke();

  fileRow = 1;

  // catch function to check if the file was able to properly load into the program

  if (strings == null) {

    console.log("Failled to load .csv file");

  }

  console.log("Sucessfully loaded the .csv file")

  background(250);

  xyPos(); // function to draw and run through the file 

}

​

// organize the datas in a set 10 x 10 coordinate fashion 

function xyPos(){

  for (let yPos = 120; yPos < height; yPos+= 120){

    for (let xPos = 120; xPos < width; xPos += 120){

      // there will be extra spaces in the end so it is necessary to always check that there are still rows/ data left in the file to be processed

      if (fileRow < strings.length){

        lineFile = split(strings[fileRow], ",")

        runFile(xPos, yPos, lineFile);

        fileRow += 1

      }

    }

  }

}

​

/*

replace the draw function because the cavas will simply draw on and refesh when the mouse is clicked with the mousePressed() function below 

*/

​

function runFile(x, y, lineInFile) {  

  // find the total metals awarded outside the forloop so it isnt computed over each row of the file 

  let totalMetalsAwarded = totalMetals();

​

  //categories of the file: Rank,Country,Country Code,Gold,Silver,Bronze,Total

  // split creates a list based on the speratorv(',') within the string array elemnt

  // file categorization 

  let countryRank = int(lineInFile[0]);

  let countryName = lineInFile[1];

  let countryCode = lineInFile[2];

  let countryGold = int(lineInFile[3]);

  let countrySilver = int(lineInFile[4]);

  let countryBronze = int(lineInFile[5]);

  let countryTotal = int(lineInFile[6]);

  // generate a random coordinator for the circle 

  let xPos = x

  let yPos = y

  // circles are has a scale factor of 10% based on the ratio of a countries metals awarded with the total metals awarded in relation to the width 

  let size = 10 * (countryTotal/ totalMetalsAwarded); 

  let circleArea = (width) * size    

  // draws the circles 

  colorArr = getRandomColorRatio(); // get a random color ratio of red, green, blue 

  fill(colorArr);

  circle(xPos, yPos, circleArea); 

  // draws the country names 

  colorArr.splice(3,1,shade + 400) // change the opacity of the choose color darker by 400 

  textAlign(CENTER, CENTER);  // aligns the text to the center of the circle  

  fill(colorArr); 

  text(countryName + ' Rank: #' + countryRank, xPos, yPos); // name and ranking of the country

  text('Total Metals: ' + countryTotal, xPos, yPos + 15);

  // output the breakdown of metals award of each country in the console 

  console.log('Team ' + countryCode + ' won ' + countryTotal + ' metals with ' + countryGold +' gold metals, ' + countrySilver + ' silver metals, and ' + countryBronze + ' bronze metals!')

}

​

// loops over the total number of metals each country won and sums up the total to determine the total 

function totalMetals() {

  let sumMetal = 0; 

  for (let lineInCSV = 1; lineInCSV < strings.length; lineInCSV++){

    lineInFile = split(strings[lineInCSV], ",");

    sumMetal += int(lineInFile[6]);

  }

  return sumMetal;

}

​

​

// random color generator: return type: array (list)

function getRandomColorRatio(){

  colorRatio = [random(0,255), random(0,255), random(0,255), shade];

  return colorRatio;

}

​

​

// when the mouse is pressed, the canvas would then create a new data visualzation of the given information 

function mousePressed() {

  setup()

}

​

​

​

​

​