Skip to main content
SimilarExport ZIP
100%

pie chart ICE-7

✓ Published1🌍 Public
Vvydeeshm@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025
Forked from ICE-7

This interactive pie chart visualizes a synthetic household budget allocation across eight categories, displaying each slice with its percentage label and a matching legend. Built with D3 v7, it uses `d3.pie` to compute arc angles, `d3.arc` for slice paths, and `d3.scaleOrdinal` with `d3.schemeTableau10` for colors. The SVG rendering includes leader lines, hover tooltips with transitions, and a reusable component pattern supporting `update()`. A tooltip provides exact values on mouseover, while legend swatches use the same color scale.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7

This chart displays a synthetic household budget allocation as an animated, labeled pie chart built with D3 v7. It breaks down spending across eight categories like Housing and Transportation, showing each slice’s percentage via labels connected by leader lines. The visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10`, rendered as SVG. A legend lists categories with color swatches, and hovering over slices reveals a tooltip with exact values and percentages.

Vvydeeshm@gmail.com
93% match
Loading thumbnail…

Pie Chart ICE-7

This pie chart visualizes monthly expenditures by department, using proportional slices and a color-coded legend. The chart is rendered in SVG on an HTML page. The code loads CSV data from a GitHub gist, processes it with `d3.csv`, and builds arcs using the `d3.pie` and `d3.arc` APIs. Section colors are assigned via `scaleOrdinal`, and labels and legend values are formatted with `d3.format`.

KKande2011
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…

Fork of D3 Starter PIE chart ICE-7

This example shows household spending distribution across ten categories using a pie chart, with each slice labeled by its amount in thousands and accompanied by a legend that pairs category names with values. The visualization loads data from a CSV file hosted on GitHub and renders the chart as SVG. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format`, along with async/await to fetch the dataset before generating the pie segments, value labels, and legend.

Sshreyasribearelly@gmail.com
85% 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
85% match
Loading thumbnail…

pie chart ICE-7

This chart displays monthly electricity usage for a household over 24 months, using a line with circular markers to show seasonal peaks in summer and winter. Built as a reusable D3 v7 component in SVG, it employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for rendering, with `d3.axisBottom` and `d3.axisLeft` for labeled axes and gridlines. The component exposes a public API including `.update()` for redrawing with new data, reading from a CSV file with `date` and `value` columns. A hover tooltip provides interactive feedback.

Vvydeeshm@gmail.com
85% 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
85% match
Loading thumbnail…

Fork of Pie Chart ICE-7

This pie chart visualizes monthly expenditures, with each slice labeled by a spending category and its numeric value. The chart is rendered as an SVG using D3 v5, with the `d3.pie()` and `d3.arc()` functions generating the segments and their centroids. Data is loaded asynchronously from a CSV file via `d3.csv()`, and a legend lists each category with its corresponding dollar amount. Slice colors are assigned using `d3.scaleOrdinal` with a predefined array of color names.

AAnanyaSamala
85% match