Skip to main content
SimilarExport ZIP
100%

Week 5: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

✓ Published1🌍 Public
XXiaojun
Last edited Sep 29, 2025
Created on Sep 24, 2025

A bubble chart displays the IMDB Top 250 movies by release year on the x-axis and runtime in minutes on the y-axis, with circle size encoding ratings and color encoding genre. The visualization reveals trends in movie runtimes over time. Using D3.js v7 within a React app, the code loads data from a CSV, parses runtime strings, and applies scales for positioning, sizing, and coloring via `scaleLinear` and `scaleOrdinal`.

AI-generated description

Dataset: IMDB Top 250 Movies Dataset

Source URL: IMDB Top 250 Movies Dataset

Original Source URL:
IMDB List of Top 250 Movies

Description

IMDB (Internet Movie Database) is one of the largest online databases for movies and television shows, providing comprehensive information about movies, including ratings and reviews from its vast user base. IMDB ratings are widely used as a benchmark for the popularity and success of movies.

This dataset contains the Top 250 rated movies on IMDB as of 2021, offering a snapshot of the most popular and highly rated films. It includes details such as ranking, title, year of release, rating, genres, runtime, certification, budget, box office, casts, directors, writers, and taglines.

By analyzing this dataset, one can explore trends in cinema such as rating distributions, financial performance, dominant genres, and the influence of directors and actors on a movie’s success.

Attribute Types

  • rank: Quantitative (ordered)
  • name: Categorical
  • year: Ordinal
  • rating: Quantitative
  • genre: Categorical
  • certificate: Categorical
  • run_time: Quantitative (time duration)
  • tagline: Categorical
  • casts: Categorical
  • directors: Categorical
  • writers: Categorical
MIT Licensed

Similar vizzes

Loading thumbnail…

Week 6: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

This bubble chart displays IMDB’s top 250 movies, plotting each film’s release year against its runtime in minutes, with bubble size encoding rating and color representing the seven most common genres. The visualization uses D3 scales, including `scaleLinear` and `scaleOrdinal` with `schemeSet2` for categorical coloring. React manages the data-loading lifecycle, while D3’s `select` and `join` methods handle SVG rendering and updates. The chart includes labeled axes with formatted ticks, a legend, and a title, all positioned within configured margins.

XXiaojun
97% match
Loading thumbnail…

Week 9: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

This bubble chart displays the relationship between the release year and runtime of the top 250 IMDB movies, with each bubble’s size representing its rating and its color indicating a simplified genre. The visualization reveals a general trend of increasing movie runtimes over time. It uses a React frontend with d3.v7’s `scaleLinear`, `scaleOrdinal`, and `axisBottom` to map data. Data is preprocessed from a CSV file, with runtimes parsed from strings like “2h 22m” into minutes. The genre legend allows interactive highlighting, filtering bubbles by genre on click or hover.

XXiaojun
97% match
Loading thumbnail…

Fork of Week 6: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

A bubble chart maps the top 250 IMDB movies by release year (x-axis) and runtime in minutes (y-axis), with circle size encoding rating and color distinguishing simplified genres. The D3 v7 code uses a linear scale for axes and radius, an ordinal color scale from `schemeSet2`, and renders axes via `axisBottom` and `axisLeft`. Data is parsed from a CSV, with runtimes converted from strings like "2h 22m" to minutes. React manages the SVG lifecycle, passing filtered data to the `viz` function.

XXiaojun
95% match
Loading thumbnail…

Week 5: IMDB Top 250 Movies Histogram: Movie Runtime Distribution

This histogram visualizes the distribution of runtimes for IMDB's Top 250 movies, using 20-minute bins to show the frequency of films across different durations. The visualization is built with React and D3 v7, employing `select`, `scaleLinear`, `extent`, `max`, and `bin` from the D3 API to bin the data and map values to screen coordinates. It plots a green bar chart with labeled x-axis (run time in minutes) and y-axis (frequency), with axes rendered via `axisBottom` and `axisLeft`. The dataset, sourced from Kaggle's IMDB Top 250 Movies list, is parsed from CSV using a custom runtime parser to convert time strings to numeric minutes.

XXiaojun
89% match
Loading thumbnail…

Fork of Week 5: IMDB Top 250 Movies Bubble

This scatterplot visualizes IMDB’s Top 250 movies, plotting each film’s release year on the x-axis against its runtime in minutes on the y-axis. Circle size encodes the movie’s rating, while color distinguishes its primary genre. The visualization uses D3 v7 scales including `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for positioning, radius, and categorical coloring, with React managing the SVG lifecycle. Data is loaded from a CSV file and filtered to exclude missing values before rendering.

XXiaojun
88% match
Loading thumbnail…

ACT6_TASK4.2

This visualization displays movie runtime trends over time, with each bubble representing a film positioned by its release year and runtime in minutes, while the bubble size encodes its rating and the color indicates its simplified genre. The chart uses D3.js v7's `scaleLinear`, `scaleOrdinal`, and `schemeSet2` to map the data, and includes interactive legend items that highlight bubbles of a selected genre on click or hover. Data is loaded from a CSV file and preprocessed in React, with runtime strings converted to minutes and genres consolidated to the top seven categories.

RRevanth putta
87% match
Loading thumbnail…

Week 12: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

This scatter plot visualizes the relationship between IMDb ratings and runtimes for the top 250 movies, with each circle representing a film. A decade filter allows users to focus on specific time periods. The visualization uses a D3.js v7 `scaleLinear` for axes and `scaleOrdinal` with `schemeTableau10` for color-coding by simplified genre. Interactive tooltips display movie details on hover. The React app loads data from a CSV file, parses runtimes to minutes, and draws the plot using D3's `select` and `join` operations.

XXiaojun
87% match
Loading thumbnail…

Week 10: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

This scatter plot visualizes the relationship between IMDb ratings and runtime for the top 250 movies. Each circle represents a film, colored by its primary genre and positioned by rating on the x-axis and runtime in minutes on the y-axis, with a fixed radius of 5 pixels. Hovering reveals the movie title, director, and year. Created with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for genre colors, and a legend summarizing the seven most common genres. Data is preprocessed to parse runtime strings and simplify multi-genre entries.

XXiaojun
86% match