Arc Padding II

100%

Arc Padding II

✓ Published0🌍 Public

Last edited Feb 4, 2016

Created on Feb 4, 2016

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.

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>

Similar vizzes

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

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

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

87% match

Loading thumbnail…

Arc Corners

This example demonstrates D3’s rounded-arc capability by rendering a donut chart where each slice has rounded corners and small gaps between adjacent segments, using the Fibonacci sequence as sample data. The visualization is drawn as SVG, with the arcs generated by `d3.layout.pie` and `d3.svg.arc`’s `cornerRadius` and `padAngle` options. Overlaid on the chart are faint reference circles that mark the exact positions where the arc corners are rounded, computed manually from each slice’s angles and radii. The code also applies a category color scale and semi-transparent fills to distinguish the slices.

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…

Arc Corners II

This example demonstrates the `cornerRadius` option for D3’s arc generator, which rounds the corners of pie-slice shapes. Seven arcs, sized by Fibonacci numbers, are drawn in translucent colors over a white stroke on a Canvas. The code uses `d3.pie()` to compute angles, `d3.arc()` with `cornerRadius` to generate paths, and the Canvas 2D API (`context.fill`, `stroke`) for rendering. A second pass overlays small circles at each corner to highlight the rounded geometry.

Mmbostock

83% match

Loading thumbnail…

Arc Corners IV

A donut chart presents eight sequential values from a hardcoded Fibonacci-like array as colored wedges with rounded outer corners. The d3.svg.arc generator applies a cornerRadius of 20 pixels, while d3.layout.pie sets a padAngle to separate slices. Rendered as SVG paths in a centered group, each wedge uses a category10 color scale. The visualization highlights how rounded corners and padding soften the classic pie chart aesthetic, using D3 v3’s layout and shape APIs.

Mmbostock

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

83% match