Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Nov 18, 2025
Created on Nov 18, 2025

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.

AI-generated description

Movie Runtime vs Rating Visualization

An interactive scatter plot visualization showing the relationship between movie ratings and runtime, with regression lines for each genre and zoom/pan capabilities.

Features

  • Regression Lines: Linear regression lines for each genre showing trends
  • Zoom & Pan: Click and drag to pan, use scroll wheel to zoom in/out. Double-click to reset.
  • Genre Filtering: Click on legend items to filter by genre
  • Interactive Tooltips: Hover over data points to see movie details
  • Decade Filtering: Filter movies by decade using the dropdown

Controls

  • Pan: Click and drag on the chart area
  • Zoom: Use mouse wheel to zoom in and out
  • Reset: Double-click on the chart to reset zoom
  • Genre Filter: Click legend items to highlight specific genres
  • Decade Filter: Use dropdown in top-right to filter by decade
MIT Licensed

Similar vizzes

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

Week 10: IMDB Top 250 Movies Scatter Plot: Year VS Rating

This interactive scatter plot visualizes the relationship between release year and rating for the IMDB Top 250 movies, with each dot colored by primary genre. A toggle button switches between the standard scatter view and genre-specific average trend lines computed per decade. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for axes and color encoding, while the trend lines aggregate ratings by genre and decade. The chart updates dynamically through React state, recomputing scales and rendering with D3 selections.

XXiaojun
86% match
Loading thumbnail…

Movie Stats Scatter Plot

This interactive scatter plot maps movie runtime against rating, with each point representing a film. Genre filter checkboxes let users toggle visibility of specific categories, dynamically updating the visualization. Built with React and D3 v7, the visualization uses D3 scales and axes to position points, while a bitstring tracks the active genre filters. The plot renders from an embedded CSV dataset containing movie metadata such as year, revenue, and metascore, with the React component orchestrating state changes as users interact with the checkboxes.

KKyle?
86% match