SkyRoute — 3D Global Traffic Monitor

A self-contained HTML/WebGL dashboard that renders a 3D globe showing real-time traffic connections from users worldwide to your AWS backend region.

Features

• 3D Globe with country polygons (no external textures — pure geometry)
• Animated arcs from user locations to target region, color-coded by latency (green \x3C 100ms, yellow \x3C 300ms, red > 300ms)
• CloudFront edge panel showing top PoPs by request volume
• Metrics panel: active connections, RPS, P95/P99 latency, error rate
• Alert mode: header flashes red when error rate spikes, with alert badge
• Sparkline trends for latency/RPS history
• Country name mapping (CC → Chinese name)

Files

• assets/globe.html — Complete standalone dashboard (Three.js + custom shaders via CDN)

Usage

Static demo

Open assets/globe.html directly in a browser. It includes a mock data generator that simulates global traffic.

With real data

To connect real data, modify the generateConnections() function in the HTML to fetch from your data source. Expected data format per connection:

{
  "lat": 51.5,
  "lng": -0.12,
  "latency": 85,
  "country": "GB",
  "requests": 1200
}

Data sources (integration ideas)

1. ALB access logs → parse source IPs → GeoIP lookup → aggregate by region
2. CloudFront real-time logs → Kinesis → Lambda → WebSocket push
3. Custom metrics API → poll every 5s from your monitoring backend

GeoIP Setup

For production use, obtain MaxMind GeoLite2-City database:

1. Register at https://www.maxmind.com/en/geolite2/signup
2. Download GeoLite2-City.mmdb
3. Use with a backend service to resolve IP → lat/lng

Customization

Deployment

Serve as a static file behind any web server or embed in an internal dashboard (Grafana iframe, TV display, etc.). No backend required for the visualization itself — all rendering is client-side WebGL.