The ratio of

100%

✓ Published0🌍 Public

Last edited Oct 13, 2021

Created on Oct 13, 2021

Forked from Labels

This donut chart visualizes the proportion of five apple values from a static dataset. The chart uses a blue-to-red color scale and places value labels outside the donut’s outer radius, with thin pointer lines and circular markers connecting each label to its corresponding arc segment. Built with D3 v6, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering labels and markers as SVG text and path elements, with label positioning calculated from arc start and end angles.

AI-generated description

Donut chart labels outside the chart

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

JJoachimSchaeffer

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

83% match

Loading thumbnail…

Donut chart

A donut chart displays a single numeric value of 47 as a proportion of 100, rendered with 20 equal arc segments around a central hole. Blue segments represent the value, while grey segments show the remainder, with a partial blue arc for the fractional part. Built with React and D3 v5, the code uses the `d3.arc` API to generate SVG paths, setting inner and outer radii from the SVG height, and computes angles via `Math.PI` divisions. The SVG element is selected with `d3.select`, and strokes create separation between segments.

BBhavyatulasi

83% match

Loading thumbnail…

Fork of Labels

This example shows a donut chart of five apple-related values with labeled slices. Each label is positioned outside the arc and connected to its corresponding slice via a thin pointer line ending in a circular marker. The implementation uses D3 v6’s `d3.pie` and `d3.arc` to compute slice geometry, with labels placed using trigonometric calculations based on each slice’s mid-angle. SVG markers are defined for both a triangle arrowhead (demonstrated in the README) and the circle used on the pointers, while `d3.scaleOrdinal` with a red-to-blue interpolator colors the slices.

PPiotr Paszek

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

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…

Labeling the pie and doughnut charts

This example demonstrates how to label pie and doughnut charts with value annotations and pointer lines. It renders a single dataset of apple counts as a doughnut chart using `d3.layout.pie()` and `d3.svg.arc()`, with a categorical color scale. Labels are positioned at the outer edge of each arc using trigonometric calculations on start and end angles, then connected to their corresponding slices via small marker-tipped paths. The implementation uses D3 v3 APIs like `d3.select`, `d3.svg.arc`, and SVG `getBBox()` to compute text dimensions for accurate line placement.

Sshadreza

82% match