Fork of Labels

100%

Fork of Labels

✓ Published0🌍 Public

Last edited Jul 23, 2021

Created on Jul 23, 2021

Forked from Labels

A donut chart with three slices displays hardcoded apple counts, with each slice filled by a distinct image pattern loaded from external URLs via SVG `<pattern>` elements. Labels showing the numeric values are positioned outside the pie's outer radius, and thin black pointer lines with circular markers connect each label to its corresponding slice. The visualization is built with D3 v6, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated color ramp, while the pointer paths are drawn by manually computing angular positions and SVG path commands.

AI-generated description

Donut chart labels outside the chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Labels

This example shows a donut chart of five apple-related values with labeled slices. Each label is positioned outside the arc and connected to its corresponding slice via a thin pointer line ending in a circular marker. The implementation uses D3 v6’s `d3.pie` and `d3.arc` to compute slice geometry, with labels placed using trigonometric calculations based on each slice’s mid-angle. SVG markers are defined for both a triangle arrowhead (demonstrated in the README) and the circle used on the pointers, while `d3.scaleOrdinal` with a red-to-blue interpolator colors the slices.

PPiotr Paszek

93% match

Loading thumbnail…

Fork of Labels

A donut chart displays three apple values with labels positioned outside the chart’s outer radius. The visualization uses only D3.js v6 with SVG rendering, calculating arc paths via `d3.arc` and slice angles via `d3.pie`. Labels are placed using trigonometry and each label’s bounding box (`getBBox`) to compute adjusted coordinates, though the commented-out pointer lines and markers remain inactive. The chart applies a color scale derived from an HSL interpolation and notable padding and corner radius for the arcs.

PPiotr Paszek

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

85% match

Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B

83% match

Loading thumbnail…

Labeling the pie and doughnut charts

This example demonstrates how to label pie and doughnut charts with value annotations and pointer lines. It renders a single dataset of apple counts as a doughnut chart using `d3.layout.pie()` and `d3.svg.arc()`, with a categorical color scale. Labels are positioned at the outer edge of each arc using trigonometric calculations on start and end angles, then connected to their corresponding slices via small marker-tipped paths. The implementation uses D3 v3 APIs like `d3.select`, `d3.svg.arc`, and SVG `getBBox()` to compute text dimensions for accurate line placement.

Sshadreza

83% match

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu

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

81% match

Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

FFrissAnalytics

81% match