Week 4_Data Visualization

Concept

As a big movie lover, I decided to visualize the popularity of movies released this year by creating a movie theater. I used worldwide box-office gross as a measure of popularity, with each audience member representing a fixed amount of revenue. Therefore, the higher the movie’s gross, the larger the audience in the theater.

Progress

I started by splitting the data into the movie name and its gross revenue, then adding them to the movies array I created. After that, I began working on the visuals, such as the seats and projector. I also added yellow light coming from the projector to make it more cinematic. I then created the circles that represent the audience and had them spawn on random seats. I did not want the audience to look too messy, so I used specific Y-coordinates that are chosen randomly, which keeps the circles organized while still making their positions feel random.

To make it easier to distinguish the large number of audience members, I also changed the color range of the circles instead of having them all be the same color. Finally, I calculated the number of circles based on each movie’s gross revenue by dividing it by 10 million. I felt that this was a reasonable scale because it allowed the differences in revenue to be visible without creating an overwhelming number of circles.

My Code Highlight

What I am most proud of is the interactive part of the project. It was a bit tricky, especially figuring out the calculations and making the number of audience circles change depending on which movie is selected. I used conditions based on where the mouse was clicked to determine which movie was selected. To make the interaction more obvious, I also changed the button color when it was clicked so it is clear which movie is currently selected.

One cool thing I learned was how to add my own font. I had to add the font link to the index.html file, and then I was able to use the font in my p5.js project.

//////CHANGE NUMBER OF AUDIENCE WHEN CLICKING ON A MOVIE//////
function mouseClicked() {
  for (let i = 0; i < movies.length; i++) {
    let x;
    let y;

    if (i < 3) {
      x = 45 + i * 185;
      y = 40;
    } else {
      x = 140 + (i - 3) * 185;
      y = 140;
    }
    if (mouseX > x && mouseX < x + 140 && mouseY > y && mouseY < y + 70) {
      selectedMovie = i;
/////RESET CIRCLES AND DRAW NEW ONES WHEN CLICKING ON A MOVIE//////
audience = [];
drawAudience();
    }
  }
}

Reflection

I’m really proud of this project, and I think I utilized the things I learned in a good way. If I were to improve it in the future, I would spend more time making the visuals more detailed, such as adding more realistic theater elements and improving the layout and typography. I would also like to give the user more options, such as adding more movies to choose from or allowing them to interact with the audience in different ways.