Skip to main content
šŸŒ Public

Share visualization

Send this visualization to others.

Airport Clocks

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

d313fe9406aa4fd3aef97c78014a86c8

Open

Airport Clocks

0 stars0šŸŒ Public
CCurran Kelleher
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from React & D3 Starter

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 description

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