Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Donut

Public visualization

Viewing a saved revision (read-only)

6f195196ebd54dd29b5dfdae8ef2721e

Donut

1 star2🌍 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