Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Mmadalahyndavi123@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from HTML Starter

A pie chart displays the distribution of 110 students across five grade categories (A through E), with labeled slices showing category counts and a legend describing letter-grade ranges. Built with D3.js v7, the visualization loads a CSV file, uses `d3.rollup` to aggregate student counts by category, and employs `d3.pie` and `d3.arc` to generate SVG paths. A color scale colors each slice, while labels and legends are added programmatically to the SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A bar chart displays the grades of 100 individual students, with each bar color-coded by letter grade category from A (green) through E (red). The chart uses an ordinal color scale and a linear grade axis from 0 to 100, with student names rotated along the bottom axis. An interactive tooltip shows the student name, numeric grade, and category on hover. The code loads data from a local CSV file using `d3.csv` and builds the visualization with D3’s band and linear scales, axes, and tooltips, rendered as an SVG.

Mmadalahyndavi123@gmail.com
86% match
Loading thumbnail…

Fork of D3 Starter - vijq2(pie chart)

A pie chart visualizes the total exam score contribution for each grade category (A–D) using data from a 120-row CSV file. The D3.js v7 code loads the data, aggregates scores by category with `d3.rollup` and `d3.sum`, and renders slices via the `d3.pie` and `d3.arc` generators. Interactive tooltips appear on hover, displaying each category's total and letter label. A legend maps colors from `d3.scaleOrdinal` with the Tableau10 scheme, and the SVG output is white-stroked.

Vvijaysaichigullapally1@gmail.com
85% match
Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Ssahithya.voleti@gmail.com
85% match
Loading thumbnail…

Fork of

A pie chart displays marks for different subjects, with each slice colored and paired with a legend identifying the subject and its numeric value. The chart reads subject and mark data from a CSV file via `d3.csv`, and uses `d3.pie` and `d3.arc` to compute the slice geometry, while `d3.scaleOrdinal` assigns categorical colors. Legends are generated as SVG groups with rectangles and text, and the whole visualization is rendered as an SVG element.

Ppravalika.thogaru10@gmail.com
84% 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
84% match
Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart of fruit types with their total weights derived from a CSV file hosted on GitHub. The visualization uses D3 v6 to compute the pie layout with `d3.pie()` and generate slices via `d3.arc()`, while `d3.rollup()` aggregates the raw weight data by fruit. Labels appear at each slice’s centroid showing the fruit name and total pounds, and a legend with color-coded rectangles identifies each category. The SVG rendering also includes custom axis titles for context.

Ssahithya.voleti@gmail.com
83% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive pie chart visualizes country-level data for 2022, loading CSV data from a GitHub gist via the `d3.csv` API. It uses D3 v7’s `pie()` and `arc()` generators to compute and draw SVG paths for each slice, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Hovering over a slice or label changes its fill to orange, providing immediate feedback. The chart is rendered inside a static SVG container, with text labels positioned at arc centroids using `arcGenerator.centroid()`.

Mmukundakrishna.r@gmail.com
83% match
Loading thumbnail…

Fork of pie chart

This example shows a categorical distribution as a pie chart with a legend. It visualizes five categories with varying values, each slice labeled directly and represented by a distinct color in a separate legend. The chart is built using D3 v6, leveraging `d3.pie` and `d3.arc` generators to compute slice geometry, while `d3.scaleOrdinal` assigns the categorical color scheme. The SVG output is generated from hardcoded data, with the pie centered within a 500-pixel square and a custom-styled HTML legend positioned beside it.

Ssathvik0311@gmail.com
82% match