Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

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

92% 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

89% 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

84% 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…

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 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

81% match

Loading thumbnail…

ICE-7 scatter plot

This scatter plot visualizes the relationship between sugars and calories for various cereals, with each dot colored by manufacturer and sized by protein content. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for dot radius, and `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical colors. A legend identifies manufacturers, and hover tooltips display cereal details. The chart is rendered as SVG in a reusable chart factory, with data loaded from a remote CSV file via `d3.select` and the `join` operator to create circle elements.

Ppanyamsantosh09@gmail.com

80% match