Skip to main content
SimilarExport ZIP
100%

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

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

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.

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
95% 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
95% 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
94% 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
91% match
Loading thumbnail…

Fork of Week 10: 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 point colored by simplified genre. Hovering a circle reveals a tooltip showing the movie title, director, and release year. Built with React and D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal` with `schemeTableau10`, and `d3.axisBottom`/`axisLeft`. Runtime strings are parsed from "2h 22m" format into minutes, while genres are preprocessed into a simplified top-seven category before rendering.

Mmaneeshraja47@gmail.com
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
86% match
Loading thumbnail…

Fork of Week 11: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

This scatter plot visualizes the relationship between movie rating and runtime for the IMDB Top 250, with each point colored by genre. The chart uses a fixed y-axis from 0 to 240 minutes and encodes movie release year implicitly through static point size. Built with React and d3.v7, it leverages `scaleLinear`, `scaleOrdinal` with `schemeTableau10` for categorical colors, and `axisBottom`/`axisLeft` for axes. Hover interactions display a tooltip showing movie name, director, and year using D3's `.on('mouseover')` event handling.

XXiaojun
86% 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