Arc Corners

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 16, 2014

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.

AI-generated description

In D3 3.5, you can generate rounded arcs with d3.svg.arc cornerRadius and separate adjacent arcs with d3.layout.pie padAngle. The schematic representation above shows the circles used to round the arcs’ corners.

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

85% match

Loading thumbnail…

D3 Shapes - Pi Charts

This example shows how to create a simple donut chart using D3’s arc generator. Five arc segments with varying start and end angles are rendered as SVG paths inside a single group, all filled with solid orange. The code configures the arcs with inner and outer radii, padding, and rounded corners via `d3.arc()`, then binds the data array to path elements using `.join()`. The visualization relies on D3 v7 and static SVG output, with no interaction or animation.

SSubhendu Karmakar

83% match

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda

83% match