Placing text within a arc

100%

Placing text within a arc

✓ Published1🌍 Public

Last edited Apr 15, 2024

Created on Apr 9, 2024

This donut chart displays eight animal categories in equal segments, with labels positioned along the arc’s outer edge. Labels below the horizontal midline are flipped to remain upright, improving readability. Built with D3.js 3.5, the example uses `d3.svg.arc` for the donut slices and `d3.layout.pie` to compute the angles. It programmatically manipulates the SVG path data for the text placement, reversing the arc direction for segments where the end angle exceeds 90 degrees.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

84% match

Loading thumbnail…

Fork of Placing text within a arc year calendar

This example shows a donut chart displaying twelve months of the year as colored arcs, with month names placed along the curved paths of the arcs. The code uses D3.js v3 with d3.svg.arc and d3.layout.pie to generate the chart, while d3.scale.linear with d3.interpolateHcl creates a color gradient from blue to dark teal. Labels are positioned using SVG textPath elements along invisible arcs, with a JavaScript conditional that flips the arc direction for labels below the horizontal midpoint so they read upright. The chart uses placeholder data with each month having a value of 12, rendered as an SVG in a React context.

LLiml

83% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

83% match

Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Ssubratanp

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

81% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

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

80% match

Loading thumbnail…

Untitled

This example shows a donut chart that distributes categorical data into seven colored arcs, with each slice labeled by its corresponding category name. It renders directly to a Canvas element using the `d3.arc` and `d3.pie` APIs from D3 v4, with data loaded from an external TSV file via `d3.requestTsv`. The chart translates the Canvas context to center it, fills each arc with a distinct color from a predefined palette, applies white stroke separators, and places labels along the inner ring using `labelArc.centroid`.

Mmauricio-acosta-reyes

80% match