Skip to main content
100%

Pie charts labels

✓ Published0🌍 Public
Aaltocumulus
Last edited May 25, 2016
Created on May 25, 2016

This donut chart displays categorical data with labels connected to each slice by thin polyline leaders. A "randomize" button triggers smooth transitions between datasets. The visualization uses D3 v3's `d3.layout.pie` and `d3.svg.arc` to compute slice geometry, while `transition.attrTween` animates changes in slice paths, label positions, and connector endpoints. Labels alternate between left and right alignment depending on their angle, and the SVG rendering includes distinct groups for slices, labels, and lines.

AI-generated description

This variation of a donut chart demonstrates how to add labels with lines. Clicking on the button changes the displayed data. Check Pie Chart with Labels and Missing Data to see how to handle transitions with missing/new data.

forked from <a href='http://bl.ocks.org/dbuezas/'>dbuezas</a>'s block: <a href='http://bl.ocks.org/dbuezas/9306799'>Pie charts labels</a>

Similar vizzes

Loading thumbnail…

Pie charts labels

This example presents a donut chart where each slice has an animated label connected by a thin polyline. A "randomize" button triggers a smooth transition to a new dataset, and the labels reposition themselves, keeping their text anchored appropriately depending on which side of the chart they fall. The code uses d3.layout.pie, d3.svg.arc, and transition.attrTween to interpolate the slice arcs, label positions, and connector lines. It relies on d3.interpolate to handle the animation and source data is generated randomly from a fixed set of label names.

TThanaporn-sk
93% 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
93% match
Loading thumbnail…

Pie Chart Labels with missing data

This donut chart demonstrates how to label slices with external text and leader lines, and it gracefully handles missing or new data when the button is clicked. The randomized data updates trigger smooth animated transitions using `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate between states. Labels and polylines reposition via `outerArc.centroid` and tweened transforms, with the duration controlled by a slider. The example uses D3 v3 to render SVG, and it merges old and new datasets to keep removed slices from disappearing abruptly.

KKacieW
90% match
Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

MMTClass
89% 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
86% match
Loading thumbnail…

Pie chart

This example shows a donut-style pie chart that animates between two datasets after a three-second delay. The initial render displays four categorical slices sized 100,000, then re-renders with five new proportions representing a different dataset. The chart uses d3.pie to compute arc angles and d3.arc with an inner radius to create the donut shape, while a d3.scaleOrdinal assigns categorical colors. The visualization is drawn as SVG elements, and both datasets are hardcoded in JavaScript.

KKrister
85% match
Loading thumbnail…

Pie chart with annimation

This interactive pie chart displays six categorical values under three selectable datasets (“Total,” “Option 1,” “Option 2”) with a donut layout and legends. It animates slice arc changes using D3’s `transition` and `attrTween`, interpolating between old and new arc paths when switching datasets via radio buttons. The SVG rendering includes slice paths, label polylines, and tooltips on mouseover, while colors come from `d3.scale.category20()`. The code mixes d3.v4 and d3.v3 APIs, including `d3.layout.pie` and `d3.svg.arc`.

DDDDDDanica
84% 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
84% match