Viewing a saved revision (read-only)
7ad1e895471443a3a8a6444c869f635e
Tutorial 2 Question 3
This stacked bar chart displays the proportional distribution of five rating categories across three named categories, with each category's segments summing to 100%. The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` to generate colored horizontal bars, with `d3.scaleLinear` and `d3.scaleBand` handling the axes. Interactive tooltips, created via DOM elements, appear on mouseover to show precise percentages formatted with `d3.format`. The data comes from a local CSV file, rendered as SVG, with styling defined in a separate CSS stylesheet.
AI-generated descriptionStacked Bar Chart Example
This stacked bar chart example demonstrates the distribution of different rating levels within various categories. When hovering over each bar, you'll see the precise percentage of each rating level within the respective category. The total percentage for each category sums up to 1, representing 100%.
Dataset
The dataset used for this visualization is stored in data.csv. It includes the following columns:
- category
- below 5.0
- 5.0-6.5
- 6.5-7.5
- 7.5-8.5
- above 8.5
Usage
To view the stacked bar chart, simply open index.html in a
web browser.
Additional Information
For styling and tooltip functionality, refer to the included
styles.css file.