Pie Chart Update, V

100%

Pie Chart Update, V

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 30, 2013

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.

AI-generated description

This example demonstrates using a data-join with a key function to update a pie chart.

Previous: Static Data-Join

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

85% match

Loading thumbnail…

Pie Chart

This interactive pie chart displays fruit counts across five regions—East, West, North, South, and Central—loaded from a TSV file. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.nest` to aggregate data, with SVG paths and labels animated via `transition.attrTween`. A radio-button option component, rendered with D3 selections, lets viewers switch between fruit categories, redrawing the chart with a Tableau10 color scale.

0007ebey

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

84% match

Loading thumbnail…

Pie Chart

This example shows an interactive pie chart that displays fruit quantities by region, with radio buttons to switch between fruit types. The chart renders as an SVG using React and D3 v5, employing `d3.pie` and `d3.arc` to generate the donut-shaped paths with an inner radius of 200 and outer radius of 300. Color encoding is handled by `d3.scaleOrdinal` with the Tableau10 scheme, while `d3.nest` groups the tab-separated fruit data, which originates from the World Bank population dataset.

SSchmittYannic

84% match