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 descriptionAnother Stacked Bar Chart Example
This is another example of a stacked bar chart demonstrating the distribution of different rating levels within various categories. Hovering over each bar will display 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 data2.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 index2.html in
a web browser.
Additional Information
For styling and tooltip functionality, refer to the included
styles.css file.