Skip to main content
SimilarExport ZIP
100%

Top 10 highest grossing movies of all time

✓ Published1🌍 Public
MMihir Sawant
Last edited Apr 8, 2019
Created on Sep 1, 2018
Forked from Making a Bar Chart

This bar chart displays the top 10 highest-grossing movies of all time, ranked by worldwide earnings in USD, with Avatar leading at over $2.7 billion. The visualization uses d3.csv to load movie data, then d3.scaleLinear and d3.scaleBand to map earnings and movie titles to the SVG canvas. Axes are generated with d3.axisLeft and d3.axisBottom, while bar widths reflect earnings via the x-scale. Data originates from Newsday’s box-office list, and the chart includes a legend clarifying that figures appear in billions.

AI-generated description

This bar graph shows the top 10 highest grossing movies of all time.

Source of the data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Top 10 highest grossing movies of all time

This bar chart visualizes the top 10 highest-grossing movies of all time, with earnings displayed in billions of USD and movie titles on the y-axis. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data from a CSV file to SVG rectangles. The chart loads data from a GitHub gist via `d3.csv`, formats the axis ticks with `formatPrefix` to abbreviate large numbers, and applies a blue fill to each bar.

RRamakanth771
84% match
Loading thumbnail…

Movie Ranks

This bar chart shows the top 50 highest-grossing movies by lifetime gross, with each bar representing a movie title ordered by rank. The chart uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file and processed using `d3.csv`, with ranks scaled to thousands. The visualization customizes axes with `axisLeft`, `axisBottom`, and custom tick formatting, and highlights the data with green rectangles.

SSharmilaChowdhari
76% match
Loading thumbnail…

Fork of Customizing Axes - Movie Grosses

This bar chart shows the top 10 highest-grossing movies worldwide as of January 2021, using data from Wikipedia’s list of highest-grossing films. Each bar is color-coded by release year, and the y-axis labels combine the year and movie title. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the axes and bars as SVG. It also customizes tick formatting to display box office values in billions of dollars, but the code does not include the y-axis call.

SShawn Duenas
74% match
Loading thumbnail…

Fork of Movie Ranks

This horizontal bar chart displays the top 50 highest-grossing films by lifetime gross revenue. Each bar’s length corresponds to the film’s rank, using a linear scale for the x-axis and a categorical band scale for the y-axis. The visualization is rendered as an SVG using D3 v5, with axes customized via `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file using `d3.csv`, and the chart includes a title and an x-axis label.

Ssumitradevipolina
73% match
Loading thumbnail…

CS360 - A10

This example shows the top ten highest-grossing domestic films from a dataset of 112 movies, sorted by lifetime gross, using a horizontal bar chart. The chart displays movie titles on the y-axis and gross revenue on the x-axis, with labeled axes and tick lines rendered in SVG. The visualization is built with D3 v7, using scales and axes like `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`. Data is loaded from a local CSV file into fixed-width bars, with WebGL mentioned in metadata but not used in the code.

Lleoframba
73% match
Loading thumbnail…

Highest Paid Celebrities

This horizontal bar chart ranks the world’s highest-paid celebrities of 2015 by earnings, with each bar colored in a muted rose tone. The visualization, rendered as an animated SVG using D3.js, sorts celebrities in descending order of income and animates the bars growing from left to right upon page load. The data comes from a Forbes dataset compiled by Clevejones and includes 40 celebrities across categories such as athletes, musicians, and actors. Hovering over a bar highlights it and reveals the exact earnings value, while the y-axis lists celebrity names and the x-axis shows earnings in millions of dollars. The title and subtitle emphasize the top earners, with Floyd Mayweather leading at $300 million.

CClevejones
68% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the lifetime gross earnings of ten popular movies, using D3.js within a React framework. The SVG-based visualization animates bars on hover, highlighting the selected movie and displaying the percentage divergence from others. The chart employs D3’s scaleBand, scaleLinear, axis functions, and transition effects for interactive feedback, with data hardcoded in JavaScript and styled via CSS.

Ssumitradevipolina
68% match
Loading thumbnail…

Bar Chart - Top 10 Highest Populated Countries

This bar chart shows the top 10 most populated countries, ranked by their GDP in USD. The visualization uses d3.csv to load world data from a remote GitHub-hosted CSV file, then sorts the data in descending order and selects the first ten entries. Rectangular bars are rendered in SVG, with d3.scaleBand and d3.scaleLinear mapping countries and GDP values to x and y positions. The code adds rotated x-axis labels for readability and applies d3.axisBottom and d3.axisLeft for the chart's axes.

VVishnu Sudireddy
68% match