Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

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

This interactive dashboard presents three linked D3.js v7 visualizations built from the classic cereal dataset of 77 products. It shows a bar chart of average calories by manufacturer, a scatter plot of sugar content versus consumer rating with hot/cold cereal color encoding, and a multi-series chart combining average calories as bars with average rating as a line across manufacturers. The code uses D3's `rollup`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs for data aggregation and chart construction, rendered as responsive SVGs with a dark theme, gridlines, tooltips, and a legend.

AI-generated description

ICE5 – Cereal Dataset Visualizations

This project contains three D3.js visualizations of the cereal dataset:

  1. Bar Chart – Average Calories by Manufacturer
  2. Scatter Plot – Sugar vs. Rating
  3. Multi-Series Chart – Avg Calories (Bars) + Avg Rating (Line) by Manufacturer

Data Source

The visualizations use the classic cereal dataset with nutritional information and consumer ratings for 77 cereals.

Implementation

  • Uses D3.js v7 for data visualization
  • Responsive design that adapts to container width
  • Clean, modern dark theme with accent colors
  • Tooltips for interactive elements
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization presents three coordinated views of a cereal dataset featuring 77 products. A bar chart displays average calories by manufacturer, a scatter plot examines the relationship between sugar content and consumer ratings with points colored by cereal type, and a multi-series chart combines average calories as bars with average rating as a line. The SVG charts are rendered using D3 v7, with axes, grids, and tooltips implemented through D3's SVG and event handling APIs. The code styles bars, lines, and dots using CSS custom properties.

Ppanyamsantosh09@gmail.com
95% match
Loading thumbnail…

Fork of HTML Starter

This visualization demonstrates how marks and channels encode cereal data across three small multiples. It uses a scatterplot of sugars versus calories with manufacturer color, cereal type shape, and protein size, an area chart of average rating by sugar content, and bars of average sodium per shelf. The code loads cereal.csv with `d3.csv` and `d3.autoType`, then renders SVG charts using D3 v7 scales, axes, and shape generators.

Ppanyamsantosh09@gmail.com
90% 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
88% match
Loading thumbnail…

Fork of HTML Starter

This example loads a cereal dataset from a GitHub gist and displays a data summary with column details, unique counts, and sample values, plus a preview table of the first five rows. It also renders a quick SVG mini bar chart showing the number of non-empty cells per row. The page uses d3.csv to fetch and parse the data, then manipulates the DOM directly to build the summary, table, and SVG visual without additional frameworks.

Ppanyamsantosh09@gmail.com
82% match
Loading thumbnail…

Fork of Bubble Chart in D3

This fork of a D3 bubble chart compares breakfast cereals by calories on the x-axis, weight on the y-axis, and rating as the bubble radius. Each circle is colored by manufacturer using the `d3.scaleOrdinal` with `d3.schemeTableau10`. The visualization includes custom legends for bubble size and manufacturer colors, rendered as SVG elements built with `d3.csv` data loading and `d3.axisBottom` and `d3.axisLeft` scales. Data comes from a CSV file hosted on GitHub.

EEunice Tu
82% 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
82% match
Loading thumbnail…

Untitled

This example displays a scatter plot of breakfast cereals, mapping calories on the x-axis against protein content on the y-axis, with each point colored by manufacturer. It uses d3.scale.linear for axis scaling, d3.svg.axis for axes, and d3.scale.category10 for categorical color assignment. A custom HTML tooltip appears on mouseover, showing the cereal name and its values. The data is loaded from a CSV file using d3.csv.

Vvenkatajayanth03
81% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between calories per cup and consumer ratings for 80 breakfast cereals from the Cereal Dataset. The chart uses D3 scales and axes to map each cereal as a semi-transparent circle, with mouse-free static rendering. The visualization is built with D3.js (v7) through the `select` API, using `scaleLinear` for the y-axis and `scaleOrdinal` for the x-axis, while axis labels come from the `@curran/axis-labels` helper library.

AAri Schechter
80% match