Scatterplot

100%

✓ Published0🌍 Public

Last edited Apr 17, 2015

Created on Apr 17, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Module4

This example visualizes the top 50 Hollywood films released from 2007 to 2011, highlighting their production budgets in millions of dollars. The visualization uses a horizontal bar chart rendered in SVG, where each bar represents a film’s budget, sorted in descending order. The bars are styled in a muted rose color that darkens on hover, and the chart includes x- and y-axes, with film titles on the y-axis and budget values on the x-axis. Tooltips appear on hover, showing the film title and budget. The data is loaded from a CSV file and sorted numerically by budget to emphasize the highest-budget productions. The chart uses a light cream background with simple, clean typography, keeping the focus on the comparative lengths of the bars.

CClevejones

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

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

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

82% match

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

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

81% match

Loading thumbnail…

Adding Tooltips

This example uses D3 v3 to add interactive tooltips to a scatterplot of Hollywood films released between 2007 and 2011. Each circle encodes audience ratings on the x-axis, critic (Rotten Tomatoes) ratings on the y-axis, and budget by radius. Hovering over a circle triggers a div-based tooltip that displays the film’s title, genre, ratings, and budget. The tooltip follows the mouse, with fixed positioning to prevent clipping.

CClevejones

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

81% match