Donut chart

100%

✓ Published1🌍 Public

Last edited Nov 11, 2020

Created on Jul 23, 2020

This donut chart visualizes a percentage value (47%) using a segmented arc, with blue segments representing the data portion and grey segments as the background track. The chart is rendered as SVG, with each of the 20 segments drawn as a path using the d3.arc function. The code calculates segment counts and a partial final segment based on the value, and applies stroke spacing between arcs to create the separated ring effect. The visualization uses React with D3 v5 for rendering.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Donut chart

A donut chart displays a single numeric value of 47 as a proportion of 100, rendered with 20 equal arc segments around a central hole. Blue segments represent the value, while grey segments show the remainder, with a partial blue arc for the fractional part. Built with React and D3 v5, the code uses the `d3.arc` API to generate SVG paths, setting inner and outer radii from the SVG height, and computes angles via `Math.PI` divisions. The SVG element is selected with `d3.select`, and strokes create separation between segments.

BBhavyatulasi

93% match

Loading thumbnail…

Donut chart

A donut chart displays the value 27 as a proportion of 20 total segments, with blue arcs marking each increment of five and a partial blue arc representing the remainder. The visualization renders in SVG using React and D3 v5, calling the `arc` generator to draw each path. The chart is built by looping through 20 equal segments, filling grey arcs for the unselected portion and blue arcs for the selected value, with white strokes separating each slice.

BBhavyatulasi

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

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

83% match

Loading thumbnail…

donut

This donut chart uses D3 version 6 to render a single, five-segment ring where each segment is a wedge of equal value. The visualization employs `d3.arc` with dynamically calculated inner and outer radii based on the segment index, and `d3.pie` to compute the arc geometry. Each wedge is filled with a color from `d3.scaleSequential` using the `d3.interpolateRainbow` palette, and labeled with its data index. The entire SVG group is positioned using a CSS transform, though the code’s intended rotation animation is present but not functional, as the rotation angle is fixed to zero.

MMTR

83% match

Loading thumbnail…

updated donutchart

This example shows an animated donut chart that displays a percentage value at its center and updates its arc and color gradient automatically. The chart visualizes a data array where the third element (80%) drives the arc length and determines a six-stop linear gradient color scheme ranging from red to green based on the value. Built with D3 v5 and React, it uses `d3.arc` for the donut geometry, `transition.attrTween` with an interpolator to smoothly animate the arc between states, and a toggle button to switch between two datasets. The SVG rendering includes a static gray background arc and a foreground path filled via a dynamically configured `linearGradient`.

SSchmittYannic

81% match

Loading thumbnail…

Donut

This example displays a year’s progress as a percentage through three synchronized visuals: a rounded progress bar, a donut chart, and a semicircular gauge. The progress value is computed from the current date relative to the total days in the year. Built with React, the code uses D3’s `arc` generator to create the donut and gauge paths, while SVG rectangles render the bar. Text labels show the rounded percentage, and each visualization uses distinct colors.

AAmier Faudzi

81% match

Loading thumbnail…

D3 Donut Chart

This D3 Donut Chart visualizes categorical sales data loaded from a remote CSV file, rendering each category as a colored arc segment around a hollow center. The chart uses React hooks (`useState`, `useEffect`) to fetch and store the data, then builds the visualization with D3's `pie()` and `arc()` functions inside an SVG element. Each path is generated by the `pieArc` generator with an inner radius of 100 and outer radius of 200, with fill colors assigned from the dataset’s `color` field. The view displays a simple loading state while the CSV is being fetched.

JJack Elsey

81% match