Week 4 – Data Visualization

For this assignment, I visualized the “Cost of Living 2017” dataset in a circular diagram. I thought circular diagram would look much neater and allows to visualize much more countries than other diagrams. Also, it showcases the extremes very well, allowing us to compare the most expensive and most affordable places to live in a single glance.

In my circular design, each country from the dataset finds its place along the perimeter. The distance from the center of the circle to each country is determined by its cost of living. So, the more expensive a country, the farther out from the center it appears. To keep things visually appealing, I also added dots and text labels to each country.

One of the trickier parts of this project was making sure that the dots and text labels rotated in sync. I also had to figure out how to represent each country’s cost of living accurately by adjusting the length of the lines connecting them to the center. I’m particularly proud of successfully aligning the rotation of text and dots. I think achieving this synchronization made the diagram more intuitive and easy to understand.

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

In the future works, I’d like to explore more creative ways to present data. I want to achieve a good balance between functionality and aesthetics, making the visualizations not only informative but also visually engaging and fun.