Labeling the pie and doughnut charts

100%

Labeling the pie and doughnut charts

✓ Published0🌍 Public

Last edited Mar 20, 2022

Created on Mar 20, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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…

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

85% match

Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

SSubhendu Karmakar

85% match

Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

FFrissAnalytics

84% match

Loading thumbnail…

D3 Layouts - Pie charts

This example shows a donut-shaped pie chart that visualizes a small dataset of six numeric values. The chart is rendered as an SVG, with each value displayed as a white label at the centroid of its corresponding arc. The code uses D3’s `pie` layout generator to compute the arc segments, `d3.arc` to define the ring’s inner and outer radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign categorical colors. The chart is drawn using D3’s select/append API on a blank HTML page.

KKaustav Sen

84% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

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

Pie chart with labels

This pie chart displays three categories (A, B, C) as a donut, with each slice labeled by its numeric value and connected to the slice via a thin pointer line. Built with D3 v3, it uses `d3.layout.pie` to compute angles, `d3.svg.arc` with an inner radius for the donut shape, and `d3.scale.category20` for slice colors. Labels are positioned outside the chart using trigonometry on start and end angles, with anchors adjusted based on text bounding boxes. The data is hardcoded in the script.

DDDDDDanica

83% match