Pie Chart

100%

Pie Chart - Expenses

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

Forked from Fork of Reusable D3 Scatter Plot

This pie chart visualizes the proportional distribution of expenses across four categories: Food (40), Travel (20), Shopping (25), and Others (15). Built with D3.js v7, the SVG rendering uses the `d3.pie()` and `d3.arc()` generators to create the slices, with `d3.scaleOrdinal()` assigning distinct colors. The chart displays category labels positioned at each arc’s centroid using the `arc.centroid` method, and includes an HTML legend generated through D3's selection API. The hardcoded dataset drives the visualization, which is rendered entirely client-side in the browser.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart - Expenses

This example renders a simple pie chart that visualizes expense categories (Food, Travel, Shopping, Others) with their corresponding quantitative values. The chart uses d3.pie() and d3.arc() to generate the slices, with a d3.scaleOrdinal() providing the categorical color scheme. Each slice is labeled using arc.centroid() to position the category names, and a separate HTML legend is appended below the SVG to reinforce the color-coded categories. The visualization is built with d3.v7 and rendered as inline SVG.

YYash Raj Mathur

93% match

Loading thumbnail…

A pie chart displays monthly expenses across five categories—Rent, Food, Travel, Shopping, and Bills—with proportional slices and a matching legend. The visualization uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute arc paths and colors, reading the `pieData.csv` file. Slice labels are placed using each arc’s centroid, while the legend lists categories with values. The SVG output is generated entirely with D3’s declarative API.

Ppvvaishnavi93@gmail.com

89% match

Loading thumbnail…

Pie Chart

This pie chart displays monthly expense categories—Rent, Food, Travel, Shopping, and Bills—with proportional slices and a labeled legend. Built with D3 v7, it loads data from a CSV file, computes arc paths using `d3.pie()` and `d3.arc()`, and positions category labels via `labelArc.centroid(d)`. A categorical color scale (`d3.scaleOrdinal`) assigns colors, while the SVG rendering includes a title and a legend showing each category’s value. The chart is generated entirely with SVG elements and a custom legend.

Ppvvaishnavi93@gmail.com

89% match

Loading thumbnail…

Pie Chart

This pie chart visualizes monthly expenses across five categories: Rent, Food, Travel, Shopping, and Bills. It uses the D3.js v7 library to compute arc paths with `d3.pie()` and `d3.arc()`, and renders each slice as an SVG path with labels positioned using `labelArc.centroid()`. A legend, built from the loaded CSV file, shows each category with its corresponding value and color from `d3.scaleOrdinal(d3.schemeCategory10)`.

Ppvvaishnavi93@gmail.com

88% match

Loading thumbnail…

Pie Chart

This pie chart visualizes monthly expense categories from a CSV file, displaying each category's proportion with a colored slice and an outer label. Each slice is rendered with the `d3.arc` path generator, while labels are placed using `d3.arc` centroid calculations. A legend lists categories and values, using `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The chart is built with D3 v7, rendering to SVG, with the `d3.pie` layout function computing slice angles from the data.

Ppvvaishnavi93@gmail.com

87% match

Loading thumbnail…

Assignment7 Pie Chart3

This pie chart visualizes monthly expenses by category, with proportional slices for Rent, Food, Travel, Shopping, and Bills. It uses D3 v7’s `d3.pie` and `d3.arc` generators to compute arc paths, rendered as SVG elements on a 900×500 canvas. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) fills each slice, while labels are positioned using a separate `labelArc` for readability. A legend on the right lists each category with its numeric value, sourced from the CSV data loaded via `d3.csv`.

445.saiful@gmail.com

86% match

Loading thumbnail…

pie chart

A pie chart visualizes customer spending across four categories—Food, Clothing, Electronics, and Entertainment—using quantitative values. Built with D3.js v7, it renders an SVG slice for each category, sized by its value, with labels positioned at each slice’s centroid. A color scale from `d3.schemeCategory10` and `d3.scaleOrdinal` map categories to fills, while `d3.arc` and `d3.pie` compute the geometry. A separate HTML legend lists each category with its corresponding color and value. The chart uses a fixed 500×500 pixel canvas and is re-rendered by clearing and redrawing the SVG elements.

Ssrinathkarumuru@my.unt.edu

85% match

Loading thumbnail…

Fork of Fork of Reusable D3 pie Plot

This household expenses pie chart visualizes the proportional spending across eight categories, such as Housing, Food, and Education, with each slice labeled by its percentage of the total. The chart is rendered using the D3 v7 library, which uses `d3.pie()` to compute arc data, `d3.arc()` to generate the SVG paths, and `d3.scaleOrdinal()` with `schemeCategory10` for colors. A legend on the right side lists each category with its original value, and the entire visualization is created with SVG elements. Data is loaded from a local `expenses.csv` file using `d3.csv()`.

Eeeshani.boyapati@gmail.com

84% match