Pie Padding

100%

✓ Published0🌍 Public

Last edited May 14, 2016

Created on May 14, 2016

This example demonstrates a pie chart with padding between its arcs, using D3 version 3.5’s `d3.layout.pie` to compute arc positions while preserving relative area and angle. The chart renders as an SVG donut with an inner and outer radius, colored via `d3.scale.category10()`. The data values are the Fibonacci sequence `[1, 1, 2, 3, 5, 8, 13, 21]`, and the gist forks mbostock’s original block, encoding each slice as a path element with `d3.svg.arc()`.

AI-generated description

D3 3.5’s d3.layout.pie supports optional padding between arcs. The sides of adjacent arcs are parallel, and the relative area (and angle) of arcs are approximately preserved.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/f098d146315be4d1db52'>Pie Padding</a>

gpl-3.0 Licensed

Similar vizzes

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

92% match

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

89% match

Loading thumbnail…

Pie Padding

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.

Mmbostock

89% match

Loading thumbnail…

Arc Padding II

This example displays a pie chart formed from seven nested arcs, each representing a value from the Fibonacci sequence [1, 1, 2, 3, 5, 8, 13]. The chart demonstrates the `padAngle` method from the d3-shape module, which inserts a small gap between each arc segment. Rendered on a Canvas, the visualization uses the `d3.arc` and `d3.pie` APIs to calculate the arc geometries, which are then drawn with semi-transparent fills and a stroke outline using the native Canvas context.

SSmith5mr

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

84% match

Loading thumbnail…

pie

A pie chart displays eight proportional segments with values from the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21). D3 v4’s `d3.pie()` computes the arc angles, while `d3.arc()` generates the SVG path for each slice with an inner radius of 0 and outer radius of 100. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns categorical colors, and white strokes separate the segments. The chart is rendered as static SVG elements, translated to position (200, 200) within the viewport.

EEranM6

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

83% match

Loading thumbnail…

Arc Padding II

This example shows a donut chart built from seven proportional arcs, each filled with a semi-transparent color and outlined with a darker stroke. It demonstrates the `padAngle` method of `d3.arc` in D3 v4, which adds a fixed angular gap between adjacent arcs. The data values are the Fibonacci sequence [1, 1, 2, 3, 5, 8, 13], processed by `d3.pie` to compute start and end angles. Rendering happens on a Canvas 2D context, with `context.fill` and `context.stroke` applying the color and outline for each path generated by the arc generator.

SSmith5mr

83% match