~/todd-fleeman/case-study — session log entry

~/Arc Tween Clock

started 2026-10-14 · last touched 2026-10-15
why this exists

While going through old projects, I found a D3 v3 clock that showed time as a row of donut charts, one each for the month, date, hour, minute, and second. Every second, the arcs spring forward with an elastic bounce instead of snapping to the new value.

I rebuilt it in React and TypeScript on D3 v7. Each arc now remembers where it started using d3.local, and a custom attrTween animates it from there to its new value. Keyed joins handle entering, updating, and exiting separately. It ticks with d3.interval rather than d3.timer, since each tick starts its own transition and doesn't need to redraw every frame.

I also extended the original. Each donut has a live label, the hours use a 12-hour clock, and on mobile the donuts rearrange into an X, so reading them top to bottom is like going once around a clock face.

built on / learned
D3JS
Data Visualizations
where this might go

Future - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis, ligula et dictum faucibus, risus justo tristique libero, ornare hendrerit erat diam ut ante. Suspendisse porttitor cursus metus ac ornare. Vestibulum ultricies tristique erat ut congue. Vivamus faucibus pulvinar accumsan. Nulla euismod nibh nec porttitor vulputate. Nullam feugiat volutpat nisi, et condimentum ex tempus in. Vestibulum libero nulla, condimentum eu vestibulum vitae, pulvinar eu nibh.