Untitled

100%

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows browser usage statistics for January 2017 as a donut chart, with each slice labeled by browser name and colored via a categorical scale. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the arc paths, and `d3.scaleOrdinal` for the color mapping. Data from the local CSV file `lottery.csv` is loaded with `d3.csv`, and the chart is rendered as SVG within a React-compatible HTML page. The title appears as static text, while slice labels are positioned using `label.centroid`.

Vvenkatajayanth03

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

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

83% match

Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

AAndrea Mignone

82% match

Loading thumbnail…

Untitled

A donut chart displays five values as colored arcs with labels positioned outside the chart. Each label is connected to its corresponding arc by a thin pointer line ending in a small circular marker. The visualization uses d3.pie to compute arc angles and d3.arc for the donut shape, while d3.scaleOrdinal with interpolateHslLong assigns colors. Labels and pointer paths are positioned manually using trigonometry, and SVG markers define the pointer endpoints.

PPiotr Paszek

82% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

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

81% match

Loading thumbnail…

Untitled

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.

IIyke2909

80% match