For this week’s assignment, we were tasked with either making some sort of data visualization, or creating a generative text output. I decided to make a visualization of the population of some of the major cities of the UAE on a map of the country.
I started by retrieving a map of UAE from Google Images, uploading it to my sketch, then loading it in the setup and resizing it to fit my canvas. To obtain the canvas coordinates of each city I used the following function to print mouse location to the console (which I commented out in the final sketch):
print(mouseX, mouseY);
Afterwards, I used ChatGPT to obtain an estimate of each city’s population (to save time) along with the coordinates I obtained earlier to create an array with each city’s position and population:
let cities = [
{ name: "Abu Dhabi", x: 440, y: 240, population: "1,480,000" },
{ name: "Al Ain", x: 625, y: 285, population: "656,000" },
{ name: "Madinat Zayed", x: 333, y: 335, population: "10,000" },
{ name: "Dubai", x: 575, y: 150, population: "3,380,000" },
{ name: "Sharjah", x: 600, y: 135, population: "1,400,000" },
{ name: "Khor Fakkan", x: 730, y: 140, population: "33,575" },
{ name: "Ajman", x: 610, y: 130, population: "500,000" },
{ name: "Fujairah", x: 720, y: 170, population: "230,000" },
{ name: "Dibba Al Hisn", x: 720, y: 105, population: "26,395" },
{ name: "Umm Al Quwain", x: 620, y: 115, population: "80,000" },
{ name: "Ras Al Khaimah", x: 670, y: 85, population: "350,000" },
{ name: "Ar Rams", x: 690, y: 70, population: "16,000" }
];
Instead of a traditional for loop, I used a forEach loop that I had seen online to draw a point for each location in the array and display the population when the user’s mouse hovers on each point, and this was my final result:
Looking to the future, I guess I could use a better map and add more cities with more accurate population estimates.