Donut chart
Arcs with a value follow each other around the ring, so a donut chart is just your data in order.
How it's built
- Each room is an
<o-arc value>. Values are shares of 100 (or ofmax), and each arc starts where the one before it ends. - One ring on lane 8, four lanes thick, leaves room in the middle for the total.
--o-gap: 2draws the thin line between segments. - The shares are satellites on the same lane, turned with
angle-Nto the middle of their arc: the running total before it plus half its own share, times 3.6. - Switching weeks only rewrites the
values, a little at a time; Orbit restacks the arcs on every frame.
Related
- Pie chart: the hole closed
- Sunburst chart: nested data
- Donut chart demo: a hoverable legend
- Orbit Kit donut: a ready-made component