Book ratings

100%

✓ Published0🌍 Public

Last edited Jul 20, 2023

Created on Jul 9, 2023

This visualization displays the distribution of book ratings across various genres, with each horizontal bar representing a genre and stacked segments showing the proportion of ratings in different ranges (below 1.0, 1.0-1.5, 1.5-2.5, 2.5-3.5, above 3.5). The chart uses D3 v7 loaded via UNPKG, with d3.scaleOrdinal for color mapping, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.stack for creating the stacked bar data from a CSV file. Interactive tooltips display exact percentages on hover, and a legend indicates the rating categories. The SVG rendering includes shared axes and a title, with data processed through d3.csv.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

activity 7.2

This stacked bar chart visualizes how movie ratings are distributed across genres, with each bar segment representing the proportion of films falling into rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.stack to generate the stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for positioning. Data comes from a CSV file, and the SVG rendering includes a custom legend and axis labels.

Rrushithareddyy

86% match

Loading thumbnail…

Movie ratings_test

This stacked bar chart displays the distribution of five rating categories across six movie genres, showing how rating percentages vary by genre. Each horizontal bar represents a genre, segmented into colored bands for ratings below 5.0 through above 8.5, with a legend on the right. The visualization uses d3.csv to load data and d3.stack to compute the stacked segments, with d3.scaleBand for the y-axis and d3.scaleLinear for percentages. Interactive tooltips appear on hover via mouseover events, highlighting specific rating proportions.

Yyuqing35

86% match

Loading thumbnail…

Activity-7(2)

This visualization shows stacked horizontal bars comparing the distribution of six movie genres across five rating categories, from "below 5.0" to "above 8.5". The chart reads the CSV data using d3.csv and uses d3.stack to create stacked segments, with d3.scaleOrdinal for color mapping and d3.scaleBand for the vertical genre axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment using d3.format. The SVG rendering includes custom axes and a legend built from HTML elements.

SSharankumar02

85% match

Loading thumbnail…

IMDb Movie ratings

This visualization presents a horizontal stacked bar chart showing the distribution of IMDb ratings across six movie genres, where each bar segment represents the proportion of movies within a rating bracket (below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, above 8.5). The chart uses `d3.stack()` to build the stacked structure and `d3.scaleOrdinal` for color encoding. Data comes from `data.csv` via `d3.csv()`. A hover tooltip, implemented with D3 DOM selection and event handlers, displays the exact percentage for each rating category within a genre. The SVG output is rendered using D3 v7 and React.

Ssaikrishnabussa

85% match

Loading thumbnail…

Untitled

This visualization shows the percentage distribution of movie ratings across six genres, from below 5 to 8.5 and above, revealing how genre impacts audience scores. It uses d3.csv to load the data and d3.scaleBand for the categorical x-axis, with d3.scaleLinear mapping the y-axis to the cumulative proportions. Each genre’s total is represented as a single steelblue bar, while hovering turns the bar brown. The chart is rendered as an SVG with d3.axisBottom and d3.axisLeft for the axes, and styled via external CSS.

Yyuqing35

85% match

Loading thumbnail…

IMDb Movie ratings

This visualization displays the distribution of IMDb movie ratings across six genres, using stacked horizontal bars that segment percentages into five rating categories from "below 5.0" to "above 8.5." The chart reads from a local CSV file and renders with SVG. It employs d3.stack, d3.scaleOrdinal, and d3.scaleBand to construct the layout. Interactive tooltips reveal exact percentages per genre and rating category during mouseover, and a legend color-codes each rating band.

NNagateja99

85% match

Loading thumbnail…

IMDb Movie ratings

This visualization displays the distribution of IMDb ratings across different film genres, using a stacked horizontal bar chart where each genre shows the percentage of movies falling into five rating categories. The chart employs D3.js v7 to load and parse CSV data, then uses d3.stack() to create stacked bars with d3.scaleBand() for the genre axis and d3.scaleLinear() for the percentage axis. Interactive tooltips appear on mouseover, revealing the exact percentage for each rating category. The SVG rendering includes a color legend generated with d3.scaleOrdinal().

HHarshiiiiiiiip

85% match