Bubble Chart Experiment

100%

Bubble Chart Experiment

✓ Published0🌍 Public

Last edited Jul 1, 2017

Created on Jul 1, 2017

This bubble chart experiment visualizes 2017 box-office performance for the top 50 films, encoding domestic gross by circle area, Rotten Tomato ratings by color, and opening-weekend earnings by vertical position. Animated transitions compare each film's opening versus final box office totals, with circles drifting and scaling as the view toggles between metrics, using SVG and d3.v4 transitions to reveal studio dominance and the relationship between critic scores and revenue.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/f7a0e343d8fcb45f503edb3dcfb5eebe'>Gatesmoneybase</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/a5225ca2b59634d84d7f11a745dc8744'>BObyStudio</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes 2017 box-office earnings for the top 50 domestic films, encoding gross revenue as bubble area and critical reception (Rotten Tomatoes score) as color. Built with D3 v4, it renders as an animated SVG scatterplot: each bubble is positioned by release week, with size mapping to box-office take and hue indicating Tomatometer ratings. The chart animates on load, and the underlying data from bo2017c.csv is displayed via tooltips.

335degrees

94% match

Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes the 2017 domestic box-office performance of 65 films, mapping each movie as a circle positioned by release date (x-axis) and box office rank (y-axis). Circle size encodes total gross, while color distinguishes studio categories. Hovering or interacting triggers smooth SVG transitions, updating positions and sizes to reveal additional attributes such as runtime, theater count, or audience rating. The chart animates between these categorical views, with tooltips showing title, studio, gross, and opening weekend values. The visualization uses a force-directed layout to avoid overlaps and makes it easy to spot outliers and trends across the year's release schedule.

335degrees

93% match

Loading thumbnail…

Bubble Chart Experiment

This example visualizes the domestic box office performance of 2017 movies as an animated bubble chart. Bubbles are positioned by release week and opening gross, with size encoding total box office and color indicating studio/distributor. Built with D3 v4 and rendered as SVG, the chart animates transitions smoothly, letting viewers track how each film's earnings accumulate week over week. The dataset is drawn from a gist by 35degrees and derived from Box Office Mojo figures.

335degrees

92% match

Loading thumbnail…

Bubble Chart Experiment

This bubble chart experiment visualizes box office performance data for 2017 films, using SVG and animation to explore the relationship between release date, budget, and revenue. The chart displays circles of varying sizes representing each film's box office gross, with position encoding opening and closing dates along the x-axis. As the animation plays, bubbles are sorted by rank and gently transition horizontally, making it easy to compare the relative commercial success of different movies across categories like studio and distributor. The view is built with D3 v4 and rendered entirely in SVG, with smooth animated transitions that invite the user to explore the dataset dynamically.

335degrees

92% match

Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes 2017 box-office performance for 49 films, encoding each movie’s opening weekend gross (x-axis), total domestic gross (y-axis), and budget (bubble area). The dataset—sourced from a CSV of 2017 releases—includes studio, distributor, and revenue figures. Animated transitions let viewers compare how films like Wonder Woman and Kong: Skull Island cluster by performance metrics, with bubbles colored by studio and sized by box-office earnings. The chart uses SVG with D3 v4 transitions to smoothly re-position elements, making it easy to track individual movies across the field.

335degrees

91% match

Loading thumbnail…

Bubble Chart Experiment

This visualization uses a force-directed bubble chart to compare 2017 box-office performance across films. Bubbles are sized by total gross and colored by distributor; hovering reveals the title. The chart is built with D3 v4, renders in SVG, and animates the layout. Data is from the bo2017c.csv dataset, with circles positioned by the simulation and scaled by box-office revenue.

335degrees

91% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between movie budget, overseas earnings, and India gross collections, with each bubble representing a film and its size scaled by India gross. The chart uses D3.js v7 to render SVG circles with color mapping via `d3.scaleOrdinal` and `interpolateTurbo`, animating tooltips on hover. Axis scales are defined with `d3.scaleLinear`, and data is loaded from a CSV file. A legend identifies each movie by color.

BBhavyaMammai

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

76% match