Arc Padding III

100%

Arc Padding III

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 29, 2015

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.

AI-generated description

A demonstration of arc.padAngle.

gpl-3.0 Licensed

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

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

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

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

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

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

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

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

80% match