Skip to main content
SimilarExport ZIP
100%

Fork of PIE chart for ICE-7

✓ Published1🌍 Public
Vvaishnavgck@gmail.com
Last edited Apr 1, 2025
Created on Apr 1, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

PIE chart for ICE-7

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.

Aasowmyasri15@gmail.com
92% match
Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart FOR MARkS

A pie chart visualizes company profits from a CSV dataset, encoding each company's profit value as a colored slice with a text label showing the profit amount. The legend lists company names alongside their corresponding colors and profit values. Built with D3 v5 in a React context, the code uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to fetch and render the SVG, with pie slices positioned via `arc.centroid` and legend items generated dynamically.

Kkarumanchimanasa
86% match
Loading thumbnail…

Fork of ICE 7 Pie Chart

This example shows a pie chart of sales data for the top 10 products, with a legend displaying each product name and its corresponding sales value in units. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` for coloring segments, and renders via SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, sorted by sales, and sliced to the top 10. Hovering over a slice logs the sales value to the console. The visualization is built within a React starter framework.

Mmboinapally17
85% match
Loading thumbnail…

Fork of Fork of ice-7 q2

This example displays a pie chart with labeled slices, where each slice’s color corresponds to a categorical label and its size reflects a numeric value. The visualization is rendered as static SVG using D3.js v6, with the chart centered in a 500×500 viewport and slice labels placed at each arc’s centroid. Data is loaded asynchronously from a remote JSON file via `d3.json`. The chart uses `d3.pie` to compute arc segments, `d3.arc` for path geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign colors.

Bbhargavinalamothu@gmail.com
85% match
Loading thumbnail…

Fork of pie chart ICE-7

This fork of a pie chart visualizes the distribution of campus snacks by category, aggregating counts from a CSV file and displaying each category’s share with percentage labels outside the slices. It renders an SVG using d3.pie, d3.arc, and d3.rollup to aggregate data, while d3.scaleOrdinal with schemeTableau10 assigns colors. A separate HTML legend lists categories with their counts, and the tooltip shows exact values. The chart loads data asynchronously via d3.csv and uses d3.format for percentage display.

118121a1545
85% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the percentage of sales for different items, with a legend positioned to the right showing each item’s name and corresponding value. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the dataset from a GitHub gist. The visualization renders as SVG, with section labels and legend text styled via CSS.

RRahulSai05
85% match