Skip to main content
SimilarExport ZIP
100%

Cereal Dataset

✓ Published0🌍 Public
Rrajivkarri98@gmail.com
Last edited Oct 6, 2025
Created on Oct 6, 2025
Forked from HTML Starter

This visualization presents a summary of cereal nutritional data loaded from a local CSV file, including row and column counts, a preview table of the first ten entries, and a bar chart ranking the top ten cereals by rating. Built with D3 v7, the chart uses `d3.scaleBand` and `d3.scaleLinear` to map cereal names and ratings to SVG rectangles, with axes and hover tooltips via appended `title` elements. The page also incorporates simple decorative SVG shapes depicting a cereal bowl and a phone.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cereal Dataset

This example displays the raw JSON structure of a cereal data record, parsed from a CSV file containing nutritional and rating information for 80 popular cereals. The visualization presents the first data entry as a formatted text output within a container, using a fixed font size for readability. It demonstrates data loading and preprocessing by converting numeric string values to numbers and representing missing values (coded as -1) as NaN. The code imports the dataset from a local CSV and exports both the main rendering function and the processed data for potential further use.

AAri Schechter
84% match
Loading thumbnail…

Fork of cereals D3 Scatter Plot

This example visualizes the distribution of calories across different cereal brands using a vertical bar chart. The chart displays each cereal name on the x-axis with calorie values mapped to the y-axis, making it easy to compare relative calorie counts. The visualization is built with D3 v7 and renders as SVG, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file via `d3.csv`, with each bar's height proportional to the cereal's calorie value.

Ssreeramyamini@gmail.com
83% match
Loading thumbnail…

Cereal Bubble Chart in D3

This bubble chart compares breakfast cereals by plotting calories on the x-axis, weight on the y-axis, and using bubble radius to represent ratings. Color encodes the manufacturer, with a legend showing both color categories and rating sizes. The visualization loads CSV data via `d3.csv`, renders SVG circles using `d3.scaleLinear` for axes and bubble size, and applies `d3.scaleOrdinal` with `d3.schemeTableau10` for manufacturer colors. The dataset contains nutritional information for 80 cereals from seven manufacturers.

EEunice Tu
82% match
Loading thumbnail…

Cereals Scatter Plot

A scatter plot maps cereal sugar content on the x-axis against consumer ratings on the y-axis, using red, semi-transparent circles to reveal the negative correlation between sweetness and approval. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `scaleOrdinal` with `schemeCategory10` for a legend identifying each cereal by name. Data comes from a CSV file, rendered as SVG elements.

Ssrrajendran
82% match
Loading thumbnail…

Fork of HTML Starter

A bar chart displays the calorie content of 77 cereals from a CSV file, with each bar labeled by cereal name and rotated for readability. The visualization uses D3.js v7 to load data via `d3.csv`, scales the y-axis with `d3.scaleLinear`, and renders bars with `d3.selectAll` and `.enter()`. The x-axis is created with `d3.axisBottom`, featuring custom tick formatting that truncates long names. Interactive hover effects, defined in CSS, change bar color to orange. The chart includes axis labels for "Cereal Name" and "Calories," with a clean SVG layout and fixed margins.

Rrajivkarri98@gmail.com
82% match
Loading thumbnail…

Visualization

This zoomable scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, encoding each cereal as a circle positioned by calories and protein, with size reflecting sodium content. The SVG-based chart uses d3.v3 and animates smoothly on zoom, letting viewers pan and scale to explore the distribution of cereal brands by manufacturer. Built as a D3.js example, it adapts zoom behavior from earlier scatterplot blocks, rendering the data as an interactive, animated graphic.

GGerardoFurtado
82% match
Loading thumbnail…

Cereal Scatter

This scatter plot visualizes the nutritional properties of various cereals, allowing users to compare any two attributes from the dataset via dropdown menus. Each cereal is represented as a colored dot, with the color mapping to the cereal's name. The visualization is implemented in React, using D3's `scaleLinear` and `scaleOrdinal` for scaling and color assignment. Hovering over a point fades all other points, highlighting the selected cereal. Data is loaded from a CSV file containing the cereal dataset.

AAnthony Ynami
81% match
Loading thumbnail…

activity8-task2

A stacked bar chart displays cereal ratings by ingredient percentage, with each bar segmented into sugars, vitamins, and rating contributions. The chart uses D3 v7's `stack`, `scaleLinear`, `scaleBand`, and `axisBottom` APIs to construct the SVG visualization. Hover interactions reveal precise percentages via a tooltip. The categorical data comes from a CSV file listing cereal names and their nutritional values.

Bbobbymeyermsis@gmail.com
81% match