Pie Chart

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 19, 2012

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.

AI-generated description

So fun, right? But think twice before you use gratuitous enter animations; they can be annoying! The motion is distracting if you’re reading text elsewhere on the page. And, if you’re looking at the visualization, the animation forces you to wait. Instead, use animation to facilitate by making it easier to follow data across views, or as a form of visual explanation. For more details, read Object Constancy.

gpl-3.0 Licensed

Similar vizzes

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

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

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

Donut Transitions

Two random ten-slice donut charts transition back and forth between states through a four-stage chained animation. The slices first split into two rings, then translate to align with their final positions, resize to match new values, and finally reunite into a single ring. The example uses d3.v3 with `d3.layout.pie` for arc generation and chained `.transition()` calls with `.attrTween` to tween the `d` attribute of SVG paths, interpolating start and end angles as well as inner and outer radii.

Mmbostock

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

83% match

Loading thumbnail…

Pie Chart II

A pie chart animates its slices outward on hover. The example uses D3 v3 with SVG and animation. Each slice’s path is drawn with `d3.svg.arc`, and hovering triggers a transition via `transition.attrTween`, interpolating the slice’s `outerRadius` to expand it. The dataset is a simple array of five values, with percentages displayed as rotated text labels. The code is adapted from Mike Bostock’s “Extending Arcs” block and was built with Blockbuilder.

11Cr18Ni9

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

82% 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.

深深度碎片

82% match