🎬 Interactive Movie Visualization

Explore how IMDB ratings relate to box office performance across different movie genres. Select multiple genres, filter by year range, and compare different metrics.

📝 Assignment Report

Questions:

How does a movie's IMDB rating relate to its box office performance?

Which genres tend to perform better commercially or critically?

How does the number and quality of movies produced vary across different genres and time periods?

Design Rationale:

The visualization uses a multi-view approach to explore movie data from different perspectives:

  • Scatter Plot: Ratings vs Box Office Performance Scatter plot reveals the relationship between IMDB rating and a chosen financial variable (US Gross, Worldwide Gross, Budget etc.)
  • Timeline View: Genre Performance Over Time To reveal trends over time for each genre. Shows shifts in trends and correlations over time.
  • Genre Analysis: Comparative Bar Chart Comparative bar chart to directly compare genres across different aggregated metrics.

Interactive features like legend-based genre selection, year range filtering, and metric selection give users flexible control to explore the data from multiple angles. The color-coding by genre and consistent styling across views maintain visual coherence.

Development Process:

This project was built using Next.js 16 with TypeScript and Vega-Lite for visualization, because of previous experience with these technologies. The development involved:

  • Setting up the Next.js project with Tailwind CSS for styling
  • Creating dynamic Vega-Lite specifications that adapt based on user-selected tabs and metrics
  • Implementing interactive parameters for genre selection (via legend), year range filtering, and metric selection
  • Using Vega-Lite transforms for data aggregation, filtering, and dynamic field calculation
  • Configuring static export for deployment on GitLab Pages

It took around 10 hours to complete the project in total, including setup, coding, testing, and deployment and final testing phase.

The most time-consuming part was setting up gitlab ci/cd pipeline and figuring out how to publish to pages.

Data Source:

Vega Datasets - Movies Dataset (movies.json)
This dataset contains movie information including titles, genres, release dates, IMDB ratings, Rotten Tomatoes ratings, box office revenue, and production budgets.