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

~/Analog Clock

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

While going through old projects, I found a D3 v3 analog clock that drew its hands in an unusual way: each one was an arc with zero width, so only its stroke showed up as a line.

I rebuilt it in React and TypeScript on D3 v7 and simplified it along the way. The hands are now plain SVG lines, rotated by how far each unit has moved through its cycle. Each hand is just data (a value from 0 to 1, a length and a stroke width), so one small function describes the whole clock. The hands draw hours first, then minutes, then seconds, which keeps the second hand on top without any extra layering.

I also added a face, a center dot, and twelve tick marks with heavier ones at the quarter hours. It runs on d3.timer so the second hand moves smoothly and stays within a frame of the real time.

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.