What it is
Ring of Fire shows the planet's seismic pulse in real time. Every earthquake of the past seven days from the USGS feed is plotted along the world's plate boundaries, alongside 1,196 Holocene volcanoes from the Smithsonian Global Volcanism Program, with live US volcano alert levels overplotted as they change. The newest quakes — under 24 hours old — breathe with an animated halo; marker size encodes magnitude and color encodes depth.
It is distinctive both for pairing two live USGS feeds (the all-week earthquake feed and the elevated-volcano-alert API, each refreshed every five minutes) against curated reference layers, and for the craft of its signature pulse. The animated halo is a memoized, quantized canvas animation running at about 30 frames per second on the 150 newest quakes — engineered specifically to avoid allocating a new symbol per halo per frame, which would otherwise churn thousands of objects a second through the garbage collector.
The audience spans emergency-management and hazard analysts, educators and newsrooms covering seismic events, insurers and infrastructure planners assessing exposure along plate boundaries, and the simply curious. Like the rest of the portfolio it runs with no credentials.
The experience
Quakes render within seconds of load, sized by magnitude and colored by depth, strung along the plate boundaries.
- The signature pulse. Quakes younger than 24 hours (capped at the 150 newest) carry a halo that grows and fades in a memoized cycle at roughly 30 fps — pure canvas animation, no CSS transitions, no DOM churn.
- Filter chips. Magnitude chips (All / 2.5+ / 4.5+ / 6+) and a time window (24 h / 3 d / 7 d) restyle the map instantly; graphics are rebuilt imperatively on each change.
- Depth legend & latest list. A depth legend explains the color ramp; a live "Latest significant" list ranks events by USGS significance — click a row to fly to the epicenter.
- Quake detail cards. Clicking an event opens a glass card with exact UTC time, depth class, significance, a tsunami flag, and a link to the USGS event page.
- Volcanoes and alerts. 1,196 Holocene volcanoes sit beneath the quakes; US volcanoes at ADVISORY / WATCH / WARNING are overplotted live. A volcano click enriches the card with its full Smithsonian GVP record and any live alert synopsis — Great Sitkin and Kilauea pulse amber in the Aleutians and Hawaii while USGS keeps them elevated.
The data — where it comes from
Two live USGS feeds sit over two bundled reference layers and an anonymous Esri basemap.
| Source | What it provides | Refresh | Cost | Attribution |
|---|---|---|---|---|
| USGS Earthquake Hazards — all_week feed | All earthquakes of the past 7 days (GeoJSON) | Every 5 minutes | Free / public | USGS |
| USGS Volcano Hazards — elevated-alert API | US volcanoes at ADVISORY / WATCH / WARNING | Every 5 minutes | Free / public | USGS |
| Smithsonian GVP (bundled) | 1,196 Holocene volcano records for click enrichment | Static snapshot | Free / public | Smithsonian GVP |
| PB2002 plate boundaries (bundled) | Global plate-boundary geometry | Static | Free / public | Bird (2003) |
| Esri dark-gray vector basemap | Anonymous cartographic base | Static | Free (no LP cost) | Esri |
How it was assembled
Ring of Fire is an ATS-branded React 19 + Tailwind 4 application on the ArcGIS Maps SDK for JavaScript, with no Esri UI widgets.
Engineering decisions worth calling out
- Zero-credential design. The app runs with an empty .env. Every service is either an anonymous Esri basemap or a public CORS-enabled API, so there are no keys to provision, rotate, or leak. An optional Location Platform basemap upgrade is documented in .env.example but never required.
- Glass-pod controls, no Esri widget chrome. The three branded apps deliberately ship zero Esri UI widgets. ui: { components: [] } clears the default chrome (attribution still renders, restyled to a whisper), and all interaction lives in custom floating glass pods built from Tailwind and Lucide. This is an ATS brand standard: the map should read as a finished product surface, not a developer toolkit.
- Memoized pulse animation. Allocating a SimpleMarkerSymbol per halo per frame (150 × 30 fps) would thrash the garbage collector. Instead the phase is quantized to 24 steps and the base size to whole pixels, and symbols are memoized in a Map that converges on a few hundred entries. The loop swaps graphic.symbol only and never touches geometry.
- Layered imperative rendering. Six layers stack bottom-to-top: plates, volcanoes, quake halos, selection ring, quakes, then alert markers. React state drives the UI while graphics are rebuilt imperatively on filter change — at two thousand points or fewer this is cheap.
- Defensive feed parsing. The all-week feed can carry null magnitudes and non-tectonic types (explosion, quarry blast); null-magnitude features are skipped and the rest kept. Depth is the third coordinate. The elevated-volcano API returns long (not lon) and an empty array means calm, not an error.
- Catalog matching. Live alert markers are matched to the bundled GVP catalog by lowercase name (which covers the current AVO/HVO set); a miss still renders an alert-only card rather than dropping the event.
- StrictMode-safe lifecycle. React StrictMode double-mounts the map effect in dev, so cleanup clears the pulse interval, removes the click handle, and destroys the view.