Skip to main content
100%

Movie Gross by Rating

✓ Published0🌍 Public
Aadamfknapp
Last edited Oct 24, 2017
Created on Oct 24, 2017

A donut chart displays total gross box office revenue for 4,000+ U.S. movies, segmented by MPAA rating (G, PG, PG-13, R) from a Kaggle IMDB dataset. The visualization uses D3.js v4’s `d3.pie()` and `d3.arc()` to compute and render SVG arc paths, with a categorical `d3.scaleOrdinal` color scale mapping ratings to `d3.schemeCategory10`. A legend, generated via the d3-legend library’s `d3.legendColor`, identifies each rating. The chart is sized to 960×500 pixels, with a right margin reserving space for the legend.

AI-generated description

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

This data was scrapped from IMDB and compiled by Kaggle.com . The data is availible at https://www.kaggle.com/deepmatrix/imdb-5000-movie-dataset/data

This dataset shows information on Movies from the United States

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/74005576875677d78d73687e46fae030'>Pie Chart</a>

forked from <a href='http://bl.ocks.org/adamfknapp/'>adamfknapp</a>'s block: <a href='http://bl.ocks.org/adamfknapp/bdddee55814d2d528f0bf0fc0f33b2b4'>gross by rating</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Movie Gross by Rating

A pie chart shows the total gross box office revenue for movies grouped by MPAA rating (G, PG, PG-13, and R) from a Kaggle dataset of US films. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate slices, with an ordinal color scale (`d3.scaleOrdinal`) and the `d3.legendColor` API for a circular legend. Data is loaded from a CSV file via `d3.csv`, and the chart renders as SVG with a large right margin reserved for the legend.

Aadamfknapp
92% 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
78% 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
76% match
Loading thumbnail…

Pie chart

This pie chart visualizes the rating distribution for Action genre movies, with five rating categories from "below 5.0" to "above 8.5". The chart is rendered as an SVG using D3.js v7, with arcs generated by the `d3.arc` and `d3.pie` APIs. Data is loaded from a CSV file via `d3.csv`, filtered, and then mapped to a categorical color scheme using `d3.scaleOrdinal` and `d3.schemeCategory10`. A legend lists each rating bracket next to its corresponding color.

DDouglas mochama
74% match
Loading thumbnail…

fresh block

A scatterplot shows movie budget versus gross earnings, with each circle’s size scaled to gross and color-coded by MPAA rating. The chart uses D3 v3 with SVG rendering, a categorical color scale for ratings, and a square-root size scale for gross. Hovering reveals a tooltip via d3-tip, while axes and legends are drawn with d3.svg.axis. Data is loaded from a TSV file containing movie titles, ratings, budgets, and grosses.

MMrajyalakshmi
73% match
Loading thumbnail…

Pie Chart

This donut chart visualizes the number of movies by country from the TMDB 5000 Movie Dataset. Each slice represents a country, with its arc length proportional to the movie count. Countries with more than 50 movies are highlighted individually, while all others are grouped into an "Other" category, making the visualization easier to read. Hovering over a slice reveals a tooltip with the exact movie count. The chart is rendered as an SVG using D3 v4, with a color legend to identify countries, and the data was preprocessed with Python before being loaded from a JSON file.

Aanqi-lu
73% match
Loading thumbnail…

IMDb Movie ratings

This visualization displays the distribution of IMDb movie ratings across different genres using a horizontal stacked bar chart. The chart shows the proportion of movies falling into five rating categories, from "below 5.0" to "above 8.5," for genres including Documentary, Drama, Comedy, Romance, Animation, and Action. The implementation leverages D3.js v7, loading data from a local CSV file, and uses functions such as `d3.stack()` for data transformation, `d3.scaleLinear()` and `d3.scaleBand()` for axis scaling, and `d3.axisBottom()` for rendering. Interactive mouseover events display tooltips with exact percentages.

Vvineelaramulapalli32
72% match
Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses d3.stack to compute the stacked segments and d3.scaleOrdinal with a custom color palette to differentiate rating levels. Hovering over a segment triggers a tooltip displaying the exact percentage for that rating category within the genre. The chart renders as SVG with axes created using d3.axisBottom and d3.axisLeft, reading data from an external CSV file.

JJagadeshwar Reddy. Chilakamarri
72% match