Scatter Plot

100%

✓ Published0🌍 Public

Last edited Jun 11, 2018

Created on Jun 11, 2018

This interactive scatter plot visualizes movie data, plotting IMDb ratings on the x-axis against production budgets on the y-axis, with each point sized by return on investment (ROI) and colored by genre. Built with D3 v4, the SVG chart includes labeled axes for Rating and Production Budget, and a color legend generated using the d3-legend library. Hovering over a circle changes its fill to pink and displays a tooltip with the exact values. The visualization also includes a bold title and animated transitions, with data sourced from a Gist by alvarorueda89 and styled using the Open Sans font.

AI-generated description

Part of the video course: D3.js in Motion.

An example scatter plot with color legend using D3 and d3-legend.

This scatter plot shows the dataset of nuclear bomb test history. Originally published at Johnston's Archive - Nuclear Weapons, this small dataset records every nuclear bomb tests from 1945 to 2009. The original dataset have 6 countries' each year nuclear test. The raw data is not well organized in CSV format. So I use Python with Pandas to parse it into a proper format. Each row of the table represents an country's nuclear bomb test counts for that year.

In this scatter plot, Y axis is the count of the nuclear bomb test and X axis is representing year. Each circle is represent that year's total test for one country. Each country has different color and hover on the circle will display the actual count number for the nuclear test.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a>

forked from <a href='http://bl.ocks.org/YouthBread/'>YouthBread</a>'s block: <a href='http://bl.ocks.org/YouthBread/6b406e4d96f23ce64c1f7cb745b0722a'>Scatter Plot</a>

forked from <a href='http://bl.ocks.org/happypills-12/'>happypills-12</a>'s block: <a href='http://bl.ocks.org/happypills-12/20ad2d6cf145f3cb45f372013320a3d2'>Scatter Plot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot_Group H

This scatter plot visualizes movie data, mapping IMDB rating on the x-axis and production budget on the y-axis. Each circle represents a movie, with its size encoding return on investment (ROI) and its color indicating genre (e.g., Action, Drama, Adventure) via a legend. Hovering over a circle highlights it in yellow and displays a tooltip with the movie name and ROI. The visualization uses D3 v4 with SVG rendering and smooth animations to support interactive exploration of the relationship between movie ratings, budgets, and profitability.

Aalvarorueda89

94% match

Loading thumbnail…

Scatter Plot

A scatter plot displays movie gross collections against budgets, with each point colored by MPAA rating and sized proportionally to gross earnings. The visualization uses D3 v3 with SVG rendering, including d3.svg.axis for axes, d3.scale.sqrt for point sizing, and d3.scale.category10 for color encoding. A d3-tip tooltip reveals movie title and gross on hover. Data originates from a tab-separated file listing movie attributes.

MMrajyalakshmi

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

86% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes movie success by plotting gross collections against budgets, with each point’s size encoding gross revenue and its color representing MPAA rating (PG, PG-13, R). The chart uses D3 v3 with SVG rendering, including linear scales for axes, a sqrt scale for point radii, and a category10 color scale for categorical ratings. Hovering a point reveals a tooltip built with d3.tip showing the movie title and gross earnings. Data is loaded from a local TSV file using d3.tsv.

MMrajyalakshmi

85% match

Loading thumbnail…

Data Viz 3 Group C

This interactive scatterplot visualizes the relationship between movie budget and revenue from a dataset of 15 films. Revenue is mapped to the x-axis, budget to the y-axis, with circle size encoding return on investment (ROI) and color distinguishing genre. Hovering over a circle enlarges it and displays a tooltip with the movie name, exact revenue, and budget. Clicking a genre in the legend filters the display to show only that genre; clicking again restores all genres. The plot includes axes labeled "Revenue in millions" and "Budget in millions" and uses an animated hover effect to enhance detail-on-demand exploration. Built with D3 v3 and blockbuilder.org.

Aannieypi

85% match

Loading thumbnail…

Scatterplot

This scatterplot visualizes the top 50 Hollywood films released from 2007 to 2011, plotting each film’s budget (in $m) on the x-axis against audience ratings (in %) on the y-axis. Built with D3 v3, the SVG-based chart animates the circles in a cascading sequence using staggered transitions, and includes hover interactions that display a tooltip with the film’s title, budget, and audience rating. Styling features a warm cream background, rose-colored circles that darken on hover, dashed axes, and percentage-formatted y-axis tick labels.

CClevejones

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

84% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot displays the relationship between a movie's gross earnings and its IMDb score, with each point representing a film. The data is loaded from a CSV file and rendered as an SVG scatterplot using D3 v4. The x-axis maps movie gross in dollars and the y-axis maps IMDb score, while the point color reflects movie color. The visualization demonstrates basic scatter plot construction, including axes, scales, and circle elements positioned based on parsed numeric values.

Aadamfknapp

83% match