Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
SSchmittYannic
Last edited Aug 10, 2020
Created on Aug 9, 2020
Forked from Hello VizHub

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
97% 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
97% match
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
84% match
Loading thumbnail…

pie chart transition example

This example shows a single, animated pie chart where the foreground arc transitions to a new random angle every 1.5 seconds, with the background arc remaining fixed at 100%. Built with D3 v5, it renders two SVG path arcs using a custom `d3.arc` generator with bound inner and outer radii. The animation is driven by `d3.interval` and `transition.attrTween`, which interpolates the `endAngle` value in data space before computing the new path string, ensuring smooth angular transitions.

SSchmittYannic
83% match
Loading thumbnail…

pieChart

This example shows a pie chart for absolute frequencies of categorical data, with an animated sweep-in effect for each slice and a dropdown menu to switch between the "note" and "student" columns. It uses React with D3 v5, rendering SVG paths via `d3.pie()` and `d3.arc()`. The animation is driven by `transition.attrTween` with `d3.interpolate` for angle changes. A button-styled tooltip appears on hover, and data is aggregated with `d3.nest()` before being passed to the chart.

SSchmittYannic
83% match
Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

MMTClass
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…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
81% match