Skip to main content
100%

Donut

✓ Published2🌍 Public
AAmier Faudzi
Last edited Feb 21, 2021
Created on Feb 21, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes