Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
IIyke2909
Last edited Oct 29, 2020
Created on Oct 28, 2020

This donut chart displays the distribution of gender counts from a CSV file, with Male (113) and Female (84) shown as two slices. Built with d3.v4 and SVG, it loads data via `d3.csv`, converts the total column to numbers, and uses `d3.pie()` to compute arc angles. The `d3.arc()` generator creates the paths, while `d3.scaleOrdinal` with `d3.schemeSet2` assigns slice colors, and each slice is labeled with its group name using the arc’s centroid.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled Document

This interactive donut chart displays survey data across gender, age, and race categories from a local JavaScript dataset. Three buttons let users switch between datasets, triggering a new pie chart with animated arc transitions using `d3.pie`, `d3.arc`, and `transition.attrTween`. The SVG rendering applies category-specific colors via a lookup function and shows tooltips on hover using D3 mouse events. SVG paths are drawn with a donut inner radius, and the chart initializes with the gender data on load.

GGerardoFurtado
83% match
Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Ssubratanp
81% match
Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans
81% match
Loading thumbnail…

Untitled

This example shows a donut chart with eight categorical slices, each labeled with a letter from "a" to "h" and connected to its slice via thin polylines. The chart uses dummy data defined as an object of key-value pairs, with slice colors mapped through `d3.scaleOrdinal` and the `d3.schemeDark2` palette. It computes arc paths using `d3.pie` and `d3.arc`, with a half-radius inner hole, while labels and leader lines are positioned via a second outer arc and centroid calculations. The visualization is rendered as SVG with semi-transparent slices and white stroke separations.

AAkshay U
80% match
Loading thumbnail…

Untitled

A donut chart displays the percentage distribution of five lottery games, with each sector labeled and separated by white strokes. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to generate colored slices from the CSV data, rendering text labels via the arc centroid API. The SVG chart is sized to 500 by 400 pixels, with a legend positioned in the upper left.

Vvenkatajayanth03
80% match
Loading thumbnail…

Untitled

A donut chart displays the distribution of students across university majors, with each slice labeled by its proportion and a legend pairing colors to majors. The visualization loads course data from a CSV file via `d3.csv`, then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry and assign categorical colors from a fixed palette. Values are formatted with `d3.format` and rendered as text labels directly on the chart.

Mmn0658
80% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
80% match
Loading thumbnail…

Untitled

This visualization shows a labeled pie chart breaking down a dataset by category, with each slice filled with a distinct ordinal color and accompanied by its category name. Built with D3 v4, the chart loads CSV data from a GitHub gist and uses the `d3.pie` layout, `d3.arc` for both the slice paths and label positioning, and `d3.scaleOrdinal` for the color palette. The SVG output centers the pie and adds a bold title, with pink stroke outlines on each slice.

AArv1228
79% match