pie chart transition example

100%

pie chart transition example

✓ Published0🌍 Public

Last edited Aug 9, 2020

Created on Aug 9, 2020

This example shows a single, animated pie chart where the foreground arc transitions to a new random angle every 1.5 seconds, with the background arc remaining fixed at 100%. Built with D3 v5, it renders two SVG path arcs using a custom `d3.arc` generator with bound inner and outer radii. The animation is driven by `d3.interval` and `transition.attrTween`, which interpolates the `endAngle` value in data space before computing the new path string, ensuring smooth angular transitions.

AI-generated description

example taken from http://bl.ocks.org/mbostock/5100636

MIT Licensed

Similar vizzes

Loading thumbnail…

arc tween example

An animated arc chart demonstrates pie-segment transitions using D3 v4’s `transition.attrTween`. A white foreground arc rotates to a new random angle every few seconds, while a segmented, multicolored ring around it sequentially fills or empties its sections. The code defines arc generators via `d3.arc`, binds data from a fixed array, and computes path interpolations between angles using `d3.interpolate`. SVG elements render the background ring and active arcs, with transitions triggered by `d3.interval`.

FFrissAnalytics

86% match

Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over

This example shows a donut chart displaying a percentage value, where the foreground arc animates to its final angle using a repeating transition. The arc’s color shifts through a gradient that changes based on the input percentage, with hover effects highlighting the path by increasing its stroke width and color. Built with D3 v5 in a React framework, the visualization uses `d3.arc`, `transition.attrTween` for smooth angle interpolation, and `linearGradient` definitions for the dynamic color stops.

SSchmittYannic

85% 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 for percentage with transition, gradient color and mouse over

A donut chart visualizes a percentage value with a smooth animated transition, shifting the arc from zero to the given input over 750 milliseconds. The chart uses gradient colors that change based on the percentage range, from red for low values to green for high values. Hovering over the arc highlights it with a black stroke. The implementation uses D3 v5 with SVG rendering, leveraging `d3.arc`, `d3.interval`, and `transition.attrTween` for animation, alongside a linear gradient definition for color transitions.

SSchmittYannic

83% match

Loading thumbnail…

pieChart

This example shows a pie chart for absolute frequencies of categorical data, with an animated sweep-in effect for each slice and a dropdown menu to switch between the "note" and "student" columns. It uses React with D3 v5, rendering SVG paths via `d3.pie()` and `d3.arc()`. The animation is driven by `transition.attrTween` with `d3.interpolate` for angle changes. A button-styled tooltip appears on hover, and data is aggregated with `d3.nest()` before being passed to the chart.

SSchmittYannic

82% match

Loading thumbnail…

Extending Arcs

Hovering over a slice of this pie chart causes it to extend outward and darken, emphasizing that segment while the padding between arcs stays constant. The chart uses D3.js v3 with a `pie` layout and an `arc` shape with a fixed `padRadius`. Data is an inline array of Fibonacci numbers. Mouseover and mouseout events trigger `transition.attrTween` to smoothly interpolate each arc's `outerRadius`, with a delay on mouseout, while SVG paths handle the rendering.

Mmbostock

82% match

Loading thumbnail…

Dynamic pie chart

A dynamic pie chart renders five slices whose sizes and positions regenerate randomly every four seconds. D3 transitions animate the arc paths and percentage labels smoothly between states, using `attrTween` and `d3.arc` to interpolate start and end angles. The visualization updates in real time, with labels repositioned via centroid calculations and colors assigned through a sequential scale with the `interpolatePlasma` color scheme.

AAlireza-Dezfoolian

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

81% match