Skip to main content
SimilarExport ZIP
100%

ProductSales_PieChart

✓ Published1🌍 Public
AALIMINETI SPOORTHY REDDY
Last edited Oct 24, 2025
Created on Oct 24, 2025
Forked from Clickable Circles

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.

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
92% match
Loading thumbnail…

Activity 7.1

This pie chart visualizes sales by product, with each slice sized according to the product's sales value and colored using a categorical color scheme. The visualization is built with D3.js (v7), using `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` to generate and style the chart, with an SVG-based legend and labels positioned via arc centroids. Data is loaded asynchronously from a remote CSV file using `d3.csv`, and the chart is rendered entirely through SVG elements.

Nnvishalreddy8951@gmail.com
88% match
Loading thumbnail…

Pie chart

This pie chart displays the sales distribution by product, with real-time data updates fetched from a remote CSV file. The visualization uses D3.js v7 to construct the pie, with animated transitions for slices, labels, and a color-coded legend. Users can hover over slices to see a tooltip showing the product label and its percentage value. The SVG-based chart also includes interactivity through mouse events and uses d3.pie, d3.arc, and d3.scaleOrdinal for data binding and rendering.

Ssaibheemeshwar_maganti@srmap.edu.in
88% 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
87% match
Loading thumbnail…

Piechart

A pie chart displays chocolate sales proportions by product category. The visualization uses D3.js version 7, loading data from a CSV file and mapping category values to colors with `d3.scaleOrdinal` and `d3.schemeSet2`. The `d3.pie()` and `d3.arc()` functions generate the chart geometry, rendering each segment as a filled SVG path with white strokes. A custom HTML legend, built with D3 selections, labels each category using the same color scale, while the page layout is styled through external CSS.

Kkirankumari26guj@gmail.com
87% match
Loading thumbnail…

Pie Chart

This pie chart displays the proportional distribution of six product categories by value, with each slice labeled directly at its centroid. The visualization uses D3.js v7’s `d3.pie()` and `d3.arc()` generators to compute arc paths from CSV data loaded via `d3.csv()`. A category-10 ordinal color scale assigns distinct hues to each slice, while white stroke separates adjacent segments. The SVG is centered within a fixed 450×450 viewport, and text labels are positioned using the `arc.centroid()` method.

LLikhitaMudagereShivaraj@my.unt.edu
86% 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
86% match
Loading thumbnail…

test

This pie chart displays the distribution of product sales by category, using aggregated data from a CSV file. The visualization presents each category as a colored slice, with a legend identifying the categories and a title above the chart. Built with D3 v7, the code uses `d3.pie`, `d3.arc`, and `d3.rollup` to process and render the data, while SVG elements provide the visual output. Interactive hover effects enlarge slices and display category sales totals, with transitions animating the changes.

SSaiHarshitManda@my.unt.edu
86% match