Airport Clocks
This visualization displays eight analog clocks for cities such as San Francisco, New York, London, and Sydney, each showing the current time with hour, minute, second, and millisecond hands. The clocks use React components with D3.js for SVG rendering and animation, leveraging d3.timer for smooth hand movement and d3.utcDay for calculating time zone offsets. Styling is configurable through a centralized configuration file, and the layout presents all clocks in a responsive, wrap-around grid.
AI-generated descriptionAirport Clocks
A collection of analog clocks showing the current time in different international airports and major cities around the world. Built with React and D3.js, this application displays real-time clocks for multiple time zones with smooth animations and customizable styling.
Features
- Real-time analog clocks for 8 global cities
- Responsive design using SVG and D3.js
- Smooth animation for all clock hands including millisecond precision
- Daylight saving time support
- Clean, minimal aesthetic with centered layout
- Configurable styling through centralized configuration
Technologies Used
- React (v19) - Component-based UI library
- D3.js (v7) - Data visualization and SVG manipulation
- ECMAScript Modules - Native browser module support
- Import Maps - For managing CDN dependencies
Structure
index.html- Main HTML file with import map and basic layoutindex.jsx- Entry point rendering the main App componentcomponents/ClockContainer.jsx- Renders all labeled clockscomponents/LabeledClock.jsx- Wraps a clock with its location labelclock/Clock.jsx- React wrapper for individual clock SVGclock/clockRenderer.js- D3 rendering logic for clock elementsclock/timeUtils.js- Time calculation utilitiesclock/clockConfig.js- Default style configuration for clocksdata/timeZones.js- Time zone data for displayed locations
Customization
You can customize the appearance of all clocks by modifying
values in clock/clockConfig.js. Each property is defined
as a fraction of the clock's total diameter:
- Hand lengths are relative to the radius (0-1)
- Hand widths are relative to the diameter (0-1)
- Font sizes are multipliers applied to base sizes
- Position offsets and radii are fractions of the diameter (0-1)
To add or modify time zones, update data/timeZones.js:
label- Display name for the locationtimeZoneOffset- UTC offset in hours (decimals allowed, e.g. 5.5 for India)daylightSavings- Boolean to apply automatic DST adjustment (optional)
Deployment
This is a static site that can be deployed to any web server or CDN such as:
- GitHub Pages
- Netlify
- Vercel
- AWS S3 + CloudFront
Simply upload all files to your hosting provider and serve
the index.html file.
License
MIT
Comments
Sign in to join the discussion.