PIE chart for ICE-7

100%

PIE chart for ICE-7

✓ Published4🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

A pie chart displays product category counts from a static dataset, with each slice colored by category and a legend listing all sixteen items. The chart uses D3.js v6 to generate SVG paths via `d3.pie()` and `d3.arc()`, with a categorical color scale from `d3.schemeCategory10`. Built in React, the page also includes an animated sky with drifting clouds, a recursive branching tree, and a seated Buddha figure, all rendered as SVG elements with smooth motion.

AI-generated description

This project visualizes product distribution of data using D3.js,focusing on two key visualizations: PIE-CHART:To display the categorization of products by type. VISUALIZATIONS: Pie-chart:product categories. Displays product counts for each category(e.g;snacks,Beverages,personal care etc) Includes a color-coded legend for clarity. used d3.pie and d3.arc() to render chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of PIE chart for ICE-7

This fork of a pie chart visualizes product categories with their respective counts, using a colorful categorical scale and a legend for identification. The chart is rendered with D3 v6 (d3.pie, d3.arc, and d3.scaleOrdinal) in an SVG, with each slice separated by white strokes and slight opacity. The React-based scene also includes an animated sky with drifting clouds, a recursive branching tree, and a Buddha illustration, combining static and moving SVG elements within the same viewBox.

Vvaishnavgck@gmail.com

92% match

Loading thumbnail…

Fork of Fork of Fork of PIE chart for ICE-7

The example shows a colorful pie chart categorizing products from an ICE-7 dataset, with a legend on the right, rendered alongside an animated scene of a meditating Buddha, a tree, clouds, and a gradient sky and ground. The pie chart is built with D3.js v6 using d3.pie, d3.arc, and d3.scaleOrdinal, while the background environment is composed of React components drawing SVG shapes. Clouds drift horizontally via React state updates, and the tree uses recursive branching logic, all rendered as SVG within React.

Bbhargavinalamothu@gmail.com

88% match

Loading thumbnail…

Fork of Fork of PIE chart for ICE-7

This example presents a D3.js pie chart visualizing product category counts, rendered alongside a decorative SVG scene featuring a Buddha figure, recursive fractal trees, and drifting clouds over a gradient landscape. The pie chart uses `d3.pie()` and `d3.arc()` with categorical color scaling via `d3.scaleOrdinal` and `d3.schemeCategory10`, while the animated background relies on React state and `setInterval` to move cloud elements. The visualization combines static data-driven charting with layered SVG components in a single canvas.

Vvaishnavgck@gmail.com

87% match

Loading thumbnail…

ICE 7 Pie Chart

This example visualizes top product sales as an interactive pie chart, with a legend displaying each product name and its corresponding unit count. The chart renders using D3 v5 within a React framework, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeCategory10` for color encoding. Data is loaded from an external CSV file via `d3.csv`, sorted by sales value, and the top 10 items are selected for display. The SVG-based visualization includes hover logging of sales values, with legends positioned alongside the chart.

Llibramanju

87% match

Loading thumbnail…

ICE-7

A pie chart visualizes sales by category from a CSV dataset, using d3.csv to load values. The SVG graphic displays category labels on each slice via d3.arc and a legend on the right. D3 v7’s pie generator computes the arc angles, while d3.scaleOrdinal with schemeTableau10 assigns colors. The code uses `d3.pie()` and `d3.arc()` to generate paths, with tooltips added as titles, and a legend built from rectangles and text elements.

Aankitgoudpoodhari07@gmail.com

86% match

Loading thumbnail…

ICE 7

This pie chart visualizes sales by category, displaying five segments for electronics, furniture, clothing, and toys. The chart uses D3.js v7 to load the sales.csv dataset, then applies `d3.pie()` and `d3.arc()` to compute slice geometries, with `d3.scaleOrdinal` and `d3.schemeTableau10` assigning colors. It renders as SVG with category labels positioned via `labelArc.centroid()` and includes a legend showing each category and its value. Hovering over a slice reveals a tooltip with the category name and numeric value.

Aankitgoudpoodhari07@gmail.com

85% match

Loading thumbnail…

ICE7-PieChart-Part2

This example visualizes product revenue shares as a pie chart, with five cosmetic product categories (e.g., Eyeshadows, Mascara) and their corresponding percentages. A legend with colored dots and labels identifies each category, while the chart’s slices are labeled directly with product names. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG rendering within a React framework. The data is hardcoded in the script, with all values summing to 100 percent.

Sskambhore04

85% match

Loading thumbnail…

ice07-pie chart

This pie chart shows the distribution of retail records across product categories, with each slice labeled and a legend on the right. The visualization uses D3 v7’s `d3.pie` and `d3.arc` generators to compute and draw the slices, while `d3.rollup` aggregates the CSV data by category. A custom ordinal color scale assigns distinct colors to each category. The SVG rendering includes white labels positioned at each arc’s centroid, and the data is loaded from an external CSV file via `d3.csv`.

LLaasyaJ256

85% match