Interactive visualization of cereal macronutrient facts
CerealVis is an interactive data visualization that explores the nutritional content of popular breakfast cereals. Built with React and D3.js, it demonstrates how interactive charts can make nutritional data more accessible and engaging. The visualization allows users to compare cereals by total calories or examine the breakdown of macronutrients (protein, fat, and carbohydrates) for each brand.
Explore nutritional data through interactive bar charts with smooth animations and transitions.
Switch between total calories view and stacked breakdown of protein, fat, and carbohydrates.
Visual distinction between cereal manufacturers using a carefully selected color palette.
Based on the 80 Cereals dataset from Kaggle with 77 popular cereal brands and their nutritional information.
Explore the dataset below. Hover over bars to see detailed nutritional information. Use the toggle to switch between total calories and stacked macronutrient views.
Data source: Kaggle Cereal Dataset
View the live demo or check out the source code on GitHub