Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
XXiaojun
Last edited Oct 21, 2025
Created on Oct 21, 2025

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.

AI-generated description
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 5: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

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`.

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
94% 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
87% 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
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…

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
86% match
Loading thumbnail…

Week 10: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This histogram visualizes the distribution of movie runtimes for the top 250 IMDB movies, broken down by genre as a stacked bar chart. Using D3.js and React, the visualization filters the data to the six most common genres, categorizes all others as "Other," and bins runtimes into 10-minute intervals. Each bar segment is colored via `d3.scaleOrdinal` and `d3.schemeSet2`, with axes rendered by `d3.axisBottom` and `d3.axisLeft`. The chart reads from a CSV file containing movie metadata.

XXiaojun
86% match