By Hilmybox — 03 Jan 2026

Global Economic Sentinel

A real-time spatial analysis of 2025 macroeconomic indicators, visualized through raw GDP, debt-to-equity ratios, and demographic shifts.

Click here to access.

1. The Core Engine

The logic is driven by the Three.js scene graph, which manages the lifecycle of the visual objects.

Asynchronous Data Pipeline: The engine uses the fetch API to load a GeoJSON-style file (world-countries.json). It iterates through each "feature" (country), parsing its coordinates and metadata.
Object Hierarchy: Every country is treated as an individual Mesh object. Metadata like GDP, population, and debt are injected directly into the mesh.userData object, allowing the engine to store and retrieve specific data points without a separate database.
Raycasting Subsystem: The engine runs a THREE.Raycaster on every frame within the animation loop. It projects a mathematical line from the mouse's 2D coordinates into the 3D scene to detect which country mesh is being hovered over.

The visualization is rendered using WebGL through an Orthographic Camera, which is unique for 3D environments.

Orthographic Projection: Unlike a perspective camera, the OrthographicCamera eliminates depth distortion (objects don't get smaller as they move away). This is preferred for analytical maps where geometric accuracy is more important than "realism."
Flat Shading & Lines: The map uses MeshBasicMaterial for countries, which ignores light sources to provide a clean, "infographic" look. Borders are rendered using THREE.Line objects to provide high-contrast definition between territories.
BufferGeometry: To optimize performance, the code uses BufferAttribute. This sends large arrays of vertex data (the thousands of points making up a coastline) directly to the GPU in a single batch.

Translating flat JSON coordinates into a rendered map requires several geometric algorithms.

Triangulation (Earcut): Browsers cannot natively draw complex, irregular polygons like the shape of a country. The Earcut library is used to "triangulate" the GeoJSON points—breaking the shape of a country down into hundreds of tiny triangles that WebGL can understand.
Normalization: The mouse position is converted from screen pixels to a normalized range of -1 to +1 using the formula:

Mapping & Clamping: The getPopColor function acts as a mathematical "stepped scaler," mapping high-magnitude population integers (1E9) into specific hexadecimal color values to create a heat-map effect.

The environment is a modern, high-performance web interface that blends a 3D canvas with a functional HTML overlay.

Glassmorphism UI: The CSS utilizes backdrop-filter: blur(10px) and semi-transparent RGBA backgrounds to create a modern "cockpit" feel for the HUD (Heads-Up Display).
Dynamic HUD (Tooltip): The tooltip is not part of the 3D scene; it is a standard HTML div. The JavaScript updates its style.left and style.top in real-time based on the mouse event, bridging the gap between the 2D DOM and the 3D WebGL context.
OrbitControls (Restricted): The environment uses OrbitControls but explicitly disables rotation (enableRotate = false). This creates a "Pan and Zoom" interaction style typical of professional GIS (Geographic Information System) software.