Skip to main content
100%

Airport Clocks

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Apr 21, 2020
Forked from HTML Starter

Airport Clocks displays a grid of analog clocks, each labeled with a city name, all ticking in real time. The animation is driven by `d3.local()` for timezone-aware time, while each clock face is drawn using `d3.component` to create a reusable SVG component with configurable properties. The code renders clock numbers, tick marks, and rotating hands via SVG transformations, with a central `axle` group per clock. A grayscale color interpolation (`d3.interpolateLab`) tints the faces, and daylight savings adjustments are applied manually. The clocks are laid out with inline-block styling, creating a world-time dashboard.

AI-generated description

Would accurate clocks tick in sync all around the world?

Made with d3-component.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/28047fcfeb11cc0c66d10e7f30e1fe22'>Clock</a>

Built with blockbuilder.org.

See original Bl.ock: Airport Clocks.

MIT Licensed

Similar vizzes