Skip to main content
SimilarExport ZIP
100%

ICE-7

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

pie chart 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.

Vvydeeshm@gmail.com
93% match
Loading thumbnail…

ice-7-task2

This example presents a visual analysis of household expenses across seven categories over a year, using annual totals in a pie chart with percentage labels and a legend, alongside a line chart tracking monthly spending per category. The pie chart computes yearly sums from a CSV dataset, applies a Tableau color scheme, and displays labels positioned along an inner arc. The line chart uses a point scale for months, a linear scale for expense values, and renders lines for each category via `d3.line()`, with axes and labels added through `d3.axisBottom` and `d3.axisLeft`. Both charts are rendered as SVG elements.

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

ice-7-task3

A stacked area chart displays monthly household expenses across seven categories—Housing, Food, Transportation, Utilities, Entertainment, Healthcare, and Education—from a CSV file. Each category is drawn as a semi-transparent filled area with a distinct color from `d3.schemeTableau10`, using `d3.area()` to compute paths. The x-axis uses a point scale for months, and the y-axis is linear for USD amounts. A legend identifies categories, with axes and labels rendered via `d3.axisBottom` and `d3.axisLeft` in SVG.

Vvineelaviswanadham07@gmail.com
82% 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…

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
81% 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
81% 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
81% match