fresh block

100%

✓ Published0🌍 Public

Last edited Feb 19, 2018

Created on Feb 16, 2018

This example shows an animated donut chart comparing two datasets: the number of fires and acreage burned, loaded from a TSV file. Toggling between the datasets via radio buttons triggers a smooth transition of the chart’s arcs. The visualization uses `d3.layout.pie`, `d3.svg.arc`, and a custom `arcTween` function with `transition.attrTween` to interpolate between the old and new arc angles. The data is parsed with `d3.tsv`, and the color scale uses `d3.scale.category20`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Donut Transitions

This example animates a donut chart through a sequence of three datasets, demonstrating how wedges split, translate, and reunite as values change across transitions. It uses D3 v3’s `d3.svg.arc`, `d3.layout.pie`, and a custom `transition.attrTween` to interpolate arc geometry, including inner and outer radii and start/end angles. The code chains transitions with `setTimeout` to cycle through data states, relying on a square-root `d3.scale` to map summed values to radii and `d3.scale.category20` for color. The rendering targets SVG paths, with animation driven by D3’s transition system.

SSpaceActuary

79% match

Loading thumbnail…

fresh block

Two donut charts display randomly generated sales data for five product tiers, each slice filled with a radial gradient that darkens toward the edge for a subtle 3D effect. A "Change Data" button triggers animated transitions using `gradPie.transition`, which relies on D3 v3’s `transition.attrTween` and an interpolated arc path (`d3.svg.arc`). The custom `gradientPie.js` library builds gradients via SVG `radialGradient` elements and updates both charts simultaneously in 750 milliseconds, demonstrating reusable pie-chart logic with smooth data updates.

PPragyagarg

78% match

Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes

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

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

77% match

Loading thumbnail…

Interactive donut chart with transitions

This interactive donut chart updates live as the number of data points changes, with each arc smoothly transitioning to a new size and position. Users can type a new count into an input field, triggering random data regeneration and a one-second animated redraw. The visualization uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry, while `setInterval` automatically re-renders every two seconds. SVG paths are colored via `d3.scale.category20`, and the code also handles entering and exiting arcs for dataset size changes.

TThanaporn-sk

77% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

76% match

Loading thumbnail…

Donut Transitions v4

This example demonstrates a chained transition that updates a donut chart’s wedge values across three sequential datasets, using an animated tween to interpolate each arc’s start and end angles and outer radius. The visualization starts with seven wedges, morphs them into a single full circle, then multiplies them into three distinct slices, looping the cycle. Built with D3 v4, the code uses `d3.pie`, `d3.arc`, and `transition.attrTween` with a custom `tweenArc` function, while `d3.scaleSqrt` maps data sums to radial extents. The SVG rendering animates paths via `attrTween`, with a `setTimeout` driving the repeating transition.

SSpaceActuary

76% match