Donut Chart

100%

Donut Chart - Default Labels

✓ Published0🌍 Public

Last edited May 14, 2016

Created on May 14, 2016

This example shows a donut chart with animal names placed at the start of each arc, using default label positioning. The chart is rendered in SVG with D3.js, using `d3.svg.arc` and `d3.layout.pie` to create the slices. Text labels are attached to each arc via `textPath` elements referencing the slice’s path ID. The data is hardcoded in the script, with a color scale mapping sequential indices to a diverging palette, and the “Other” slice is grayed out.

AI-generated description

This is the first "Animal Donut Chart" example of the Blog Placing Texts on Arcs with D3.js in which the texts are placed at the start of each arc. All without writing the SVG path notations yourself.

The next step has this text centered along the arcs
The final version also has the bottom half of the texts flipped

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/3a33bfdeda5b8f8c8cd2'>Text on an Arc - Animal Donut Slices - Default Arc Labels</a>

forked from <a href='http://bl.ocks.org/ShuanWu/'>ShuanWu</a>'s block: <a href='http://bl.ocks.org/ShuanWu/42c4f3ee44c3ba2b2036f30e24e1a215'>Text on an Arc - Animal Donut Slices - Default Arc Labels</a>

Similar vizzes

Loading thumbnail…

Donut Chart - Default Labels

This example shows a donut chart where each slice is labeled with an animal name, with the text placed along the arc starting at each slice’s beginning. The chart uses D3.js version 3.5.6, with `d3.svg.arc` for the donut slices and `d3.layout.pie` to compute the arc angles from a hardcoded dataset of eight animal values. Color is assigned via a linear scale with an HCL interpolator, and labels are rendered using SVG `<textPath>` elements referencing the arc paths. The data is embedded directly in the script rather than loaded from an external file.

SShuanWu

97% match

Loading thumbnail…

Labels

This example shows a donut chart with value labels placed outside the arcs, connected by thin pointer lines with circular endpoints. The code uses d3.pie and d3.arc to compute arc geometry and render SVG paths, while label positions are calculated from each slice’s mid-angle. d3.scaleOrdinal with d3.interpolateHslLong assigns colors, and text elements are positioned using bounding-box measurements to place pointers correctly. The dataset is a static array of five numbers (apples), rendered entirely with SVG in d3 v6.

PPiotr Paszek

86% match

Loading thumbnail…

Placing text within a arc

This donut chart displays eight animal categories in equal segments, with labels positioned along the arc’s outer edge. Labels below the horizontal midline are flipped to remain upright, improving readability. Built with D3.js 3.5, the example uses `d3.svg.arc` for the donut slices and `d3.layout.pie` to compute the angles. It programmatically manipulates the SVG path data for the text placement, reversing the arc direction for segments where the end angle exceeds 90 degrees.

LLiml

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

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

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

82% match

Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda

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

81% match