ICE7_Pie

100%

✓ Published1🌍 Public

Ssivaniammisetti2002@gmail.com

Last edited Mar 30, 2026

Created on Mar 30, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

87% match

Loading thumbnail…

ICE7.2

This pie chart visualizes the frequency distribution of letters from a truncated dataset, with each slice colored and labeled by its corresponding letter. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to compute and render the arcs, while `d3.scale.ordinal` assigns a categorical color range. Data is loaded as CSV from a GitHub gist, with frequency values parsed as numbers, and the SVG is centered within a 900x400 viewport.

BBryanA999

87% match

Loading thumbnail…

ICE-7: Pie Chart with labels

This example shows the population distribution across age groups as a pie chart. The visualization displays a colored slice for each age group, with labels placed inside the slices and a legend on the right detailing each group's name and population. The chart is rendered as an SVG using D3.js v3, loading data from a CSV file via `d3.csv`. The code defines arc geometry with `d3.svg.arc` and `d3.layout.pie`, applies a categorical color scale via `d3.scale.category20`, and positions labels using the centroid calculation `arc.centroid(d)`.

CChaitanya Galla

86% match

Loading thumbnail…

Pie Chart ICE 7

A pie chart visualizes proportional data from a local CSV file, with categories like Housing, Food, and Transport displayed as colored slices with percentage labels. The chart uses d3.pie() to convert values into angles and d3.arc() for generating slice shapes and positioning external labels. A legend in the top-left corner identifies each category with a color swatch. The SVG rendering uses d3.scaleOrdinal with schemeCategory10 for colors, and text styling applies the Share Tech font via CSS.

Ddiwashhumagain@my.unt.edu

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

86% match

Loading thumbnail…

ICE-7 : Pie Chart

This pie chart displays the scores of 10 selected games from a CSV dataset, with each slice colored by game name and accompanied by a legend showing the game and its numeric score. The visualization uses d3.pie and d3.arc to generate the circular segments, with d3.scaleOrdinal assigning colors from a predefined range. Data is loaded asynchronously via d3.csv from a Gist URL, and the SVG rendering includes custom styled text and legends on a black background.

Ggunasindhuja

86% match