Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
XXiaojun
Last edited Nov 1, 2025
Created on Nov 1, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

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

This interactive scatter plot visualizes the relationship between release year and IMDb rating for the top 250 movies, with each point colored by genre using d3’s `scaleOrdinal` and `schemeCategory10`. A toggle button, implemented with React state, switches between the base view and an overlay showing average rating trends per genre across decades, which reduces point opacity to 0.2. The visualization is built with React and D3 v7, loading data from a CSV file, and includes axes rendered with `axisBottom` and `axisLeft`.

XXiaojun
92% match
Loading thumbnail…

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

This scatter plot visualizes the top 250 IMDB movies, plotting each film’s release year against its rating. The chart uses D3 v7 scales and SVG circles, with colors encoding the primary genre. Hovering over the legend highlights films of that genre by adjusting circle opacity. Data is loaded from a CSV and processed in React, with axes rendered via D3’s axisBottom and axisLeft.

XXiaojun
91% 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
91% match