Bar Chart 2017 Box Office

100%

Bar Chart 2017 Box Office

✓ Published0🌍 Public

Last edited Sep 19, 2017

Created on Sep 11, 2017

This bar chart ranks the top 10 highest-grossing films worldwide in 2017, showing each movie’s total gross, its percentage of domestic box office revenue, and its studio. The visualization uses a custom layout with three columns: rank and title, a domestic share bar, and a total gross bar, all rendered as SVG. Data comes from BoxOfficeMojo, and the code uses d3.scaleLinear, d3.scaleBand, and d3.schemeDark2 for color encoding, built with d3.v4 and blockbuilder.org.

AI-generated description

Built with blockbuilder.org

This visualization is based on the 2017 highest grossing films in the international box office per BoxOfficeMojo.com. The raw data is availible at http://www.boxofficemojo.com/yearly/chart/?view2=worldwide&yr=2017&p=.htm

The visulaization was based on built with blockbuilder.org, and forked from David Beach's block on costliest earthquakes (4fb4f0f9c0c4802a2a87a12086f1d90a) as a starting template.

mit Licensed

Similar vizzes

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

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

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

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

76% match

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

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

75% match

Loading thumbnail…

Bar Chart with D3

This bar chart displays the most successful film distributors from 1995 to 2021, ranked by the number of top films each distributor released. The visualization uses D3.js (v7) to render SVG elements, with a linear scale mapping movie counts to horizontal bar lengths and a band scale positioning each distributor vertically. The code includes gridlines, axis labels, and value annotations generated through D3 selections and joins. Data is loaded from a CSV file via `d3.csv` and sorted in descending order before rendering. Tooltips and interactive features are not implemented.

OOlha

75% match

Loading thumbnail…

Top 10 highest grossing movies of all time

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.

MMihir Sawant

74% match