Fork of ice-7 q2

100%

Fork of ice-7 q2

✓ Published2🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

Forked from ice-7 q1

This example shows the distribution of air quality categories—such as Good, Moderate, Unhealthy, and Unhealthy for Sensitive Groups—as a pie chart with an interactive legend and tooltip. Using d3.rollup to aggregate counts from a hardcoded dataset, the SVG chart assigns each category a color-coded slice and displays its proportion. The code relies on D3 v7’s pie and arc generators, plus d3.select for DOM manipulation, with a tooltip that appears on hover.

AI-generated description

MIT Licensed

Similar vizzes

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 ICE-7 (Part-2) - Pie Chart

A pie chart visualizes the distribution of temperature readings from a weather CSV file across three ranges: low, medium, and high. It shows the proportional count of cities in each category using colored slices with labels. The visualization is built with D3 v7, fetching and parsing the external CSV via `d3.csvParse`, then using `d3.pie`, `d3.arc`, and an ordinal color scale to construct the SVG arcs. A separate HTML legend is generated from the same data, with color swatches and category labels.

MMonish Galla

82% match

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…

Fork of Fork of Fork of ICE-7 (Part-2) - Pie Chart

This pie chart visualizes temperature distribution of cities from a weather dataset, categorizing temperatures into low (<20°C), medium (20-30°C), and high (>30°C) ranges. The SVG chart, built with D3 v7, uses `d3.pie()` and `d3.arc()` to generate segments, with a color scale from `d3.scaleOrdinal(d3.schemeCategory10)`. Labels are positioned via `path.centroid()`, and a separate HTML legend displays color-coded range names. Data loads from an external CSV using `d3.csvParse`.

KKondreddy Saikiran reddy

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

81% match

Loading thumbnail…

Fork of Fork of Fork of ice7_3

This pie chart displays revenue distribution by category, with slices labeled directly and a legend to the right. Built with D3 v7, it loads CSV data from a GitHub gist, aggregates revenue using d3.rollup and d3.sum, and renders SVG paths via d3.pie and d3.arc. A d3.scaleOrdinal with the Tableau10 color scheme maps categories to colors, while text elements label each slice.

Kkanaparthieshitha@gmail.com

81% match

Loading thumbnail…

Fork of Fork of ICE-7 pie chart

This pie chart visualizes the number of car units sold, categorizing the data by class name and assigning each segment a distinct color from a predefined palette. The chart renders as an SVG with arcs generated using d3.arc and positions data through d3.pie, while d3.scaleOrdinal maps colors to categories. A legend on the right displays each class with its corresponding color and formatted value using d3.format. Data is loaded asynchronously from a CSV file via d3.csv.

Llikith1266

81% match

Loading thumbnail…

Fork of ICE-7.2 - Vinil

This example shows a pie chart of category sales from a CSV file, with each slice labeled and a legend displaying category names and values. Using d3.pie and d3.arc, it generates SVG paths for the pie slices, colored via d3.scaleOrdinal with d3.schemeTableau10. Text labels are positioned with d3.arc centroids, and a legend is built by appending rectangles and text to the SVG.

VVinil Karmilla

80% match