Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
YYamini Malikireddy
Last edited Mar 28, 2026
Created on Mar 28, 2026
Forked from HTML Starter

This pie chart visualizes expense categories and their corresponding values from a CSV dataset. Using D3.js v7, the chart generates colored slices with SVG paths via `d3.pie()` and `d3.arc()`, with white labels positioned at arc centroids. A legend constructed with SVG rectangles and text displays each category alongside a color scale based on `d3.scaleOrdinal` and `d3.schemeCategory10`. The data is loaded asynchronously with `d3.csv`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Starter

This pie chart visualizes monthly expense categories from a CSV file, displaying each category’s proportional share with a legend and value labels. Built with React and D3 v7, it uses `d3.pie` to compute arc segments and `d3.arc` to generate SVG paths, rendered with a categorical color scheme from `d3.scaleOrdinal`. The chart draws arcs and text labels onto an SVG canvas, with a legend constructed iteratively from the data.

Ppvvaishnavi93@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive pie chart visualizes country-level data for 2022, loading CSV data from a GitHub gist via the `d3.csv` API. It uses D3 v7’s `pie()` and `arc()` generators to compute and draw SVG paths for each slice, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Hovering over a slice or label changes its fill to orange, providing immediate feedback. The chart is rendered inside a static SVG container, with text labels positioned at arc centroids using `arcGenerator.centroid()`.

Mmukundakrishna.r@gmail.com
86% match
Loading thumbnail…

Fork of HTML Starter

This chart displays monthly expenses across three categories—food, transport, and entertainment—using a stacked area chart powered by D3 v7. The visualization loads data from a CSV file and renders SVG paths generated by `d3.area` and `d3.stack`. The y-axis scales linearly with `d3.scaleLinear`, while the x-axis uses `d3.scalePoint` for month categories. A legend maps category colors via `d3.scaleOrdinal`, and the chart includes axis labels, a title, and rotated x-axis tick labels using `d3.axisBottom` and `d3.axisLeft`.

YYamini Malikireddy
86% match
Loading thumbnail…

Fork of D3 Starter

This pie chart visualizes the proportional breakdown of a CSV dataset by category, using Value1 as the numeric weight for each slice. Built with D3 v7, it renders as an SVG with slices colored via a categorical color scheme, and each slice is labeled with its category name. The chart includes a legend that maps colors back to categories, generated from the same data. The code constructs the pie using `d3.pie()` and draws arcs with `d3.arc()`, calculating slice paths and centroids for label placement.

Kkmuddana@gitam.in
86% match
Loading thumbnail…

Fork of HTML Starter

A pie chart displays the distribution of 110 students across five grade categories (A through E), with labeled slices showing category counts and a legend describing letter-grade ranges. Built with D3.js v7, the visualization loads a CSV file, uses `d3.rollup` to aggregate student counts by category, and employs `d3.pie` and `d3.arc` to generate SVG paths. A color scale colors each slice, while labels and legends are added programmatically to the SVG.

Mmadalahyndavi123@gmail.com
86% match
Loading thumbnail…

Fork of React & D3 Starter

This pie chart visualizes monthly expenses across five categories: Rent, Food, Travel, Shopping, and Bills. The visualization uses D3 v7 to create an SVG-based donut chart with category labels positioned along the arcs and a legend displaying each category's name and corresponding value. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette to compute arc paths, position labels, and assign colors based on data loaded from a CSV file.

Ppvvaishnavi93@gmail.com
86% match
Loading thumbnail…

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures from a CSV file as a pie chart. The chart displays categories as colored slices, with each slice labeled by its associated data value, and includes a legend that maps the colors to their numeric values. The visualization is built using D3 version 5, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for the pie geometry, arc paths, and color mapping. Data is fetched asynchronously via `d3.csv` from a GitHub gist URL, and the SVG canvas is rendered with a fixed width and height.

AAnanyaSamala
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