let coordinates = {};

let backgroundimg;

let countryIndex = 0; // Track the current country index

let countryData = []; // Store the loaded CSV data

let maxNumStudents; // Maximum number of students for scaling

​

function preload() {

  // Load the background image

  backgroundimg = loadImage("worldmap.png");

}

​

function setup() {

  createCanvas(600, 500);

  frameRate(7);

​

  data = loadTable("uaeustudents.csv", "csv", "header", processData);

}

​

function processData(table) {

  // Initialize a data structure to store the total number of students per country

  let countryTotals = {};

​

  // Loop through each row of the CSV table

  for (let row of table.rows) {

    let country = row.get("Country");

    let gender = row.get("Gender_En");

    let numStudents = int(row.get("Undergraduate_En"));

​

    // Combine male and female students together

    if (!countryTotals[country]) {

      countryTotals[country] = numStudents;

    } else {

      countryTotals[country] += numStudents;

    }

  }

​

  // Convert the countryTotals object to an array of objects

  for (let country in countryTotals) {

    countryData.push({ country: country, numStudents: countryTotals[country] });

  }

​

  maxNumStudents = max(countryData.map(data => data.numStudents)); // Calculate max numStudents

​

  if (data == null) {

    print("Failed to load data.");

    noLoop();

  } else {

    print("Data loaded successfully.");

       // Define coordinates for each country

    coordinates["Afghanistan"] = { x: 400, y: 217 };

    coordinates["Algeria"] = { x: 289, y: 252 };

    coordinates["Australia"] = { x: 517, y: 335 };

    coordinates["Bahrain"] = { x: 377, y: 235 };

    coordinates["Bangladesh"] = { x: 447, y: 238 };

    coordinates["India"] = {x: 413, y: 294 };

    coordinates["Saudi Arabia"] = {x: 355, y: 285};

    coordinates["Costa Rica"] = {x: 81, y: 278 };

    coordinates["Canada"] = {x: 54, y: 140 };

    coordinates["China"] = {x: 485, y: 262 };

    coordinates["Comoros Island"] = {x: 340, y: 390 };

    coordinates["Denmark"] = {x: 274, y: 174 };

    coordinates["Bosnia"] = {x: 286, y: 219 };

    coordinates["Egypt"] = {x: 321, y: 265 };

    coordinates["Finland"] = {x: 311, y: 138 };

    coordinates["Lebanon"] = {x: 334, y: 251 };

     coordinates["Libya"] = {x: 298, y: 265 };

     coordinates["Eritria"] = {x: 330, y: 280 };

     coordinates["Eithiopia"] = {x: 340, y: 316 };

     coordinates["Iran"] = {x: 370, y: 250 };

     coordinates["Jordan"] = {x: 327, y: 238 };

     coordinates["Kuwait"] = {x: 355, y: 267 };

     coordinates["Morocco"] = {x: 245, y: 261 };

     coordinates["Nigeria"] = {x: 253, y: 317 };

     coordinates["Poland"] = {x: 269, y: 201 };

     coordinates["Seychelles"] = {x: 361, y: 399 };

     coordinates["Tanzania"] = {x: 337, y: 364 };

     coordinates["United Kingdom"] = {x: 240, y: 182 };

     coordinates["Yemen"] = {x: 353, y: 302 };

     coordinates["Bulgaria"] = {x: 313, y: 212 };

     coordinates["Sweden"] = {x: 280, y: 135 };

    coordinates["Burkina Faso"] = {x: 259, y: 312 };

    coordinates["France"] = {x: 250, y: 203 };

    coordinates["Guinea"] = {x: 234, y: 328 };

    coordinates["Kenya"] = {x: 342, y: 344 };

    coordinates["Malyasia"] = {x: 474, y: 347 };

    coordinates["Mongolia"] = {x: 490, y: 205 };

    coordinates["Pakistan"] = {x: 396, y: 271 };

    coordinates["Somalia"] = {x: 353, y: 342 };

    coordinates["Sudan"] = {x: 323, y: 317 };

    coordinates["Thailand"] = {x: 460, y: 295 };

    coordinates["United States of America"] = {x: 80, y: 205 };

    coordinates["Kazakhstan"] = {x: 394, y: 291 };

    coordinates["Dominica"] = {x: 111, y: 291 };

    coordinates["Germany"] = {x: 279, y: 193 };

    coordinates["Gambia"] = {x: 222, y: 312 };

    coordinates["Mauritania "] = {x: 227, y: 295 };

    coordinates["Indonesia"] = {x: 531, y: 354};

    coordinates["Uzbekistan"] = {x: 390, y: 215};

    startChangingText();

  }

}

​

function draw() {

  // Clear the background to erase the previous text and map

  image(backgroundimg, 0, 0, width, height);

​

  // Plot circles for each country

  for (let countryDataItem of countryData) {

    let country = countryDataItem.country;

​

    // Check if coordinates exist for the country

    if (coordinates[country]) {

      let x = coordinates[country].x;

      let y = coordinates[country].y;

​

      // Calculate the size of the circle based on the number of students

      let circleSize = map(countryDataItem.numStudents, 0, maxNumStudents, 25, 50);

      let alphaValue = 90; // Adjust the transparency level

      let dotColor = color(

        random(120, 255),

        random(140, 185),

        random(100, 190),

        alphaValue

      );

​

      fill(dotColor);

      noStroke();

      ellipse(x, y, circleSize, circleSize);

    }

  }

  textSize(11);

  textStyle(ITALIC);

  fill(0);

  text(

    "Total number of male and female undergrad international students in UAEU from Fall 2019 to Spring 2023",

    260,

    470

  );

  // Display country name and total number of students

  displayChangingText();

}

​

function startChangingText() {

  setInterval(() => {

    // Change the current country index and redraw

    countryIndex = (countryIndex + 1) % countryData.length;

  }, 2000); // Change the index every 2 seconds (adjust as needed)

}

​

function displayChangingText() {

  // Display the changing text at the top of the screen

  textStyle(BOLD);

  let currentCountry = countryData[countryIndex];

  let countryText = `${currentCountry.country} - Total Students: ${currentCountry.numStudents}`;

  fill(0); // Text color

  textSize(18);

  textAlign(CENTER, TOP);

  text(countryText, width / 2, 10); // Display text at the top

}

​

​