Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

activity6_Task-2

Public visualization

Viewing a saved revision (read-only)

e82297bff5774323a8d882278f3a7c8a

activity6_Task-2

0 stars0🌍 Public
Ggolisanthoshi2000@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024

This stacked bar chart displays the nutritional composition of ten common foods, breaking down proportions of fiber, protein, fat, carbs, and vitamins along a horizontal percentage axis. Hovering over any segment reveals an interactive tooltip showing the exact percentage value. The visualization uses d3.stack() to generate layered bars, with d3.scaleBand and d3.scaleLinear handling positioning, while d3.scaleOrdinal assigns distinct colors to each nutrient category. Data comes from a local CSV file, rendered as SVG elements with mouseover and mouseout events driving the tooltip behavior.

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.