Interactive donut chart with transitions

100%

Interactive donut chart with transitions

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

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.

AI-generated description

By create large random datasets, we can create charts that adapt and react to any dataset. This bl.ock allows users to generate any desired number of lines and any desired number of points and see the response of the chart change over time.

forked from <a href='http://bl.ocks.org/jonsadka/'>jonsadka</a>'s block: <a href='http://bl.ocks.org/jonsadka/fa05f8d53d4e8b5f262e'>Interactive donut chart with transitions</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

updated donutchart

This example shows an animated donut chart that displays a percentage value at its center and updates its arc and color gradient automatically. The chart visualizes a data array where the third element (80%) drives the arc length and determines a six-stop linear gradient color scheme ranging from red to green based on the value. Built with D3 v5 and React, it uses `d3.arc` for the donut geometry, `transition.attrTween` with an interpolator to smoothly animate the arc between states, and a toggle button to switch between two datasets. The SVG rendering includes a static gray background arc and a foreground path filled via a dynamically configured `linearGradient`.

SSchmittYannic

85% match

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

84% match

Loading thumbnail…

http://stackoverflow.com/questions/32510101/d3-why-is-enter-selection-not-showing-any-transition-for-a-donut-chart?noredirect=1#comment52896340_32510101

This example demonstrates a dynamic donut chart that updates its data every 750 milliseconds, with smooth animated transitions for the arc segments and labels. The visualization uses D3.js 3.5.6 to render SVG paths and text, employing `d3.layout.pie` for data binding and `transition.attrTween` with a custom pie tween to interpolate start and end angles. A color scale assigns each category a distinct hue, while a center text element displays the total sum. The code includes custom label rotation logic to keep text readable around the ring.

FFrissAnalytics

83% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

83% match

Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over changed

A donut chart displays a single percentage value with a smooth animated transition, using a gradient fill that shifts from red to green as the percentage increases. The chart includes a mouseover effect that highlights the arc and bolds the percentage text. Built with React and D3 v5, the visualization uses SVG paths, `d3.arc` for the donut shape, `transition.attrTween` for the animation, and a linear gradient defined in the SVG `defs` section. The percentage updates are driven by `d3.interval`, with the input data hardcoded as zero.

SSchmittYannic

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

82% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

82% match

Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over

A donut chart visualizes a percentage value with a smooth animated transition, shifting the arc from zero to the given input over 750 milliseconds. The chart uses gradient colors that change based on the percentage range, from red for low values to green for high values. Hovering over the arc highlights it with a black stroke. The implementation uses D3 v5 with SVG rendering, leveraging `d3.arc`, `d3.interval`, and `transition.attrTween` for animation, alongside a linear gradient definition for color transitions.

SSchmittYannic

82% match