100%

Scatter Plot of Runtime vs. Ratings

✓ Published0🌍 Public

Last edited Oct 13, 2024

Created on Oct 13, 2024

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.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

Fork this viz
Modify it to show your data

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

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

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

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

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

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

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?

84% match

Loading thumbnail…

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

This scatter plot displays the top 250 IMDB movies, plotting release year on the x-axis against rating on the y-axis. Each point is colored by genre, using a d3.scaleOrdinal with the schemeCategory10 palette, and the top six genres are shown in a legend with others grouped as "Other." Built with React and D3 v7, the visualization loads data from a CSV file and renders circles with fixed radius and 70% opacity, using d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft for tick marks.

XXiaojun

81% match