Movie Ranks

100%

✓ Published1🌍 Public

Last edited Mar 5, 2022

Created on Mar 5, 2022

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

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

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

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

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

80% match

Loading thumbnail…

Marks and Channels

This example displays the top 5 movies by lifetime gross earnings as a horizontal bar chart, with each bar’s length encoding the numerical value. Built with React and D3 v5, it uses `d3.csv` to load the data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The SVG rectangles are rendered directly via React, with axes drawn using custom ticks and gridlines.

Ssumitradevipolina

79% match

Loading thumbnail…

3d Bar Chart

This example visualizes the lifetime gross earnings of the top 50 movies using a 3D bar chart, with each bar’s height representing earnings and its position on the x-axis corresponding to movie title. The bars are rendered as SVG polygons with front, top, and side faces, drawn in a perspective projection based on a configurable camera position. The implementation uses D3.js for scales, axes, and data binding, with custom functions like `perspective` and `bar3d` handling the 3D-to-2D projection and face generation. Bars are sorted by distance from the chart’s center to control overlap, and hover interactions change the fill color.

Ssumitradevipolina

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

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

76% match