Pie charts labels

100%

Pie charts labels

✓ Published0🌍 Public

Last edited Jul 29, 2017

Created on Jul 29, 2017

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.

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>

mit Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Pie Chart

Ten random values are visualized as a pie chart that first animates from a single point into a full circle, then morphs into a donut chart with a hole in the center. The animation uses two successive `transition.attrTween` calls on the path's `d` attribute, with `bounce` and `elastic` easing functions. The SVG is built using the D3 v3 API, including `d3.layout.pie()`, `d3.svg.arc()`, and `d3.scale.category20()` for coloring each slice.

Mmbostock

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

83% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

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

82% match

Loading thumbnail…

Gradient Pie

Two donut charts render randomized sales data with radial gradients that simulate a three-dimensional effect. The example draws two pie charts with D3 v3, using SVG `radialGradient` definitions to shade each arc from its assigned color to black. A button triggers `gradPie.transition`, which animates both charts to new random values via `transition.attrTween` and `d3.interpolate` on each path's arc geometry. The layout comes from `d3.layout.pie`, while gradients are created programmatically from each data point's color field.

NNPashaP

82% match