Pie Chart Update, II

100%

Pie Chart Update, II

✓ Published0🌍 Public

Last edited Jun 5, 2017

Created on Jun 5, 2017

A donut chart displays two metrics—apples and oranges—for a set of categories. The chart animates between the two datasets when a radio button is selected or after a two-second automatic switch. The code uses `d3.layout.pie` to compute angles, `d3.svg.arc` for the donut shape, and `transition.attrTween` with an interpolated arc function to smoothly update the paths’ rendered angles. Data is loaded from a TSV file with `d3.tsv`.

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

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1346410'>Pie Chart Update, II</a>

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

93% match

Loading thumbnail…

Pie Chart Update, II

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.

Mmbostock

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

90% match

Loading thumbnail…

Pie Chart Update, V

This example shows an interactive pie chart that updates its arc segments when the user selects a fruit type from radio buttons in a form. The chart displays regional fruit counts from a TSV data file, with each region represented by a colored path. The visualization uses `d3.layout.pie` to compute arc angles and `d3.svg.arc` for the donut shape. When a fruit changes, a data-join keyed by region enables smooth transitions via `transition.attrTween` and `d3.interpolate`, animating the arcs as they expand, contract, or disappear.

SSpaceActuary

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

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

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

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

85% match