Pie Chart II

Extending Arcs

Hovering over a slice of this pie chart causes it to extend outward and darken, emphasizing that segment while the padding between arcs stays constant. The chart uses D3.js v3 with a `pie` layout and an `arc` shape with a fixed `padRadius`. Data is an inline array of Fibonacci numbers. Mouseover and mouseout events trigger `transition.attrTween` to smoothly interpolate each arc's `outerRadius`, with a delay on mouseout, while SVG paths handle the rendering.

87% match

Arc Corners II

Animated pie charts cycle through a transition where each slice’s corner radius and inner radius morph between sharp and rounded, and the gaps between slices alternately collapse and expand. The visualization uses the Fibonacci sequence as its data. Built with d3.v3, it relies on the `d3.layout.pie` and `d3.svg.arc` APIs, rendered as SVG paths, with a cubic-in-out easing function driving the 2.5-second animation loop.

85% match

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

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

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

Pie Chart

A pie chart displays five categorical values as proportional, colored arcs with hover highlighting and percentage labels. The chart uses d3.layout.pie to compute arc angles and d3.svg.arc to generate SVG paths, with an ordinal color scale for fills. Hovering translates the arc group outward via a transition, while labels rotate to align with each segment’s midpoint. The visualization is built with d3.v3 and renders entirely in SVG.

11Cr18Ni9

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.

Pie Chart

Ten random values are visualized as a pie chart that first animates from a single point into a full circle, then morphs into a donut chart with a hole in the center. The animation uses two successive `transition.attrTween` calls on the path's `d` attribute, with `bounce` and `elastic` easing functions. The SVG is built using the D3 v3 API, including `d3.layout.pie()`, `d3.svg.arc()`, and `d3.scale.category20()` for coloring each slice.