SkillAgentSearch skills...

Oclock

An interactive 3D WebGL globe that visualizes real-time daylight cycles. Built with Globe.gl and pre-processed spatial data pipeline.

Install / Use

/learn @azialle/Oclock
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

🌍Oclock

An interactive 3D WebGL globe that visualizes real-time daylight cycles. Built with Globe.gl and pre-processed spatial data pipeline.

GIF of Oclock

View Live Demo

Data Source

The frontend relies on countries_data.json. This file is generated by processing raw GeoJSON to include IANA timezones and center coordinates in terms latitude and longitude.

The raw GeoJSON file, ne_110m_admin_0_countries.geojson, was sourced from the official Globe.gl repository.

Processing Pipeline

The data generation is handled by timezone_data_generator.py. This script performs the following:

  1. Geometry Analysis: Uses shapely to find a representative point inside each country's boundary.
  2. Timezone Mapping: Uses timezonefinder to look up the specific IANA timezone string for those coordinates.
  3. Data Injection: Injects the timezone and coordinates back into the GeoJSON properties for use by the frontend.

UI & Interaction

  • Hover: Highlights country boundaries and displays local time.
  • Toggle: A global switch to display all country time labels simultaneously.
  • Click/Select: Focuses the camera on the country and keeps the time label active.
  • Search: Type a specific country on the search field to allow instant navigation to specific country.

Credits & Dependencies

The project utilized several powerful open-source libraries and data source.

  • Globe.gl – The core visualization framework used for rendering the 3D globe, handling polygon layers, and managing HTML elements. Developed by Vasco Asturiano.
  • Three.js – The underlying WebGL engine used for custom ShaderMaterial implementation and 3D scene management.
  • Solar Calculator – Used for calculating astronomical positions, including the equation of time and solar declination to locate the subsolar point.
  • TimezoneFinder – Python library used in the preprocessing pipeline to accurately map coordinates to IANA timezone names.
  • Shapely – Used in the preprocessing pipeline to handle complex geometric operations, specifically for calculating representative_point logic to ensure timezone accuracy.

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this software. See the LICENSE file in the repository for full details.

View on GitHub
GitHub Stars22
CategoryDevelopment
Updated4d ago
Forks5

Languages

JavaScript

Security Score

95/100

Audited on Apr 6, 2026

No findings