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

let shade = 60; // default opacity

​

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

function preload() {

  strings = loadStrings("olympics2024.csv");

}

​

function setup() {

  createCanvas(600, 600);  

  noStroke();

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

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

}

​

/*

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() {  

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

  let totalMetalsAwarded = totalMetals();

​

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

    //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

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

    // 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 = random(0, width);

    let yPos = random(0, height);

    // 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 + 10) // change the opacity of the choose color darker by 10 

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

    fill(colorArr); 

    // [optional] displays the countries' rank and name 

    // text(countryName + ' Rank ' + countryRank, xPos, yPos);

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

  }

}

​

function totalMetals() {

  let sumMetal = 0; 

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

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

    sumMetal += int(lineInFile[6]);

  }

  return sumMetal;

}

​

function getRandomColorRatio(){

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

  return colorRatio;

}

​

​

​

function mousePressed() {

  setup()

}

​

​

​

​

​