Pie Chart Update, II (V5)

100%

Pie Chart Update, II (V5)

✓ Published0🌍 Public

Last edited Mar 31, 2018

Created on Mar 31, 2018

A donut chart displays five proportional segments, with radio buttons toggling between apple and orange datasets. The code loads tab-separated data via `d3.tsv`, builds arcs with `d3.arc`, and animates value changes using `transition.attrTween` with an in-place `_current` angle interpolator. D3 v5’s `d3.pie` recomputes segment angles on selection change, while SVG paths redraw smoothly over 750 milliseconds.

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, II (V5)

A donut chart displays apple or orange counts by region, toggled via radio buttons. On selection, the chart animates between datasets using `d3.pie` to compute arc angles and `d3.arc` for path geometry. Transitions rely on `transition.attrTween` with an interpolator stored in each path’s `_current` property, while new arcs enter with a fade-in stroke. The SVG is centered with a `g` transform, and colors come from `d3.scaleOrdinal`. Data loads from `data.json` via `d3.json`, with counts coerced to numbers before rendering.

Aadamjanes

95% match

Loading thumbnail…

Pie Chart Update, II

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`.

SSpaceActuary

90% match

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

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

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

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

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