Airport 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 layout
• index.jsx - Entry point rendering the main App component
• components/ClockContainer.jsx - Renders all labeled clocks
• components/LabeledClock.jsx - Wraps a clock with its location label
• clock/Clock.jsx - React wrapper for individual clock SVG
• clock/clockRenderer.js - D3 rendering logic for clock elements
• clock/timeUtils.js - Time calculation utilities
• clock/clockConfig.js - Default style configuration for clocks
• data/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 location
• timeZoneOffset - 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