Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TT-Reiser
Last edited Sep 28, 2021
Created on Sep 28, 2021

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.

AI-generated description

An improved implementation of a D3 scatter plot. Shows the Top 5000 TMDB Movies.

This revision pushed the margins out to allow for the full y-axis values to be viewed, and also labeled the axes better. The main addition in this improvment however, is the addition of more transparent scatter points that have also been colored. This was a suggestion made by someone in the class a while ago, and allows the reader to see overlapping dots and the density of where many movies runtimes are layed out. This provides more information to the reader and is more pleasing to look at. I originally looked to reduce the circle radius, to allow the middle to look less congested, however the smaller dots are harder to read.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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
84% 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
80% match
Loading thumbnail…

D3 Starter Updating scatter plot

This example demonstrates how to build an updating scatter plot with D3 v5, visualizing the budget and revenue of the top 100 films by budget from 2000–2009. The plot uses `d3.csv` to load movie data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks, with circles representing each film. Axes include formatted tick labels and dashed gridlines. Hovering over a point changes its fill to red, though no tooltip is implemented. The visualization is rendered as SVG within a container, styled via an external CSS file.

Mmaxthamt
78% 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
78% match
Loading thumbnail…

D3 Starter Updating scatter plot + Interaction

This interactive scatter plot displays movie budgets against revenue, with buttons to switch between revenue, budget, and popularity metrics, updating the top 100 films via a general update pattern. Built with D3 v5, it uses `d3.scaleLinear`, `transition`, and `d3.selectAll` to animate SVG circles and axes. Tooltips appear on mouseover, showing film details via `d3.event` and HTML manipulation. The dataset from 2000–2009 is filtered and sorted in JavaScript, with axes formatted using `d3.format`.

Mmaxthamt
78% match
Loading thumbnail…

D3 Starter Updating only scatter plot

A scatter plot displays movie budget against a selectable metric (revenue, release year, or popularity) for roughly 100 top-budgeted films from 2000-2009. Buttons change the y-axis metric, triggering an animated transition that updates the circles' positions and the axis. The visualization uses D3 v5, with `d3.transition` for smooth updates, `d3.scaleLinear` for axes, and `d3.event` for tooltip positioning. Hovering over a dot reveals a detailed tooltip with title, tagline, and financial and rating statistics.

Mmaxthamt
78% match
Loading thumbnail…

scatter plot v1

This scatter plot v1 example visualizes movie data from a CSV file, plotting each film’s budget against its gross earnings. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are colored steelblue via CSS. The code loads data with `d3.csv`, converts population values, and renders axes using `axisLeft` and `axisBottom`. The dataset originates from a movie ratings source.

Yyqinolive
77% match