Skip to main content
SimilarExport ZIP
100%

ml

✓ Published0🌍 Public
TTarun Kumar Bosupally
Last edited Mar 28, 2024
Created on Mar 28, 2024

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes movie budgets against domestic gross earnings, with each circle representing a film. The chart uses D3 v6 to load CSV data and render SVG circles, with linear scales mapping budget to the x-axis and domestic gross to the y-axis. The code includes axis labels in red, a title, and interactive margins. D3’s `d3.csv` and `d3.autoType` handle data parsing, while `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` construct the visualization.

Mmadipadiga.raviteja@gmail.com
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
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
77% match
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
77% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between movie budget and domestic gross revenue, with each point representing a film. The visualization uses D3 v6 to load CSV data from a GitHub gist, scales the two variables linearly, and renders circles as SVG dots. The chart includes labeled axes, a centered title, and resizes dynamically to fit the browser window, with red axis labels and steelblue data points.

Mmadipadiga.raviteja@gmail.com
77% 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
76% 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
76% 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
76% match