{"version":"1.0","type":"rich","title":"Visualizing Percentages","description":"Three SVG progress indicators—a rounded bar, a donut, and a gauge—display the same 35% value in a React-based dashboard. The bar’s fill width and the donut’s arc length are computed by multiplying the total width or circumference by `progress`. The gauge uses a d3 `arc` generator with start and end angles mapped to the progress fraction. All indicators use a shared `VizContainer` SVG wrapper, with D3’s `timeFormat` computing the current day of the year.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b5da5405a305481883a628f7acc14496?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}