Arc generator (centroid)

100%

Arc generator (centroid)

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on May 22, 2017

This example demonstrates how to compute and display the centroid of each arc in a donut chart, using the centroid to position labels. The visualization renders five colored arcs with white text labels placed at their geometric centers. The code uses the D3.js library, specifically the `d3.arc()` generator with `innerRadius` and `outerRadius` settings, and calls `arcGenerator.centroid()` to calculate label coordinates. The SVG output is styled with orange fills and bold white text, with data provided as an array of angle values in radians.

AI-generated description

Arc generator (centroid).

From D3 in Depth book by Peter Cook.

forked from <a href='http://bl.ocks.org/d3indepth/'>d3indepth</a>'s block: <a href='http://bl.ocks.org/d3indepth/c9fd848b9410cc543a437b34c266ac64'>Arc generator (centroid)</a>

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

81% match

Loading thumbnail…

Donut Centroid

A donut chart uses the golden ratio as its data values. The chart renders a ring of colored arcs on Canvas, with a black dot at the midpoint of each arc. That midpoint comes from `d3.arc`’s `centroid` method, which is positioned for label placement rather than as a geometric center. The example calls `d3.pie` to compute the arc angles, `d3.arc` to draw the shapes, and `d3.symbol` to draw the dot markers.

Mmbostock

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

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

79% match

Loading thumbnail…

Labels

This example shows a donut chart with value labels placed outside the arcs, connected by thin pointer lines with circular endpoints. The code uses d3.pie and d3.arc to compute arc geometry and render SVG paths, while label positions are calculated from each slice’s mid-angle. d3.scaleOrdinal with d3.interpolateHslLong assigns colors, and text elements are positioned using bounding-box measurements to place pointers correctly. The dataset is a static array of five numbers (apples), rendered entirely with SVG in d3 v6.

PPiotr Paszek

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

78% match

Loading thumbnail…

Untitled

A donut chart displays five values as colored arcs with labels positioned outside the chart. Each label is connected to its corresponding arc by a thin pointer line ending in a small circular marker. The visualization uses d3.pie to compute arc angles and d3.arc for the donut shape, while d3.scaleOrdinal with interpolateHslLong assigns colors. Labels and pointer paths are positioned manually using trigonometry, and SVG markers define the pointer endpoints.

PPiotr Paszek

77% match

Loading thumbnail…

D3 Arcs - Accessor Functions

This example shows how accessor functions can be used with the d3.arc() generator to draw a series of annular segments from an array of data objects, each with its own start and end angles. Using d3.arc() and the centroid method, the code creates SVG paths filled in orange and places white labels at the center of each arc. The data is supplied directly as JavaScript objects, and the d3.select() and join() pattern binds it to the DOM, with innerRadius and outerRadius fixed while angles vary per item.

SSubhendu Karmakar

77% match