Skip to main content
SimilarExport ZIP
100%

Stacked Bar Chart (ratings by genre)

✓ Published1🌍 Public
KKrishna.
Last edited Oct 30, 2025
Created on Oct 30, 2025

This example shows a 100% stacked bar chart of movie ratings (G, PG, PG-13, R) by genre, where each bar represents the proportion of ratings within a genre. The chart uses d3.csv with d3.autoType to load data, then normalizes counts to percentages and builds horizontal stacks via d3.scaleBand, d3.scaleLinear, and d3.stack. Rectangles are rendered in SVG with d3.select and .join, and axes are created with d3.axisBottom and d3.axisLeft, while a legend uses d3.scaleOrdinal for colors.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stacked Movie ratings

This stacked bar chart shows the percentage distribution of movie ratings across genres, with each bar segment representing a rating level from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked series, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for the y and x axes. Hovering over a segment triggers a tooltip displaying the precise percentage for that genre-rating combination. The chart is rendered as SVG using standard d3-selection methods, with data loaded from a CSV file containing proportional values that sum to 1 for each genre.

Rrushithareddyy
88% match
Loading thumbnail…

Tutorial2

This stacked bar chart shows the percentage distribution of five movie rating levels across six genres, revealing how genre impacts audience ratings. Each bar segment represents a rating category, with total percentage normalized to 100%. The visualization uses D3 v7 with SVG rendering and d3.stack() to create the stacked layout, d3.scaleOrdinal() for color mapping, and d3.scaleBand() for the categorical y-axis. Interactive tooltips appear on hover, displaying exact percentages via d3.select() and mouse event handlers. The data comes from a CSV file containing aggregated rating proportions for each genre.

Mmanohar varma
88% match
Loading thumbnail…

Tutorial-2

A stacked horizontal bar chart displays the percentage distribution of IMDb ratings across six movie genres, using five rating bands from below 5.0 to above 8.5. The chart uses `d3.stack` to compute the layered segments and `d3.scaleOrdinal` with a custom color palette for each band. `d3.scaleBand` positions the genres along the y-axis, while `d3.scaleLinear` maps percentages on the x-axis. Interactive tooltips appear on mouseover, showing the exact percentage for each genre-rating combination. Data comes from a CSV file loaded with D3 v7, rendered as SVG rectangles.

Gganeshrajuparmalla@my.unt.edu
87% match
Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of movie ratings across different genres, with each bar segment representing the percentage of a rating level within a genre. Hovering over a segment reveals the exact percentage via a tooltip. Built with D3 v7, the visualization uses `d3.stack()` to create the stacked layout, `d3.scaleLinear` and `d3.scaleBand` for axes, and an ordinal color scale for rating categories. Data is loaded from a CSV file using `d3.csv`.

Hharipriyaa07
87% match
Loading thumbnail…

Stacked Movie ratings

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” Hovering over a segment reveals the exact percentage of that rating level within the genre. The visualization uses d3.stack() to compute the stacked segments and d3.scaleBand for the categorical y-axis, rendering the result as SVG rectangles. Data is loaded from a CSV file, and tooltips provide precise values formatted with d3.format.

SSharankumar02
87% match
Loading thumbnail…

test

A stacked bar chart displays the percentage distribution of IMDb ratings across movie genres, showing how rating levels vary by genre. The chart uses a diverging color scheme and horizontal bars, with each genre represented as a segmented bar totaling 100%. Hovering over a segment reveals a tooltip with the exact percentage for that rating level. The visualization is built with D3.js v7, using `d3.stack()` for data stacking, `d3.scaleOrdinal()` for colors, and `d3.axisBottom()` for the percentage axis. Data comes from a CSV file processed with `d3.csv()`.

SSeema Shrestha
87% match
Loading thumbnail…

Act 6.2

This stacked bar chart shows the percentage distribution of movie rating levels across different genres, demonstrating how genre influences ratings. Each horizontal bar represents a genre, segmented into stacked rating categories totaling 100%. Hovering over a segment reveals the exact percentage for that rating within the genre via a tooltip. Built with d3.v7, the visualization uses `d3.stack()` and `d3.scaleOrdinal` for colors, with data rendering as SVG rectangles.

VVenkataSatyaRamKamini@my.unt.edu
87% match
Loading thumbnail…

Tutorial2

This stacked bar chart visualizes the distribution of movie ratings across six genres, showing the percentage of films within each rating category. The chart uses horizontal bars for each genre, segmented by rating levels from "below 5.0" to "above 8.5," with a color scale distinguishing the categories. Hovering over a segment reveals the exact percentage via a tooltip. Built with d3.v7, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to compute and render the stacked geometry, while `d3.axisBottom` and `d3.axisLeft` generate the axes, and the data is drawn as SVG rectangles.

HHarshithakodakandla@my.unt.edu
87% match