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

100%

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

✓ Published1🌍 Public

Last edited Oct 31, 2025

Created on Oct 31, 2025

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

97% 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

95% 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

94% match

Loading thumbnail…

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

A scatter plot displays the IMDB top 250 movies' ratings against their runtimes, with each point colored by its simplified genre. A dropdown filter allows viewing movies from a specific decade. The visualization uses D3 version 7 to project the data, with scales created via `scaleLinear`, a color mapping via `scaleOrdinal` and `schemeTableau10`, and axes rendered through `axisBottom` and `axisLeft`. The code processes movie data from a CSV file, including a custom genre preprocessing step, before rendering circles with hover tooltips that display the film's title, director, and release year.

XXiaojun

93% match

Loading thumbnail…

My suggestion to IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

This scatter plot visualizes the relationship between IMDb ratings and runtimes for top 250 movies, with circles colored by genre. A dropdown filter allows users to view movies by decade, and dashed regression lines show rating-runtime trends per genre. The visualization uses React with D3.js v7, leveraging `scaleLinear` for axes, `scaleOrdinal` with `schemeTableau10` for genre colors, and includes zoom/pan interactions via D3’s `zoom` identity transforms. Data is loaded from a CSV file and preprocessed to parse runtimes and simplify genres.

BBismark Kofi Owusu Sarfo

92% 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…

Scatter Plot of Runtime vs. Ratings

This scatter plot visualizes the relationship between movie runtime and IMDB ratings for the top 1000 movies in the provided dataset. Each point represents a film, colored by its primary genre, with a legend and dropdown filter for interactive genre selection. Hovering over a point reveals a tooltip showing title, runtime, rating, and director. The visualization is built using D3.js, employing `scaleLinear`, `scaleOrdinal`, `schemePastel1`, `axisLeft`, and `axisBottom` to create the chart, axes, and color encoding.

RRuba Khan

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

87% match