Skip to main content

Pie Chart Rotation on Click

✓ Published0🌍 Public
Aandrew-reid
Last edited Nov 26, 2017
Created on Jul 19, 2017

Clicking a wedge of this donut chart rotates the entire pie so that the selected segment lands at the bottom, while the age-group labels counter-rotate to remain upright. Built with D3 v4, it uses `d3.pie` and `d3.arc` for geometry, SVG paths for rendering, and a transition on the group’s `transform` attribute over one second. The color scale maps seven population age brackets, and the label rotation is reversed via `label.centroid` calculations.

AI-generated description

This pie chart, based on Mike Bostock's example, rotates so that any clicked wedge well spin to the bottom. The text rotates in the opposite direction so that it remains upright.

Part of this answer on Stack Overflow