Arc Corners

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 29, 2015

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.

AI-generated description

A demonstration of arc.cornerRadius.

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

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

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

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

87% match

Loading thumbnail…

Arc Corners III

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.

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…

Pie Centroid

A pie chart displays seven categorical slices with distinct colors, each marked by a black dot at its centroid. The centroids are computed using the `arc.centroid` method from d3-shape, which returns a point suitable for label positioning rather than the geometric center of the arc. The visualization renders to a Canvas element, with the pie drawn via `d3.arc` and the dots via `d3.symbol`, both configured with the Canvas context. The underlying data is the Fibonacci sequence `[1, 1, 2, 3, 5, 8, 13]`, and the entire layout is created using the d3.v4 alpha library.

Mmbostock

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

81% match