🌍 Public
Viewing a saved revision (read-only)
30264c771fd1460f85e376ae2b7d4cd0
Activity 6_Task 2 Q2
This example visualizes the nutritional breakdown of 80 cereal products as a stacked bar chart. It uses a D3.js v7 SVG rendering with a horizontal layout, showing the contribution of three nutrient categories (calories, protein, fat) per cereal brand, as specified in the data.csv file. The chart employs `d3.stack()` for data stacking, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the quantitative x-axis. Interactive tooltips display exact values per category and cereal when hovering over each bar segment, using D3’s event handlers (`mouseover`, `mousemove`, `mouseout`).
AI-generated descriptionAn example showing the capabilities of VizHub:
- Loads D3 via UNPKG.
- Demonstrates use of
importfrom"d3". - Demonstrates use of
importfrom local ES6 modules.