44:["$","title",null,{"children":"M7.5 Colombia Earthquake | EarthScope Consortium | Observable"}] 4c:Tae7,# M7.5 Colombia Earthquake ## Ground Motion Visualization "How-To" On **August 10, 2026**, a magnitude 7.5 earthquake struck Colombia at about 107 km depth. Its seismic waves were recorded by **2,188 seismic stations** across the Americas. This notebook replays that shaking from the vertical (up–down) motion recorded at each station, over about 55 minutes after the earthquake. **About the stations and data.** The recordings come from **84 seismic networks** run by universities, government agencies and international partners. Examples include regional networks in California, the Pacific Northwest and Alaska, and the Global Seismographic Network. Their data is collected, archived and freely distributed by **[EarthScope Consortium](https://www.earthscope.org/)**, the U.S. NSF-funded facility that runs the national seismic and geodetic data archives. EarthScope also builds the Ground Motion Visualization (GMV) product used here. It's also a **step-by-step guide**: how to fetch a ground-motion file from EarthScope and build an animated 3D globe with [deck.gl](https://deck.gl/). | Step | What it does | |---|---| | 1. Fetch | Load the GMV JSON for one earthquake | | 2. Inspect | Check the amplitude range to choose a color scale | | 3. Libraries | world-atlas, deck.gl (UMD), h3-js | | 4. Helpers | Basemap, colors, station distances | | 5. Layers | Approximate wavefronts and the base deck.gl layers | | 6. Controls | Wavefront toggle, time slider, hexagon resolution | | 7. Hex bins | Group stations into H3 hexagons | | 8. Globe | Create the deck.gl `Deck` with a `_GlobeView` | | 9. Animate | Update extruded hexagons each frame with `setProps` | | 10. Record section | Distance-vs-time plot that tracks the slider | **On the globe:** each hexagon shows the strongest station signal inside it. Where the ground is moving **up**, a red column **rises** above the surface. Where it's moving **down**, a blue column **sinks** below the surface, visible through the translucent land and ocean. Rings mark the approximate **P**, **S** and **surface (Rayleigh)** wavefronts. Drag to rotate, scroll to zoom, and hover over a hexagon for details. **Data sources** - **Ground motion:** [EarthScope Consortium](https://www.earthscope.org/), [Ground Motion Visualization (GMV)](https://data.earthscope.org/archive/seismology/products/gmv/events/2026/es-dp-gmv_eseid-12142222/) product, vertical component. Station data comes from 84 contributing seismic networks and is archived by EarthScope. Amplitudes are normalized to −1 to 1, one frame every 3 s. - **Country outlines:** Natural Earth, through [world-atlas](https://github.com/topojson/world-atlas). - **The wavefronts are approximate.** See Step 5.4d:T14ff,const hexGlobe = (() => { // --- Container --- const wrapStyle = [ "position:relative", "width:100%", "height:680px", "background:radial-gradient(circle at 50% 45%,#16233f,#05080f)", "border-radius:6px", "overflow:hidden" ].join(";"); const wrap = html`

`; // --- Title label (top-left; text is set by Step 9) --- const labelStyle = [ "position:absolute", "top:10px", "left:12px", "color:#fff", "font:600 14px sans-serif", "pointer-events:none", "text-shadow:0 0 4px #000" ].join(";"); const label = html`

`; // --- Legend (bottom-left) --- const noteStyle = [ "position:absolute", "bottom:10px", "left:12px", "color:#fff", "font:11px sans-serif", "background:#0008", "padding:6px 8px", "border-radius:4px", "pointer-events:none" ].join(";"); const swatchStyle = (c) => `display:inline-block;width:10px;height:3px;background:${c};margin-right:4px;vertical-align:middle`; const phaseLegend = phases.map((p) => html`${p.name}` ); const note = html`

H3 hexagons · strongest station in each hex: red columns rise (ground moving up), blue columns sink below the surface (ground moving down)

${phaseLegend}

`; wrap.append(label, note); // --- Tooltip helpers --- const MAX_ROWS = 12; // list at most this many stations const KM_PER_DEG = 111.19; // great-circle km per degree of arc // Distance along the Earth's surface from the epicenter, in km. // s.dist is the great-circle angle (deg); multiplying by km/deg gives the // shortest path over the surface ("as the crow flies"). const surfKm = (deg) => Math.round(deg * KM_PER_DEG).toLocaleString(); const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """})[c]); const fmtAmp = (a) => `${a >= 0 ? "+" : "−"}${Math.abs(a).toFixed(3)}`; const arrow = (a) => (a > 0 ? "▲" : a < 0 ? "▼" : "·"); // up / down / still const ampColor = (a) => (a > 0 ? "#f08b7d" : a < 0 ? "#7fb6e6" : "#94a3b8"); // Build the HTML tooltip for one hexagon at its current frame const hexTooltip = (d) => { const f = d.frame; const mins = (f * dt / 60).toFixed(1); // Every station in the hex, strongest motion first const rows = d.members .map((s) => ({s, a: s.amps[f] ?? 0})) .sort((x, y) => Math.abs(y.a) - Math.abs(x.a)); const shown = rows.slice(0, MAX_ROWS); const hidden = rows.length - shown.length; const networks = new Set(d.members.map((s) => s.net)).size; const meanDist = d3.mean(d.members, (s) => s.dist); const p = d.peak; const rowHtml = shown.map(({s, a}) => ` ${esc(s.net)}.${esc(s.sta)} ${arrow(a)} ${fmtAmp(a)} ${surfKm(s.dist)} km `).join(""); return `

${d.n} station${d.n > 1 ? "s" : ""} · ${networks} network${networks > 1 ? "s" : ""}

~${surfKm(meanDist)} km from epicenter (along the surface, ${meanDist.toFixed(1)}°) · at ${mins} min

Strongest: ${esc(p.net)}.${esc(p.sta)} ${arrow(d.value)} ${fmtAmp(d.value)} ${d.value > 0 ? "(moving up)" : d.value < 0 ? "(moving down)" : "(still)"}

${rowHtml}

station

amp

distance

${hidden > 0 ? `

+ ${hidden} more station${hidden > 1 ? "s" : ""}

` : ""}

H3 cell ${esc(d.cell)}

`; }; // --- deck.gl globe --- const d = new deckgl.Deck({ parent: wrap, views: new deckgl._GlobeView(), initialViewState: { longitude: -85, latitude: 25, zoom: 1.4, minZoom: 0, maxZoom: 6 }, controller: true, // Hovering a hexagon shows which stations it contains and how each is moving getTooltip: ({object, layer}) => { if (layer?.id !== "hexes" || !object) return null; return { html: hexTooltip(object), style: { background: "rgba(11,18,32,0.95)", color: "#e2e8f0", font: "12px sans-serif", padding: "8px 10px", borderRadius: "6px", border: "1px solid #334155", maxWidth: "320px" } }; } }); // Expose for the animation cell wrap.deck = d; wrap.label = label; invalidation.then(() => d.finalize()); return wrap; })(); display(hexGlobe);4e:T463,### How this notebook fits together Each box is a cell, or a value a cell defines. The **bold name** is the variable in the code and the smaller text says what it does. A grey arrow means "is used by": when the source changes, the target cell re-runs. Labels on the arrows say *what* gets passed along. The groups follow the data from start to finish: 1. **① Data and libraries:** the EarthScope recording, the country outlines, deck.gl for drawing and h3 for hexagons. These are loaded once. 2. **② Helpers and model:** cleaned station data, the amplitude-to-color mapping, the approximate wavefront model, and two building blocks for the globe (`hexBins`, `buildLayers`). 3. **③ Controls:** the inputs you can change: rings on or off, time, and hexagon size. 4. **④ Rendering:** what you see. `hexControls` is the animation engine. It combines everything above to draw each frame. The **red dashed arrows** are direct calls that happen on every animation frame without re-running any cells. `setProps` swaps in new globe layers and `setTime` moves the record-section marker. That's what keeps playback smooth.4f:T1e8c,digraph notebook { // Top-to-bottom, with the four groups stacked vertically (① → ② → ③ → ④) // so the diagram reads by scrolling rather than spreading sideways. rankdir=TB; bgcolor="transparent"; newrank=true; nodesep=0.25; ranksep=0.55; // Arial: Graphviz has accurate width metrics for it, so text fits its box. // Generous margins add padding in case the browser substitutes a wider font. node [shape=box, style="rounded,filled", fontname="Arial", fontsize=12, fontcolor="#1e293b", color="#64748b", fillcolor="#f1f5f9", penwidth=1, margin="0.22,0.1"]; edge [color="#94a3b8", arrowsize=0.6, fontname="Arial", fontsize=10, fontcolor="#64748b"]; // ------------------------------------------------------------------ // ① Sources: raw inputs that everything else is built from // ------------------------------------------------------------------ subgraph cluster_sources { label="① Data & libraries (Steps 1–3): loaded once"; fontname="Arial"; fontsize=13; style="rounded,dashed"; color="#cbd5e1"; margin=12; gmvRaw [fillcolor="#fde68a", label=<gmvRaw
EarthScope ground-motion file:
epicenter, 2,188 stations,
1,093 frames × 3 s of motion>]; world [fillcolor="#fde68a", label=<world
country outlines
(Natural Earth)>]; deckgl [fillcolor="#e9d5ff", label=<deckgl
WebGL library that
draws the 3D globe>]; h3 [fillcolor="#e9d5ff", label=<h3
hexagon grid on the sphere;
assigns points to cells>]; {rank=same; gmvRaw; world; deckgl; h3;} // keep all sources on the top row } // ------------------------------------------------------------------ // ② Helpers: cleaned data, color mapping, wavefront model, layer recipes // ------------------------------------------------------------------ subgraph cluster_helpers { label="② Helpers & model (Steps 2, 4, 5, 7): prepared data and reusable functions"; fontname="Arial"; fontsize=13; style="rounded,dashed"; color="#cbd5e1"; margin=12; stations [label=<stations
drops stations
with no data>]; ev [label=<ev
epicenter location,
depth & magnitude>]; countries [label=<countries
outlines as GeoJSON
ready to draw>]; toRGB [label=<toRGB
amplitude → color
red = up, blue = down>]; refDist [label=<refDist
distance to the station with
known arrival times>]; stationsD [label=<stationsD
each station + its distance
from the epicenter>]; phases [label=<phases · radiusAt
approximate travel-time model:
how far P, S & surface waves
have spread at time t>]; hexBins [fillcolor="#bfdbfe", label=<hexBins
groups stations into H3 hexagons
(once per resolution)>]; buildLayers [fillcolor="#bfdbfe", label=<buildLayers(f)
scenery for frame f: ocean, land,
wavefront rings, epicenter>]; } // ------------------------------------------------------------------ // ③ Controls: user inputs; changing one re-runs the cells that read it // ------------------------------------------------------------------ subgraph cluster_controls { label="③ Controls (Step 6): user inputs"; fontname="Arial"; fontsize=13; style="rounded,dashed"; color="#cbd5e1"; margin=12; showRings [fillcolor="#bbf7d0", label=<showRings
show / hide
wavefront rings>]; frame [fillcolor="#bbf7d0", label=<frame
main time slider + Play
(current frame index)>]; hexRes [fillcolor="#bbf7d0", label=<hexRes
hexagon size
(2 coarse … 4 fine)>]; } // ------------------------------------------------------------------ // ④ Outputs: what you see on the page // ------------------------------------------------------------------ subgraph cluster_outputs { label="④ Rendering (Steps 8–10): what you see"; fontname="Arial"; fontsize=13; style="rounded,dashed"; color="#cbd5e1"; margin=12; hexGlobe [fillcolor="#fecaca", label=<hexGlobe
empty 3D globe + title & legend;
created once, reused every frame>]; recordSection [fillcolor="#fecaca", label=<recordSection
seismograms by distance vs. time,
predicted arrival curves,
moving time marker>]; hexControls [fillcolor="#fecaca", label=<hexControls
the animation engine:
on-globe Play, Time & Height sliders;
render(f) picks the strongest station
per hex and draws 3D columns>]; sync [fillcolor="#fecaca", label=<sync cell
hexControls.setFrame(frame):
main slider drives the globe>]; } // ------------------------------------------------------------------ // Layout only (invisible): stack the groups ① → ② → ③ → ④ // ------------------------------------------------------------------ edge [style=invis]; gmvRaw -> toRGB; // toRGB sits inside ②, not beside ① buildLayers -> {showRings frame hexRes}; // ③ below ② hexBins -> {showRings frame hexRes}; {showRings frame hexRes} -> {hexGlobe recordSection}; // ④ below ③ edge [style=solid]; // ------------------------------------------------------------------ // Data flow (reactive: when the source changes, the target re-runs) // ------------------------------------------------------------------ gmvRaw -> stations; gmvRaw -> ev; gmvRaw -> refDist [label=" reference\n station"]; gmvRaw -> phases [label=" arrival\n times"]; gmvRaw -> frame [label=" frame\n count"]; world -> countries; stations -> stationsD; ev -> {refDist stationsD phases}; ev -> buildLayers [label=" epicenter\n marker"]; refDist -> phases [label=" calibrates"]; countries -> buildLayers; toRGB -> buildLayers; toRGB -> hexControls [label=" column\n color"]; phases -> buildLayers [label=" ring\n radii"]; phases -> recordSection [label=" dashed\n curves"]; phases -> hexGlobe [label=" legend"]; deckgl -> {buildLayers hexGlobe hexControls}; stationsD -> hexBins; stationsD -> recordSection [label=" traces"]; h3 -> hexBins; hexRes -> hexBins [label=" cell size", constraint=false]; hexRes -> hexControls; // ------------------------------------------------------------------ // Rendering inputs // ------------------------------------------------------------------ buildLayers -> hexControls [label=" scenery\n layers"]; hexBins -> hexControls [label=" stations\n per hex"]; showRings -> hexControls; frame -> hexControls [label=" starting\n frame"]; frame -> sync; hexGlobe -> hexControls; recordSection -> hexControls; hexControls -> sync; // ------------------------------------------------------------------ // Runtime calls each frame (imperative, no cell re-runs) // ------------------------------------------------------------------ hexControls -> hexGlobe [style=dashed, color="#ef4444", label=" setProps:\n redraw", fontcolor="#ef4444", constraint=false]; hexControls -> recordSection [style=dashed, color="#ef4444", label=" setTime:\n move marker", fontcolor="#ef4444", constraint=false]; }50:T5fd,// Load the EarthScope GMV (Ground Motion Visualization) file for this event. // The file is a single JSON document with event metadata plus one amplitude // time series per station (vertical component). const gmvRaw = await (async () => { const url = "https://data.earthscope.org/archive/seismology/products/gmv/events/2026/es-dp-gmv_eseid-12142222/GMV_Z_na_12142222_timeseries.json"; let response; try { // First try a direct browser request response = await fetch(url); } catch (e) { // fetch() throws on network/CORS errors; retry via a server-side proxy response = await fetch(url, {proxy: true}); } // fetch() does NOT throw on 404/500, so check the status explicitly if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); })(); // Summarize the file's structure. The full `amps` array of the example // station is replaced with its length to keep the output readable. display({ title: gmvRaw.title, event: gmvRaw.event, // epicenter lat/lon, depth, magnitude, origin time frames: gmvRaw.frame_count, // number of time steps per station secondsPerFrame: gmvRaw.time_step, // seconds between frames stations: gmvRaw.stations.length, exampleStation: {...gmvRaw.stations[0], amps: `[${gmvRaw.stations[0].amps.length} values]`}, referenceStation: gmvRaw.reference_station, // station used for predicted phase times phaseTimes: gmvRaw.phase_times // predicted P, S, R1 arrivals (s) at the reference station });51:T4aa,## Step 3 · Load the libraries We need three things: 1. **Country outlines** from `world-atlas`, which we'll draw as a basemap. 2. **deck.gl.** The ESM build doesn't import cleanly here, so we add its prebuilt UMD bundle with a `