Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Donut chart

Public visualization

Donut chart

0 stars1🌍 Public
BBhavyatulasi
Last edited Nov 11, 2020
Created on Jul 23, 2020
Forked from Donut chart

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.

Comments

Sign in to join the discussion.

MIT Licensed