Fork of Fork of PIE chart for ICE-7

100%

Fork of Fork of PIE chart for ICE-7

✓ Published1🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

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.

AI-generated description

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

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

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

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

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

83% 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 the percentage of sales for different items using a pie chart with a color-coded legend. The chart is rendered as an SVG, with each slice’s arc and fill color generated via `d3.arc()` and `d3.scaleOrdinal()`. Data is loaded asynchronously from a CSV URL using `d3.csv`, and the legend displays each item’s name and sales percentage, formatted with `d3.format`. The visualization relies on D3 v5 and a custom `bundle.js`, with the pie layout computed by `d3.pie()`.

MMar-99

82% match