D3Pie

100%

✓ Published0🌍 Public

Last edited Apr 27, 2024

Created on Apr 27, 2024

This example visualizes monthly product sales data for Costco in New York as a pie chart. Each slice represents a product, with its size proportional to units sold, and is labeled with the corresponding value in thousands. A legend lists product names and their sales figures. The chart is rendered as SVG using D3 v5, creating the pie with `d3.pie` and `d3.arc`, coloring slices with `d3.scaleOrdinal`, and loading data from a raw GitHub CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

pie_sales

This pie chart visualizes product sales from a CSV file, displaying each product’s share as a colored slice with labels positioned at each slice’s centroid. The chart uses d3.pie() to compute arc angles and d3.arc() to render the SVG paths, with a d3.scaleOrdinal and d3.schemeCategory10 providing color encoding. A legend below the chart lists each product and its corresponding sales value, generated from the same loaded data. The visualization is built with D3 v7 and rendered as inline SVG within an HTML container.

PP Manisha

83% 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

81% match

Loading thumbnail…

ProductSales_PieChart

A pie chart visualizes the distribution of sales across six product categories, displaying each product's name and percentage inside its slice. Built with D3.js v7, the visualization uses `d3.pie` to compute arc segments and `d3.arc` for rendering paths, with an ordinal color scale assigning distinct hues. Sales data from a CSV file is loaded via `d3.csv`, and a legend on the right lists each product with its corresponding color and total sales value. The chart includes white stroke separators and labels positioned using arc centroids.

AALIMINETI SPOORTHY REDDY

81% match

Loading thumbnail…

pie chart

A pie chart visualizes the proportion of sales across three product categories—Electronics, Clothing, and Food—using hardcoded data from an array. The chart is rendered as SVG with D3.js v7, employing `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes, which are filled using a categorical color scale. Each slice includes a centered text label displaying the category and sales value, while a separate legend lists the categories with their corresponding colors.

CChindamrohan321@gmail.com

81% match

Loading thumbnail…

pie chart for monthly sales

This example shows monthly sales data for six product categories across six months using a series of pie charts, each labeled with its corresponding month. It displays proportional slices for electronics, clothing, groceries, furniture, toys, and books, with a legend for the categories. Each pie chart is rendered as an SVG using D3.js v6, with the `d3.pie()` layout generating the arc angles and `d3.arc()` creating the paths. The code uses `d3.scaleOrdinal` with `d3.schemeCategory10` for colors and positions the charts vertically with month labels below each slice.

Ppriyapravallika44@gmail.com

80% match

Loading thumbnail…

Fork of pie chart

This fork of a pie chart shows product sales distribution for a selected year, with a dropdown menu to switch between 2018 and 2024 data. The D3 v7 code loads CSV data via `d3.csv`, uses `d3.pie()` and `d3.arc()` to generate SVG slices, and renders percentage labels for segments larger than 5%. A color scale maps product names to slices, and a legend lists each product alongside its color swatch. The chart updates in place by clearing and redrawing the SVG on each year selection.

AAmrit Adhikari

80% match

Loading thumbnail…

Pie Chart

This interactive pie chart visualizes product sales distribution across years, with a dropdown selector allowing users to switch between 2018 and 2024 data. The chart displays percentage labels on slices larger than 5% and includes a color-coded legend for product identification. Built with D3 v7, the example uses d3.csv to load product sales data, d3.pie for arc generation, d3.arc for slice paths, and d3.scaleOrdinal with d3.schemeCategory10 for colors. All elements render as SVG within a styled HTML container.

Mmaddulanagasanjana@gmail.com

80% 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

80% match