This week, we learned about text and data visualization. I wanted to create my data visualization around Marvel movies and their Rotten Tomatoes scores based on the year they were released. At first, I was planning to create a fashion-themed data visualization, but I could not find the data I needed, so I decided to move on to movies, specifically Marvel movies. My initial idea was to use different tomato sizes to display the Rotten Tomatoes scores of Marvel movies across different years. At first, my tomatoes were all displayed in a line, but I later decided to arrange them in a more random-looking way so the visualization would be more visually interesting.
Concept
My concept is to visualize Marvel movies using tomatoes, with each tomato representing a different movie. The tomatoes are placed along a timeline from 2008 to 2024 based on the movie’s release year. Each tomato’s size represents its Rotten Tomatoes critics score, so movies with higher scores have larger tomatoes. I looped through each movie in the CSV file and used the movie’s data to determine the tomato’s position and size. I also used different rows to organize the tomatoes and make the visualization easier to read. My goal is to create a simple and visual way to see how Marvel movies have been rated over time.
I first used the shapes and text that we learned in Lesson One to create the Marvel sign at the top and the timeline at the bottom. I then created a class for the tomatoes so that instead of using simple circles, the tomatoes appear on the canvas to represent the Rotten Tomatoes ratings.
After that, I uploaded my data in the form of a CSV file. When editing the data, I chose to include only three pieces of information: the movie name, the release year, and the Rotten Tomatoes score. The image below shows a snippet of the data:
Then I used let numRows = marvel.getRowCount (), which allows me to count how many rows or movies are in my CSV file. I then collected the release dates and Rotten Tomatoes scores from the CSV. I also used the Float function, which changes the values into numbers so JavaScript can use them for calculations. I then used the minimum and maximum Rotten Tomatoes scores to determine the size of each tomato. Finally, I used the movie’s release year to position each tomato along the timeline and created different rows so the tomatoes would not all overlap.
The code I was most proud of was
let x = map(year, 2008, 2024, 50, width - 50);
let size = map(rottenTomatoes[i], rottenMIN, rottenMAX, 10, 80);
I was proud of this code because I was able to use the data from my CSV file to map out the tomatoes visually. The first line uses the movie’s release year to decide where the tomato should be placed on the timeline. The map function takes the years from 2008 to 2024 and changes them to fit across the width of my canvas, from 50 pixels to width -50. This means that movies released earlier are placed closer to the left side of the timeline, while movies released later are placed closer to the right side.
The second line uses the Rotten Tomatoes score to decide the size of each tomato. It takes the lowest and highest Rotten Tomatoes scores in my data and maps them to tomato sizes between 10 and 80. This means that a movie with a lower score will have a smaller tomato, while a movie with a higher score will have a larger tomato. I was proud of this because I was able to take actual data and turn it into visual elements, rather than just displaying the numbers as text.
Reflection
For next time, I would like to make my visualization more interactive by having the name of the movie appear when I hover over each tomato. I think this would make the data easier to understand because the viewer could see the Rotten Tomatoes score through the size of the tomato while also being able to identify the movie. One part of my code that I found difficult to understand was how the tomatoes could be placed into different rows. In particular, I did not fully understand the code :
for (let i = 0; i < numRows; i++) {
let year = int(releaseDate[i].substring(0, 4));
and how the I was used to change each tomato’s position. I used AI to help me understand this part of the code and fix it, since the tomatoes originally appeared in a straight line and then moved randomly. In the future, I want to be able to understand and create this type of code more independently instead of relying on AI when I get stuck.
Reflection – Trying to embed the mouse press on names
I wanted to try and make the mouse press work so that when I clicked on one of the tomatoes, the name of the movie would appear. I first tried using mousePressed() to display a movie’s name when I clicked on its tomato, but I couldn’t get it working. I was confused about how to connect the mouse position to a specific tomato and its corresponding row in the CSV.
I used AI to help me understand how dist could check whether the mouse was close to a tomato’s centre and how getString could retrieve its movie title. My attempt used “Movie” as the column name, although the actual column was called “Title”.
Although I tried adjusting the code, the click interaction still did not work as intended. I later changed to a hover interaction that displays the movie title in a fixed position.
In response to the feedback, I worked on correcting the error and making the connection between each tomato and its movie clearer. I first increased the canvas from 600 × 600 to 800 × 700 pixels because the original layout felt too crowded. I then adjusted the text positions and added a description to help viewers understand the visualization and how to interact with it.
The old layout :
I added a hover interaction so viewers could identify the movie represented by each tomato. Initially, the movie titles appeared near the tomatoes, but some of the text overlapped with other elements and made the visualization harder to read. I changed the label from a position based on the tomato’s x and y coordinates to a fixed position. Now, hovering over a tomato displays its movie title in the same area of the canvas. I also changed the label to red and increased its text size to 20.
Texts overlapping :
These edits helped me think about how the layout supports the information being presented. The tomatoes communicate the scores visually, while the movie titles help viewers identify the individual films. Giving the title a consistent location makes the interaction easier to follow.
Current look of the data being represented:
AI description
I used ChatGPT to help me understand and debug the movie-title interaction. I was encountering errors and needed help connecting the titles in my dataset to the tomato objects. ChatGPT provided explanations and code examples, including a complete revised version of the two JavaScript files. The specific parts it helped me with were the data check, creating tomato objects with movie titles, and displaying a title when the mouse is near a tomato.
Specific code that AI was used for is the following. The first one was !marvel. I learned that this checks if the Marvel data is available. If it is not, return stops the rest of the draw function. This stops the code from trying to use data that is not there yet, but it does not fix a problem with loading the file.
if (!marvel) {
return;
The next code I learned was that this creates a tomato using the position, size, and movie name. The x and y decide where it goes, and size decides how big it is. The movieNames[i] gives it the name of the movie from that row in my CSV. Then tomato.show() draws the tomato and checks if the mouse is over it.
This was where I had been getting an error because I was asking the code to show a movie name without having the data it in the tomato first. I needed to code the name into the file and store it as this.movieName so the code knew which name to show.
let tomato = new Tomato(x, y, size, movieNames[i]);
tomato.show();
Lastly, I learned that the dist function checks how far the mouse is from the middle of the tomato. If the distance is less than half its size, the movie name appears. I used fill to make the text red and textSize to make it bigger.
At first, the names appeared near the tomatoes, but they overlapped with other things on the canvas. I changed the position to (360, 190) so the names would appear in the same place and be easier to read. I also learned that pop brings back the drawing settings saved by push, so these changes do not affect the rest of my sketch.
if (dist(mouseX, mouseY, this.x, this.y) < this.size / 2) {
fill("#ff0000");
textSize(20);
text(this.movieName, 360, 190);
}
pop();
During the revision, I adjusted the canvas dimensions, text placement, and label appearance to make the visualization clearer.
Reference
