Skip to main content
100%

Labels

✓ Published4🌍 Public
PPiotr Paszek
Last edited Mar 4, 2021
Created on Mar 1, 2021
Forked from HTML Starter

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.

AI-generated description

Donut chart labels outside the chart

MIT Licensed

Similar vizzes