Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TT-Reiser
Last edited Dec 8, 2021
Created on Oct 6, 2021

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.

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…

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

Scatter Plot with Menus

A scatter plot visualizes movie data from the UCI Machine Learning Repository, displaying budget, gross revenue, and IMDb scores. Two dropdown menus allow the user to select which columns map to the X and Y axes. Built with D3.js v5, the visualization uses SVG rendering with animated transitions as circles move between positions. The code implements custom dropdownMenu and scatterPlot modules, using d3.scaleLinear for axes and d3.extent for domain calculations.

Aaalejandroq
84% match
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
83% 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
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
82% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays movie ratings and attributes from a Movies Dataset, allowing users to explore relationships between continuous variables. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with the chart updating dynamically. The visualization uses React for state management and rendering, D3 v5 scaleLinear for axis scaling, and ReactDropdown for the menu controls. Data loads asynchronously via d3.csv, and circles render in SVG with built-in tooltips showing tick-formatted values on hover.

VVamsi Bhargav Sukamanchi
81% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let viewers select which data columns to display on the x- and y-axes. The visualization reads from a CSV file containing movie attributes like budget, gross, and IMDb score. The scatterPlot function creates linear scales, axes, and animated circles using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. A dropdownMenu module builds the select elements with d3 data joins. The circles transition over 2 seconds with staggered delays, showing how axis labels and data points update dynamically when menu options change.

AArikuzzaman Idrisy
80% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot explores relationships among movie budget, gross revenue, and IMDb scores using data loaded from a CSV file. Dropdown menus let users select which three measures to compare on the x-axis, y-axis, and color scale. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render animated SVG circles that transition from the chart’s center to their final positions. A modular `dropdownMenu` component and reusable `scatterPlot` function structure the code for maintainability.

Ddrmurugesh
80% match