Skip to main content
SimilarExport ZIP
100%

Yaswanth_Duddu_ICE7

✓ Published0🌍 Public
YYaswanth
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from HTML Starter

This example displays a reusable pie chart showing category shares for a small retail dataset of six items like Grocery and Electronics, with hover tooltips revealing exact values. Built with D3 v7, the chart generates an SVG pie layout using `d3.pie` and arc generators, with slice labels placed along polylines and a separate legend. The code is structured as a configurable pie chart factory function, allowing flexible accessor settings for name and value, and supports responsive resizing within its container. A halo effect on labels and a fixed tooltip enhance readability.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ice7 part2

This example presents an interactive pie chart built with D3.js v7 that visualizes static sales data across four product categories. The chart renders as an SVG, with each category represented by a colored slice, and uses a hover interaction to display a tooltip showing the category name and its sales value. The code employs `d3.pie()` to compute the arc angles, `d3.arc()` to generate the slice paths, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. A separate HTML legend lists each category with its corresponding color swatch.

Jjammigumpula.priyanka193@gmail.com
81% match
Loading thumbnail…

Yaswanth_duddu_ICE7

This visualization displays the species distribution of the Palmer Penguins dataset as a stylized, animated 3D-effect pie chart. Using D3.js v7, it loads data from a CSV file and aggregates counts by species with `d3.rollup`. Pie slices are drawn with `d3.pie` and `d3.arc`, featuring linear gradients, animated entrance via `transition.attrTween`, and hover expansion effects. Connector lines and labels are added using `outerArc.centroid`, with the SVG rendered on a card-style background featuring drop shadows.

YYaswanth
79% 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
78% 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
77% match
Loading thumbnail…

ICE-7 SAKETH SARA PIE

This example shows a donut-style pie chart of product sales loaded from a CSV file, with an ordinal color scale and a legend. Built with D3 v7, it uses `d3.pie()` and `d3.arc()` to generate the slices, while `d3.scaleOrdinal()` and `d3.schemeTableau10` assign colors. Tooltips appear on mousemove over each arc, and labels display for products with sales values above 90. The chart is rendered as SVG within an HTML page, styled by a linked stylesheet.

Ssarasaketh3@gmail.com
77% 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
77% match
Loading thumbnail…

pie chart

A pie chart visualizes customer spending across four categories—Food, Clothing, Electronics, and Entertainment—using quantitative values. Built with D3.js v7, it renders an SVG slice for each category, sized by its value, with labels positioned at each slice’s centroid. A color scale from `d3.schemeCategory10` and `d3.scaleOrdinal` map categories to fills, while `d3.arc` and `d3.pie` compute the geometry. A separate HTML legend lists each category with its corresponding color and value. The chart uses a fixed 500×500 pixel canvas and is re-rendered by clearing and redrawing the SVG elements.

Ssrinathkarumuru@my.unt.edu
77% match
Loading thumbnail…

Yaswanth_Duddu_ICE7

This scatterplot example uses D3.js to render a simple two-dimensional point distribution. The visualization displays individual data points positioned across the plotting area, with styling controlled through a custom stylesheet that includes a large message element. The implementation leverages standard D3 selection methods to append SVG circles for each data point, while the accompanying style sheet applies font sizing and text alignment rules. The example includes a basic JavaScript entry point that logs a message to the browser console, serving as a minimal demonstration of D3’s core data-binding capabilities.

YYaswanth
77% match