Skip to main content
SimilarExport ZIP
100%

Pie Chart

✓ Published1🌍 Public
Ppvvaishnavi93@gmail.com
Last edited Mar 27, 2026
Created on Mar 27, 2026
Forked from Pie Chart

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.

AI-generated description
MIT Licensed

Similar vizzes

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
97% 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
96% 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
94% 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
92% match
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
89% match
Loading thumbnail…

Pie Chart - Expenses

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.

Ggayathrisaxena23@gmail.com
89% 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
88% match
Loading thumbnail…

Fork of Pie Chart

This example presents a monthly expenditures dataset as a pie chart, with each slice labeled by department and accompanied by a legend listing exact dollar amounts. Built with D3 v5, the visualization uses `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` for color mapping, and SVG `<path>` elements for rendering. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the legend is constructed with appended rectangles and text elements.

BBala Sai Krishna
88% match