Fork of Customizing Axes

100%

Fork of Customizing Axes - Movie Grosses

✓ Published1🌍 Public

Last edited Feb 1, 2021

Created on Jan 28, 2021

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.

AI-generated description

This bar chart shows global box office grosses of the top 10 highest grossing movies as of January 2021. The data comes from Wikipedia estimate in List of highest-grossing films. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

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…

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

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

80% 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 Fork of Fork of Bar Chart + Axis customisation

The visualization displays a horizontal bar chart comparing movie budgets, sorted by film title, with custom axes and a gradient fill ranging from green to orange. It uses d3.csv to load budget data, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate values (e.g., "45M"). A rotated y-axis label and a blue title are added via SVG text elements. The code customizes axis appearance by removing domain and tick lines, and applies gradients through SVG defs.

Ggaddamthanmayeereddy759@gmail.com

78% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3_Ramakanth

This visualization displays the top 10 highest-grossing movies in USD as a horizontal bar chart, with movie titles on the y-axis and weekend gross earnings on the x-axis. The React app fetches CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` to map film names and gross values, and renders SVG rectangles for bars with tick lines and labels. It relies on React's `useState` and `useEffect` hooks to load and sort the data, while D3 v5 handles the scales and chart layout.

Vvegurusaiprathyusha

77% match

Loading thumbnail…

Fork of Bar Chart - ICE 6

This horizontal bar chart displays movie budgets in millions of dollars, with each bar’s length encoding the budget value and the y-axis listing movie titles. It uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft/d3.axisBottom for axes. The SVG rendering applies a linear gradient fill to bars and red axis labels. The chart is built with D3 v6 and includes a formatted x-axis tick label that abbreviates large numbers with a "B" suffix.

Aarchanagoli@my.unt.edu

76% match

Loading thumbnail…

This bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization uses D3 v5 with `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes. Data originates from a CSV file, rendered as SVG rectangles with custom tick formatting that converts billions to "B" notation.

WWaffleSlayer69

75% match