Arc Padding II

100%

Arc Padding II

✓ Published0🌍 Public

Last edited Feb 4, 2016

Created on Feb 4, 2016

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.

AI-generated description

A demonstration of arc.padAngle.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/f37b07b92633781a46f7'>Arc Padding II</a>

forked from <a href='http://bl.ocks.org/Smith5mr/'>Smith5mr</a>'s block: <a href='http://bl.ocks.org/Smith5mr/9b16c3815f461d8c0817'>Arc Padding II</a>

Similar vizzes

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

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

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

88% match

Loading thumbnail…

Pie Padding

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()`.

SShuanWu

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

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

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

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

84% match