Skip to main content
SimilarExport ZIP
100%

ICE-7 Pie chart

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
84% match
Loading thumbnail…

ICE-7

A pie chart visualizes sales by category from a CSV dataset, using d3.csv to load values. The SVG graphic displays category labels on each slice via d3.arc and a legend on the right. D3 v7’s pie generator computes the arc angles, while d3.scaleOrdinal with schemeTableau10 assigns colors. The code uses `d3.pie()` and `d3.arc()` to generate paths, with tooltips added as titles, and a legend built from rectangles and text elements.

Aankitgoudpoodhari07@gmail.com
84% match
Loading thumbnail…

ICE 7

This pie chart visualizes sales by category, displaying five segments for electronics, furniture, clothing, and toys. The chart uses D3.js v7 to load the sales.csv dataset, then applies `d3.pie()` and `d3.arc()` to compute slice geometries, with `d3.scaleOrdinal` and `d3.schemeTableau10` assigning colors. It renders as SVG with category labels positioned via `labelArc.centroid()` and includes a legend showing each category and its value. Hovering over a slice reveals a tooltip with the category name and numeric value.

Aankitgoudpoodhari07@gmail.com
82% match
Loading thumbnail…

ICE7_Pie

This example visualizes the distribution of exercise levels as a pie chart, with slices labeled directly on the chart and a legend showing each category’s count. It loads data from a CSV file using d3.csv, converts values to numbers, and renders the pie using d3.pie and d3.arc in an SVG. The chart applies a categorical color scheme via d3.scaleOrdinal with d3.schemeCategory10, and positions labels using arc centroid calculations. The visualization is built entirely with D3 v7, rendering to SVG with a centered chart group and a right-side legend.

Ssivaniammisetti2002@gmail.com
81% match
Loading thumbnail…

PIE - ICE 7 SAKETH SARA

This pie chart visualizes annual sales share by product category, with each slice labeled by product name and percentage of total sales. The visualization uses D3.js v7’s `d3.pie()` and `d3.arc()` generators to compute and draw the arcs, while `d3.scaleOrdinal` with the Tableau10 color scheme assigns distinct colors to each product. Data is loaded from a remote CSV file via `d3.csv`, and the chart includes labeled polylines connecting slices to text annotations, plus a legend for quick reference.

Ssarasaketh3@gmail.com
81% match
Loading thumbnail…

ICE7

This pie chart visualizes export values across different years. It loads CSV data from a GitHub gist and renders an SVG donut chart using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` for section colors. Labels display formatted values via `format`, and a legend lists each year with its corresponding value.

Ssugunagar
81% match
Loading thumbnail…

ICE7 - Pie Chart

This pie chart visualizes regional sales distribution, with each slice representing a region's proportion of total sales and a legend showing region names with percentage values. The code loads sales data from a GitHub-hosted CSV using d3.csv, then renders the chart with d3.pie and d3.arc functions, applying colors via scaleOrdinal. SVG elements are appended to the page using d3.select, with legend text formatted via d3.format to display percentages. The visualization uses d3.v5 and outputs the result as scalable vector graphics.

Kkuraakhila9@gmail.com
81% match
Loading thumbnail…

ICE-7 SAKETH SARA PIE

This example shows a donut-style pie chart of product sales loaded from a CSV file, with an ordinal color scale and a legend. Built with D3 v7, it uses `d3.pie()` and `d3.arc()` to generate the slices, while `d3.scaleOrdinal()` and `d3.schemeTableau10` assign colors. Tooltips appear on mousemove over each arc, and labels display for products with sales values above 90. The chart is rendered as SVG within an HTML page, styled by a linked stylesheet.

Ssarasaketh3@gmail.com
81% match