Skip to main content
SimilarExport ZIP
100%

ICE-7 scatter plot

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Scatterplot-Calories vs Sugars

This scatterplot visualizes the relationship between calorie and sugar content across a set of cereals. Each black dot represents a single cereal, with its position determined by its caloric value on the x-axis and sugar content on the y-axis. The visualization uses D3.js v7 to load the external CSV dataset, scale the axes linearly, and render the points as SVG circles. The chart includes labeled axes for both variables, with the axis tick marks and labels generated using D3’s axis functions.

Ssreeramyamini@gmail.com
87% match
Loading thumbnail…

Untitled

This scatter plot displays the relationship between calories and protein content for 77 breakfast cereals, with each dot colored by manufacturer and a tooltip revealing the cereal name and exact values on hover. The visualization is built with D3 v3, using `d3.scale.linear` for axes, `d3.svg.axis` for tick marks, and `d3.scale.category10` for categorical coloring. Data is loaded from a local CSV file containing nutritional information from the UCI Machine Learning Repository. Animated transitions appear on mouseover, and a legend identifies each manufacturer's color.

SSushanta77
85% match
Loading thumbnail…

ICE-7 Pie chart

This pie chart displays the total sugar content per cereal manufacturer from a remote CSV file. Each slice is labeled with the manufacturer’s name and its percentage of the overall total, while a legend on the right lists each manufacturer with its aggregated sugar sum. The visualization is built with D3 version 7, using `d3.csv` and `d3.autoType` to load and parse the data, `d3.rollups` to group and sum sugar values by manufacturer, and `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme to generate the chart. The SVG output includes slice paths with hover tooltips and positioned labels.

Ppanyamsantosh09@gmail.com
84% match
Loading thumbnail…

D3 Color Scatterplot

This scatterplot compares cereal manufacturers by plotting each product's rating against its calorie count. The visualization encodes the manufacturer as color, with Kellogg's points in red and Nabisco points in blue, and includes a categorical legend to distinguish the two brands. The chart is rendered as an SVG using D3 v7, with linear scales for both axes and a sequential color legend built with the d3-legend library. The underlying data is loaded from a CSV file containing manufacturer, rating, and calorie fields.

Mmariahdiaz
84% match
Loading thumbnail…

ICE-7 area chart

This area chart shows the relationship between sugar content and average consumer ratings for breakfast cereals. A light blue fill and a blue line trace the mean rating across sugar levels, with data points marked by circles. Built with D3 v7, the visualization loads a CSV file, groups cereals by sugar content, and computes the average rating for each group. The code uses D3 utilities like `d3.csv`, `d3.autoType`, `d3.rollups`, and `d3.mean` to process the data, then renders the chart with `d3.area`, `d3.line`, and `d3.axisBottom`/`axisLeft` generators.

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

Untitled

This scatter plot visualizes the relationship between calories and protein content for 77 breakfast cereals, with each dot colored by manufacturer. Built with d3.v3 in a React framework, it uses `d3.select` to append an SVG canvas and `d3.svg.axis` for labeled x/y-axes. Dots render as circles with `d3.scale.category10()` for color, and hover tooltips, enabled via `d3.event`, display the cereal name and coordinates. A legend identifies manufacturers.

FFlorisPex
83% 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