Pie Padding

100%

✓ Published0🌍 Public

Last edited Dec 19, 2022

Created on Dec 2, 2015

Eight wedges with Fibonacci-scaled areas transition smoothly from touching to separated as a pie chart’s pad angle animates. The example contrasts two d3 APIs: setting `pie.padAngle` directly preserves each arc’s proportional area, while `arc.padAngle` would shrink small slices disproportionately. Drawn on a Canvas 2D context, the animation cycles over 2.5 seconds using `d3.timer` and `d3.easeCubicInOut`, with outlines and fills stroked separately to show the gaps.

AI-generated description

This animation demonstrates the benefit of setting pie.padAngle directly: the relative areas of arcs are preserved. Setting arc.padAngle instead disproportionately affects small arcs, introducing bias.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Pie Padding II

Seven pie slices represent the Fibonacci sequence, with angular padding between arcs separating them. A continuous animation cycles the padAngle from zero to its maximum value and back, causing the gaps between slices to expand and contract while their relative areas remain unchanged. The example uses D3 3.5’s `d3.layout.pie` with `.padAngle()` and `d3.svg.arc`, rendering SVG paths with a group element centered in the viewport. A `d3.timer` applies a cubic-in-out easing over 7.5 seconds, updating each arc’s path data frame-by-frame.

Mmbostock

93% match

Loading thumbnail…

Pie Padding

This example demonstrates a pie chart with small gaps between its slices, created using a hardcoded array of eight numeric values. The `d3.layout.pie` function with a `padAngle` of .02 adds parallel-sided padding between arcs, while approximately preserving their relative areas and angles. An `d3.svg.arc` defines the donut shape, and the chart is rendered as SVG paths, with each slice colored using `d3.scale.category10`.

Mmbostock

89% match

Loading thumbnail…

Arc Padding

This animation shows how directly setting an arc’s `padAngle` biases small slices, shrinking their visible area more than large ones. It uses the `d3.arc` and `d3.pie` APIs from d3.v4, drawing to a Canvas element. A `d3.timer` and `d3.easeCubicInOut` interpolate the pad angle between zero and a fixed value over a 2.5-second cycle, while the underlying data values `[1, 1, 2, 3, 5, 8, 13, 21]` remain static. The rendering first strokes a padded outline, then fills the arcs in gray.

Mmbostock

88% match

Loading thumbnail…

Arc Padding II

Seven wedges of varying size form a donut chart, with each slice tinted by a semi-transparent fill and outlined in a thin stroke. The example highlights `d3.arc` with a `padAngle` of 0.03, spacing adjacent arcs apart. It draws using Canvas 2D via the arc’s `.context`, processing an array of Fibonacci numbers through `d3.pie`. The chart renders on a 960×500 canvas, with d3.v4 alpha providing the shape and layout helpers.

Mmbostock

87% match

Loading thumbnail…

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.

Mmbostock

84% match

Loading thumbnail…

Arc Padding III

A radial visualization of seven wedges uses arc padding to create gaps between segments. The example applies a `d3.arc` generator with specified inner and outer radii and a `padAngle` of 0.03, rendered on a Canvas via the `context` parameter. Drawn with `d3.pie` and Fibonacci data, the semi-transparent fills and stroke outlines are applied through Canvas path operations on the computed arcs.

Mmbostock

84% 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…

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.

Mmbostock

81% match