CS360 - A10 — VizHub

100%

CS360 - A10

✓ Published0🌍 Public

Last edited Apr 24, 2022

Created on Apr 24, 2022

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.

AI-generated description

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

81% 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…

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

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…

Module4

This example visualizes the top 50 Hollywood films released from 2007 to 2011, highlighting their production budgets in millions of dollars. The visualization uses a horizontal bar chart rendered in SVG, where each bar represents a film’s budget, sorted in descending order. The bars are styled in a muted rose color that darkens on hover, and the chart includes x- and y-axes, with film titles on the y-axis and budget values on the x-axis. Tooltips appear on hover, showing the film title and budget. The data is loaded from a CSV file and sorted numerically by budget to emphasize the highest-budget productions. The chart uses a light cream background with simple, clean typography, keeping the focus on the comparative lengths of the bars.

CClevejones

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

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

76% match

Loading thumbnail…

D3 in Action Chapter 5 - Example 10

This example visualizes box office data for six movies over ten days as a stacked bar chart. It uses D3.js version 3.5.5 with the `d3.layout.stack()` API to compute cumulative values from CSV data, and `d3.scale.linear()` for x, y, and height scaling. The chart renders as SVG with axis lines generated by `d3.svg.axis()`, where rectangular bars are colored using `d3.scale.category10` and positioned via the stacked layout's `y0` offsets.

RRoxIv

75% match