Here is my final sketch:
Concept:
I really liked the map idea that we did in class, so I wanted to do something similar but on a smaller scale. I chose Abu Dhabi and decided that I wanted the map to show something useful, like public resources. I chose 10 police stations and plotted them on a map image I found on Google. The goal was too amek he map simple and interactive so that people could click on the locations and see the name and phone number of the station.
Code Highlight:
//draw popup if active
if (popup) {
drawPopup(); // it calls the function to draw the popup overlay and the text
}
}
function mousePressed() {
let clicked = false; // to track if the circle was clicked
for (let i = 0; i < stations.getRowCount(); i++) {
let x = stations.getNum(i, "X"); //to get the circle x
let y = stations.getNum(i, "Y"); //to get the circle y
let name = stations.getString(i, "Name"); //to get the station names
let phone = stations.getString(i, "Phone"); //to get the station phone numbers
//check if mouse is inside the circles
if (dist(mouseX, mouseY, x, y) < 10) {
popup = true; //show popup
popupText =
name +
"\nPhone: " +
phone +
"\n" +
"click anywhere on the outside to return to map"; //set popup text, with /n to set up the phone number on a new line underneath it, same with the insturctions to leave the popup
clicked = true; //mark that a circle was clicked
}
}
// If clicked outside any circle to hide the popup
if (!clicked) {
popup = false;
}
}
//to draw the popup with the info
function drawPopup() {
// Semi-transparent overlay
fill(0, 0, 0, 150); //transparent grey overlay for the background
rect(0, 0, width, height); //to cover the entire canvas
// White popup box
fill("white"); //color for box
rect(100, 150, 300, 150, 10); //rect in center with rounded corners
// Text inside box
fill(0); //black text
textFont(myFont); //outside font
textSize(18); //size
textAlign(CENTER, CENTER); //to center the text horziontally and vertically
text(popupText, width / 2, height / 2); //to display the popup text
}
The part of the code I’m particularly proud of is the interactive circles, where you click on the circle, and a pop-up box with information appears. I created a function called drawPopup() to organize my popup drawing code, where I call it manually when the popup boolean is true.
Reflection/future work:
I started this assignment using the same concept as the map visualization we did in class. In the class example, we used latitude and longitude values, which are good for geographic visualizations. But I changed the method to manual X/Y coordinates because I’m using a custom image map, so I needed precise visual placement instead of mathematical mapping. I manually assigned x and y coordinates for each police station and placed them into my Excel sheet, so that they would visually match their positions on my map. I also added interaction logic so users can click the circles to see information, which turns the project from a static visualization into something more interactive using the mousePressed() and dist() functions. I also added a grey transparent overlay behind the pop-up to make it clearer and easier to read.
I used ChatGPT mainly for debugging because I would make silly mistakes like writing CVS instead of CSV, and had a hard time finding the problem with why my sketch wouldn’t load. I also used ChatGPT because I added the title and instructions text and placed it in the middle, but every time I interacted with the circles, the text would be placed on the left of the canvas. So, ChatGPT said it was because of my textAlign(CENTER, CENTER); and it told me to set alignment only for the popup, and to reset it to LEFT, BASELINE before drawing any other text. That helped me better understand how the text-align feature worked as well. I also used a Google font for my text: https://fonts.google.com/selection
And I searched up on Google how to make a pop-up using a boolean, and I took inspiration from this sketch I found:
But overall, I mainly used the example we did in class and the lecture slides for reference. I also took some of the concepts from this week’s reading into consideration and provided clear instructions on how to manage the map. For future improvements, I would like to make my animations smoother and maybe add zooming or panning for better navigation on the map, but this assignment definitely helped me understand the different ways we can portray data.