Skip to main content
SimilarExport ZIP
100%

Arc Corners III

✓ Published0🌍 Public
Mmbostock
Last edited Dec 19, 2022
Created on Nov 20, 2014

Two donut charts display the same Fibonacci sequence as a series of arcs. One chart uses straight-edged arc segments, while the other animates its corner radius between zero and the maximum possible, transitioning from sharp to fully rounded corners. The animation uses a cubic-in-out easing over 2.5 seconds. The code uses `d3.layout.pie` and `d3.svg.arc` with its `cornerRadius` method, rendering to SVG with `d3.select`, `d3.timer`, and the `d3.ease` function.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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
89% 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
89% 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
86% 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
85% match
Loading thumbnail…

Arc Corners

This example visualizes the Fibonacci sequence [1, 1, 2, 3, 5, 8, 13] as a pie chart with rounded corners. Slices appear semi-transparent with distinct colors, separated by white strokes, and the outer edge of each slice has small circle outlines marking the corner positions. The visualization uses d3.arc with a cornerRadius setting to draw the rounded slice shapes, while d3.pie computes the angles. Rendering occurs on a Canvas element, with context settings like globalAlpha and stroke properties controlling appearance. The corner circles are drawn using a second d3.arc instance.

Mmbostock
85% match
Loading thumbnail…

Rounded Arc Test

Animated test of rounded and padded arcs rendered to Canvas with d3-shape. The Fibonacci sequence data is visualized as a pie chart, with arcs transitioning between square and fully rounded corners. Using d3-shape’s `arc` and `pie` APIs, the animation cycles every 2.5 seconds, adjusting `cornerRadius` via d3-ease’s `cubicInOut`. Stroke styles and a gray outline highlight the changing geometry.

Mmbostock
82% 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
80% match
Loading thumbnail…

Arc Tween

A donut chart demonstrates arc transitions using D3 v4. An orange foreground arc repeatedly animates to a new random end angle, while a static gray background arc represents the full circle. The code uses `transition.attrTween` with a closure that interpolates between the current and target end angles via `d3.interpolate`, updating the bound datum before recomputing the SVG path with `d3.arc`. Rendering is SVG, with transitions triggered every 1.5 seconds by `d3.interval`.

Mmbostock
80% match