Fiber Content Graph

An interactive data visualization that illustrates fiber content in different food groups, with a focus on gut health.

Project Structure

• index.html – Main HTML file that renders the visualization.
• script.js – JavaScript logic for reading the CSV and generating the graph.
• style.css – Styling for the page and visualization.
• food_composition_grouped_cleaned.csv – Cleaned dataset with fiber-related nutritional information.
• gutGraphic.svg & favicon.svg – Visual assets for branding and layout.

About the Visualization

This project uses D3.js to create a dynamic and interactive representation of how fiber and sugar content vary across different food categories. The goal is to promote awareness about dietary fiber and its effect on gut health and immunity.

How to Run

1. Clone or download the repository.
2. Open index.html in your browser.

Features

• Grouped food data with fiber and sugar content
• SVG graphics for visual storytelling
• Color-coded gradients based on nutritional values

Built With HTML, CSS and JavaScript (D3.js)

---