Luke Nguyen – Assignment 4 – Top 20 Movies of 2023

I went to the cinema a lot so I was fascinated about the box office of the movies released in 2023 (mainstream movies only as their box offices are always reported with accurate data from cinemas). I wanted to make a data visualization of the top box office of movies released last year. I searched on Kaggle and came across a CSV files compiling the US Domestic box office of top 200 movies in 2023 (https://www.kaggle.com/datasets/mohammadrizwansajjad/top-200-movies-of-2023). I edited the dataset a little bit, removing unnecessary data columns and reducing the dataset down to 20 to reflect the top 20 movies with the highest box office. The chart displays the movies’ box offices as well as the month they were released while also vertically ranking them according the box offices.

Snippets of code:

//Retrieving data from the table
  let Month = movies.getColumn("Release Date");
  let Name = movies.getColumn("Title");
  let Rank = movies.getColumn("Rank");
  let Boxoffice = movies.getColumn("Total Gross");

  for (let i = 0; i < img.length; i++) {
    // split data into string
    let splitString = split(Month[i], "/");

    //     displaying data
    image(
      img[i],
      12.5 + ((int(splitString[0]) - 1) * (width - 20)) / 12,
      map(Rank[i], 1, 22, 50, height - 20),
      53,
      23
    );
  }

Embedded Sketch (hover mouse diagonally to see all box offices):

The chart essentially displays the movies’ logos according to their box offices using the Map function. We can eyeball and compare one movie’s box office with another’s. The hardest part is to figure out the placements of the movies’ logos. But more importantly, it is also about extracting the data from the dataset and come up with a way to graph them.

For future improvement, I want to come up with a way to display the movies’ logos in a more visible manner. As of now, because of the size of the chart, the logos are pretty small and the accompanying hover number for the box offices are also small. I also want to display the box office number separately as well, i.e. it only shows when the mouse hover on the image. The challenge here is to figure out the coordinate of mouseX and mouseY.