Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

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.

AI-generated description

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

89% match

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

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

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

83% match

Loading thumbnail…

Cereal Dataset

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.

Rrajivkarri98@gmail.com

82% match

Loading thumbnail…

Fork of d3 Updating Bar Chart With Dropdown

This interactive bar chart visualizes the nutritional content of breakfast cereals. A dropdown menu selects a cereal, and the corresponding values for categories like calories, protein, and fat are displayed as animated bars. The chart uses d3.v3 to render SVG and transitions, with a scale.ordinal for the x-axis and scale.linear for the y-axis. Data is loaded from the cereals.csv file and mapped for each cereal, and the `d3.extent` function updates the y-axis domain on selection.

AAntwanHak

82% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example shows the calorie distribution of various foods using a pie chart, with a legend displaying each food's name and calorie count. It loads a CSV dataset from a GitHub gist using D3's `csv` function and renders the chart as SVG. The code uses `pie()` to compute arc data, `arc()` to generate the path segments, and `scaleOrdinal()` to assign categorical colors. Text labels and legend entries are added with `select()` and `append()`, while `format('.4~g')` formats the calorie values in the legend.

Mmounishnaidu96@gmail.com

80% match