Stock Market & Financial Globe

The World Bank Open Data API exposes macroeconomic indicators for every country without an API key. The NY.GDP.MKTP.CD indicator (GDP at market prices, current USD) is fetched with mrv=1 to retrieve only the most recent value per country — typically one or two years old due to national statistics lag. The response covers ~180 economies including small island states and territories.

Frankfurter is a free, open-source exchange rate API maintained by Apilayer. It serves data from the European Central Bank (ECB) reference rates, updated daily on business days. The /v2/rates endpoint returns ~30 major currencies priced in a base currency — here USD. Rates for EUR/USD, GBP/USD, USD/JPY, USD/CNY, and AUD/USD are displayed in the sidebar with conventional quote direction.

Country outlines come from the Natural Earth 110m dataset via the world-atlas npm package (TopoJSON format). topojson-client converts them to GeoJSON features at runtime. Each polygon's cap colour is computed via a logarithmic scale mapping raw GDP (in USD) to an amber/gold gradient — log scale prevents the USA/China from swamping every other country. Polygons are rendered with globe.gl's native polygonsData() API at 0.5% altitude above the surface.

Twelve major global stock exchanges are stored as static GeoJSON-style objects with precise lat/lng coordinates, index name, indicative index value, and estimated market cap. They are rendered as gold-coloured points at a slight altitude (0.015) using globe.gl's pointsData() API. Clicking a marker shows a detail panel with the exchange name, city, country, headline index, and total market capitalisation.

Twelve major cross-border capital flow corridors are visualised as dashed animated arcs using globe.gl's arcsData() API. The arc paths are great-circle routes between source and destination financial hubs, rendered at 0.3 altitude (30% of globe radius) to arc cleanly above the surface. Each arc animates with a 2.5-second loop, colour-coded by source region. Flow values (USD billions) are indicative estimates based on BIS and IMF cross-border statistics.

A single Next.js Route Handler at /api/financial-data fetches GDP and FX in parallel via Promise.allSettled(), so a failure in one upstream API does not block the response. The route uses Next.js ISR revalidation (revalidate=3600) so the server only hits the upstream APIs once per hour — all page loads within that window get the cached response instantly. The static exchange and flow data is embedded in the route file and returned verbatim.