While going through old projects, I found a D3 v3 polar clock that showed time as concentric rings, each one filling around the circle as its unit of time passes.
I rebuilt it in React and TypeScript on D3 v7 and dropped the jQuery and Moment.js dependencies along the way. It redraws every frame with d3.timer, which is cleaned up when the component unmounts. I also fixed a date bug from the original: it used the deprecated getYear() instead of getFullYear().
Each ring carries a label at the end of its arc that updates as it moves, and flips at the six o'clock position so it stays readable. Color comes from a D3 scale that shifts each ring's shade as it fills. That replaces a hand-written HSL interpolator from the original with D3's built-in interpolateHsl, using the site's palette.
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.