Progressive pie chart 2

100%

Progressive pie chart 2

✓ Published0🌍 Public

Last edited Jan 22, 2016

Created on Jan 22, 2016

A donut chart visualizes the proportion of 546 successful operations against 155 errors, with an animated arc that sweeps to the success ratio while the center count updates from zero to 546. Rendered as an SVG using D3 v3, the example builds a pie layout, computes an ordinal color scale, and animates the inner progress arc via `transition.attrTween` with an interpolated end angle. The dark-themed widget card displays percentage labels around the ring, and the animation runs on a 750-millisecond delay.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Progressive pie chart 3

This animated donut chart displays a "Progress Status" percentage within a stylized widget. A dark blue background ring contains a lighter blue foreground arc that grows to represent the current percentage value, with a large numeric label at the center. The visualization uses the D3.js library, leveraging `d3.layout.pie` for the arc geometry and `d3.svg.arc` to define the ring shape. The animation is driven by `pathForeground.transition()` with the `arcTween` function, which interpolates the arc's end angle and updates the center text every 1.5 seconds. The SVG rendering includes a custom filter inset-shadow applied to the arcs, created through a series of `feOffset` and `feComposite` elements. No external data file is used; the displayed percentage is randomly generated within a set range.

SSokrates86

92% match

Loading thumbnail…

Progressive pie chart 1

D3.js renders a donut chart displaying 65% progress. The visualization shows a dark-themed widget titled “Progress Status,” with a gradient-filled arc representing the completion ratio over a static background ring. The central percentage text updates dynamically during the animation. Using SVG paths and the d3.layout.pie and d3.svg.arc APIs, the arc’s angle interpolates from zero to the target proportion via transition.attrTween, while the count of 0 to 65 animates alongside it.

SSokrates86

91% match

Loading thumbnail…

Progressive pie chart 4

A progress widget displays a percentage value inside a ring-shaped pie chart, with the ring filling clockwise as the number animates. The visualization cycles automatically, updating the displayed percentage and arc every 1.5 seconds. Built with D3.js, the code uses `d3.layout.pie` for layout, `d3.svg.arc` to define both full-circle background and foreground arcs, and `transition.attrTween` with `d3.interpolate` to smoothly animate the arc and a text counter. The SVG includes an inset-shadow filter for a recessed effect, and the page styles the widget with a card-like header and centered layout.

SSokrates86

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

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

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

81% match

Loading thumbnail…

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

This example shows a donut chart displaying a percentage value, where the foreground arc animates to its final angle using a repeating transition. The arc’s color shifts through a gradient that changes based on the input percentage, with hover effects highlighting the path by increasing its stroke width and color. Built with D3 v5 in a React framework, the visualization uses `d3.arc`, `transition.attrTween` for smooth angle interpolation, and `linearGradient` definitions for the dynamic color stops.

SSchmittYannic

80% match

Loading thumbnail…

Pie chart

This example shows a donut-style pie chart that animates between two datasets after a three-second delay. The initial render displays four categorical slices sized 100,000, then re-renders with five new proportions representing a different dataset. The chart uses d3.pie to compute arc angles and d3.arc with an inner radius to create the donut shape, while a d3.scaleOrdinal assigns categorical colors. The visualization is drawn as SVG elements, and both datasets are hardcoded in JavaScript.

KKrister

79% match