let textRotation = 0;

​

function preload() {

  data = loadStrings("dataset.csv");

}

​

function setup() {

  createCanvas(750, 600);

  background("#f0f0f0");

  fill("#333"); 

  // title for the diagram

  textSize(50);

  text("Cost of living", width/2, height/5);

  text("2017", width/2 + 120, height/5 +70);

  // customize the text to use later

  textAlign(CENTER, CENTER);

  textSize(5); 

​

  // Calculate the center of the diagram

  const centerX = width / 3; 

  const centerY = height / 2;

​

  // Calculate the rotation angle based on the length of the data

  const angleIncrement = 360 / (data.length - 2);

​

  // Define a scaling to make the diagram bigger

  const scaleFactor = 2;

​

  // Get the rotated text and dots based on the CSV data

  for (let i = 1; i < data.length; i++) {

    const rowData = data[i].split(",");

    const countries = rowData[0]; // coutries

    const cost = parseFloat(rowData[1]); // parse the cost as a floating-point number

​

    // Calculate the rotation angle based on the index

    const rotationAngle = radians(textRotation + i * angleIncrement);

​

    // Calculate the radius based on the cost and scaling 

    const radius = cost * scaleFactor;

​

    const x = centerX + radius * cos(rotationAngle);

    const y = centerY + radius * sin(rotationAngle);

​

    // Draw a line from the center to the dot

    stroke("#FF5733");

    line(centerX, centerY, x, y);

​

    // Display the dot with the same rotation angle

    push();

    translate(x, y);

    rotate(rotationAngle);

    noStroke();

    fill("#FF5733"); 

    ellipse(0, 0, 4, 4); 

    pop();

​

    // Display the rotated text of countries next to the dot

    push();

    translate(x, y);

    rotate(rotationAngle); // apply the same rotation to the countries

    noStroke();

    text(countries, 20, 0); // display the countries

    pop();

  }

​

  textRotation += 1; // increment the rotation angle

}

​

​