Pie Chart Update, II

100%

Pie Chart Update, II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 7, 2011

Clicking the radio buttons in this donut chart switches the displayed metric between apple and orange counts from the `data.tsv` file. The chart uses a `d3.layout.pie` and `d3.svg.arc` to create the donut shape, with paths initially drawn and stored. On selection, the pie’s value function changes, and `transition().attrTween("d", arcTween)` animates the arcs over 750 milliseconds by interpolating between the stored and new angles.

AI-generated description

This variation of a donut chart demonstrates how to update values with an animated transition. Clicking on the radio buttons changes the displayed metric.

Next: Missing Data<br> Previous: Static Update

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Pie Chart Update, III

A pie chart with a donut layout transitions between two datasets, apples and oranges, loaded from a TSV file. The view shows the same arcs morphing between different values, with missing entries treated as zero to maintain object constancy. Two radio buttons switch the active dataset, triggering a 750-millisecond arc tween using D3’s `transition.attrTween` and `d3.interpolate`, which updates the stored angles in `_current`. The chart uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and SVG `path` elements, with a timed automatic switch to oranges after two seconds.

Mmbostock

92% match

Loading thumbnail…

Pie Chart Update, I

This example shows an interactive donut chart whose displayed metric changes when the user selects a radio button. The chart initially renders apple counts from a TSV file, then after two seconds automatically switches to orange counts, updating the arc angles accordingly. Using D3 v3, the code employs `d3.layout.pie` and `d3.svg.arc` to compute and draw SVG path arcs, while the `change` event handler redefines the pie’s value function and redraws the arcs. A `color` scale from `d3.scale.category20` assigns distinct fills to each segment.

Mmbostock

92% match

Loading thumbnail…

Pie chart

This interactive pie chart visualizes regional apple and orange counts from a static JSON dataset, with radio buttons toggling between fruit types. The donut chart updates its arcs using `d3.pie` and `d3.arc`, while `transition.attrTween` animates shape changes. A legend built with SVG circles and text labels shows region names and colors from a `d3.scaleOrdinal` palette. The rendering uses D3.js (v5) with SVG and includes a 2-second delayed arc transition after each update.

Rrlia0010

86% match

Loading thumbnail…

Pie Chart Update, IV

This example demonstrates animated updates to a pie chart using D3’s data-join with a key function, switching between fruit categories. A set of radio buttons lets the user choose a fruit, and the chart’s arcs smoothly transition to reflect the regional counts for that fruit. The visualization renders as SVG, using `d3.layout.pie` and `d3.svg.arc` to compute and draw the arcs, while `d3.nest` groups the tab-separated dataset by fruit. Arcs are added, removed, and repositioned via `path.enter()`, `path.exit()`, and `path.attr("d", arc)`, with colors assigned by `d3.scale.category20()`.

Mmbostock

86% match

Loading thumbnail…

Pie Chart Update, V

This example shows an animated pie chart that updates when the user selects a fruit type via radio buttons. The chart uses a data-join with a key function to smoothly transition arcs between states, preserving the identity of each region’s slice. Built with d3.v3, it leverages `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry over 750 milliseconds. The data comes from a TSV file, nested by fruit with `d3.nest`, and the SVG paths animate by finding neighboring arcs to minimize movement.

Mmbostock

85% match

Loading thumbnail…

Pie chart

The visualization displays two interactive pie charts comparing apple and orange counts across five regions, with a toggleable radio interface to switch datasets. Built with D3.js (v5.16.0), it renders an animated SVG donut chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` color scales. Legends appear as colored dots and labels beside the chart. On dataset change, arcs transition smoothly via `transition.attrTween` with interpolation, and a delayed auto-animation replays the arc tweens every two seconds. Data is loaded asynchronously from `data.json` via `d3.json`.

KKrister

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

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