D3 Scatter Plot of Top 5000 TMDB Movies showing Runtime(X) vs. Budget(Y)

100%

D3 Scatter Plot of Top 5000 TMDB Movies showing Runtime(X) vs. Budget(Y)

✓ Published2🌍 Public

Last edited Sep 15, 2021

Created on Sep 15, 2021

This scatter plot visualizes the relationship between runtime and budget for the top 5000 TMDB movies, sourced from a CSV file loaded via the `d3.csv` API. Each circle represents a movie, with its x-position mapped to runtime and y-position to budget, using `d3.scaleLinear` and `d3.extent` to compute scales. The SVG rendering uses `d3.select` to append the chart, along with `d3.axisLeft` and `d3.axisBottom` for axes. The plot fills the browser window, with axis tick labels sized at 24 pixels for readability.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Top 5000 TMDB Movies.

MIT Licensed

Similar vizzes

Loading thumbnail…

Improved D3 Scatter Plot of Top 5000 TMDB Movies showing Runtime(X) vs. Budget(Y)

This D3 v6 scatter plot visualizes the top 5000 TMDB movies, comparing runtime on the x-axis against budget on the y-axis using SVG circles. It uses `d3.scaleLinear` for both axes and `d3.scaleSequential` with the PuRd interpolator to color the semi-transparent points, revealing density where overlapping data occurs. The axes are generated with `axisLeft` and `axisBottom`, with margins adjusted to display full y-axis values. Data is loaded as CSV and parsed with numeric runtime and budget values.

TT-Reiser

95% match

Loading thumbnail…

Scatter Plot with Menus of Top 5000 TMDB Movies showing various correlations

This interactive scatter plot visualizes correlations among the top 5,000 TMDB movies, with dropdown menus letting users select budget, popularity, revenue, runtime, or vote average for either axis. Semi-transparent, colored circles reveal overlapping data points and density clusters. D3 v6 handles the scalable axes, animated transitions, and menu-driven updates, while SVG renders the chart.

TT-Reiser

83% match

Loading thumbnail…

Document

This visualization presents a multi-panel exploration of the TMDB 5000 movie dataset using D3 v5, rendered as SVG with animated transitions. It combines three coordinated chart types: a scatter plot comparing budget and popularity, a bar chart for average vote versus vote count, and a time series showing release date versus runtime. The time plot includes an overlaid line chart showing the count of movies per year, along with animated circles that draw the data points sequentially. The visualizations are linked so that interacting with one plot updates the others, enabling cross-filtering of the dataset. The layout divides the available width and height into quadrants, with the time plot spanning the bottom half and the scatter and bar charts sharing the top half. The design uses a minimal black-and-white aesthetic with white axes, labels, and strokes on a transparent background.

AAlexDaGr8

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

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

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

77% match

Loading thumbnail…

ml

This animated scatter plot visualizes the movies dataset, mapping budget and runtime of films as steelblue circles with axes. It uses the reusable chart pattern from Mike Bostock, implemented with D3 v7, to cycle the x-axis between budget and runtime every two seconds using `setInterval`, demonstrating `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft`. The data loads from a remote CSV via `d3.csv`, and the SVG remains responsive by filling the window dimensions.

TTarun Kumar Bosupally

76% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, comparing three variables—budget, gross revenue, and IMDB score—through user-selectable dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as animated SVG circles. Each axis is controlled via a dropdown menu, and points transition smoothly into position over one second, with axis labels and tick marks generated dynamically. The data is sourced from a local CSV file.

Ssourcebox-bug

76% match