Oclock

Oclock is an interactive 3D WebGL globe designed to visualize real-time daylight cycles across the globe. Utilizing the powerful Globe.gl framework, this project transforms complex data into engaging visual experiences, allowing users to explore daylight variations in different time zones. The globe is powered by a pre-processed spatial data pipeline, ensuring accurate and efficient data visualization.

Features

• Interactive UI: Oclock offers intuitive interaction through hover effects that highlight country boundaries and display local times.
• Toggle Functionality: Users can activate a global switch to show all country time labels simultaneously, enhancing the visual experience.
• Quick Navigation: A search functionality enables users to type the name of a country for instant navigation, promoting ease of use.
• Camera Focus: By clicking on a specific country, the camera will focus on that area, maintaining the time label for continued reference.

Data Processing

The underlying data used by Oclock is sourced from countries_data.json, which is generated from raw GeoJSON data. This provides essential information, including IANA timezones and geographical coordinates, crucial for accurate timezone mapping. The pipeline for data generation is facilitated through timezone_data_generator.py, which performs geometry analysis to derive representative points for each country's boundaries, maps timezones with precision, and injects necessary data into the GeoJSON properties for frontend applications.

Technical Dependencies

Oclock integrates a variety of open-source libraries to enhance its functionality:

• Globe.gl: The main visualization framework responsible for rendering the 3D globe and managing polygon layers.
• Three.js: The WebGL engine that supports custom shader implementations and 3D scene management.
• Solar Calculator: Provides calculations for astronomical positions, essential for determining the subsolar point.
• TimezoneFinder: A Python library utilized in the preprocessing stage for accurate timezone identification.
• Shapely: Handles geometric operations during the data processing phase to ensure accuracy in timezone representation.

Live Demo

Experience the functionality of Oclock through the live demo available here. The combination of elegant design and essential data visualization makes Oclock a unique tool for understanding real-time daylight across the globe.