Reusable Pie Chart – ICE7

100%

Reusable Pie Chart – ICE7

✓ Published3🌍 Public

Last edited Oct 24, 2025

Created on Oct 24, 2025

This example shows a reusable pie chart that visualizes the average sepal length for three flower types—Rose, Tulip, and Lily—from a CSV dataset. The chart groups the raw data using `d3.rollup` to compute means, then renders slices with `d3.pie` and `d3.arc` within an SVG. A color scale from `d3.scaleOrdinal` maps categories to colors, and a legend is added for identification. The implementation follows a modular function structure, loading D3 v7 via an ES module import.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Fork of Scatter Plot - ICE7

This example visualizes the relationship between petal width and sepal length for three flower species (Rose, Tulip, and Lily) using an SVG scatter plot rendered with D3 v7. The code loads data from a CSV file, scales the axes linearly, and maps flower type to a categorical color scale (steelblue, tomato, black). It includes axis labels, a chart title, and a legend, with points drawn as semi-transparent circles. The scatter plot shows clear clustering by species, with lilies having the largest dimensions.

Jjanisha30gowda@gmail.com

81% match

Loading thumbnail…

Pie chart

This pie chart visualizes the distribution of iris flower species from a remote CSV dataset, with each species represented as a colored slice and a matching legend. Built with D3 v6, the example uses the `pie` generator, `arc` generator, `scaleOrdinal`, and `schemeCategory10` to create the chart, while `svg` selections handle rendering. The code also demonstrates a reusable `pieChart` module with chained getter-setter methods, and the legend is drawn manually using appended `g` elements with rectangles and text labels, all styled with custom CSS.

Ppmanoj13053@gmail.com

80% match

Loading thumbnail…

ICE-7 Pie Chart

This example shows the distribution of three iris species in the classic Iris Dataset as a pie chart. It imports data from a CSV file, counts occurrences of each species, and renders the result using the reusable `PieChart` function. The chart uses D3’s `pie` layout and `arc` generator for SVG paths, with an ordinal color scale mapping species to red, green, and blue. A custom legend is appended with `svg.append`, and the page uses the Share Tech font.

DDan Waters

80% match

Loading thumbnail…

act7_q1piechart

This pie chart visualizes the distribution of flower species from a CSV dataset, displaying the proportion of each species with colored slices and labels. The chart is built with D3.js v7, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG paths, with an ordinal color scale assigning light green, blue, and orange to species groups. A legend on the right side, rendered as SVG rectangles and text, maps each color to its corresponding species, while `d3.rollups` aggregates the raw data into species counts before drawing.

Ssaikarthiknimmagadda@gmail.com

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

78% match

Loading thumbnail…

ice7task2

A pie chart displays the aggregated sums of three metrics—A, B, and C—from a multiseries CSV dataset. Using D3.js v7, the code loads the data via `d3.csv`, computes totals with `d3.sum`, and generates slices with `d3.pie` and `d3.arc`. Each slice is labeled using the arc’s `centroid`, and a color-coded legend is appended manually. The SVG rendering uses ordinal color scaling and explicit positioning for the chart and legend.

Kkmuktha09@gmail.com

78% match

Loading thumbnail…

ice07-pie chart

This pie chart shows the distribution of retail records across product categories, with each slice labeled and a legend on the right. The visualization uses D3 v7’s `d3.pie` and `d3.arc` generators to compute and draw the slices, while `d3.rollup` aggregates the CSV data by category. A custom ordinal color scale assigns distinct colors to each category. The SVG rendering includes white labels positioned at each arc’s centroid, and the data is loaded from an external CSV file via `d3.csv`.

LLaasyaJ256

78% match

Loading thumbnail…

ICE - 7 Pie Chart

This example displays the percentage of total sales for different items in a pie chart using D3 v5. The code loads CSV data from a GitHub gist and renders an SVG with a pie chart and a legend, with each slice and legend entry colored by a fixed ordinal scale. It uses `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arc segments, and `d3.scaleOrdinal` for color mapping, while formatting the percentage labels with `d3.format`.

RRamyapriyaPutta

78% match