Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Bbhargavinalamothu@gmail.com
Last edited Apr 1, 2025
Created on Apr 1, 2025

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.

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

Fork of ICE - 7 Pie Chart

This example shows the percentage sales of different items in a pie chart, with a legend displaying each item’s name and corresponding value. Built with D3 v5, it loads data from a CSV hosted on GitHub, converts sales values to numbers, and uses `d3.pie()` and `d3.arc()` to generate the SVG path segments. Colors are assigned via `d3.scaleOrdinal`, while the legend is manually created with appended rectangles and text. The chart is rendered entirely in SVG, with a fixed width and height, and no interactive behavior.

MMar-99
82% 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
82% match
Loading thumbnail…

Fork of Fork of Fork of ICE7 PIE chart for vini

A pie chart displays salary per hour for employees, with each slice colored and labeled with its dollar value, alongside a legend pairing hourly rates with time categories. The visualization uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to load data from a CSV file hosted on GitHub, compute arc paths, and assign colors. Text labels are positioned using the arc centroid method, and the chart is rendered as an SVG within a React-based HTML page.

VVineela Reddy
82% match