Discovering New Worlds
Is there another planet out there Earth-like enough to support life?
Every second, the Sun turns about 600 million tons of hydrogen into helium. That's where sunlight comes from.
Code
lpGlobe = {
const SIZE = 440;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const quakes = lpQuakes || [];
const now = Date.now();
const DAY = 864e5;
const wrap = html`<div class="lp-globe-wrap"></div>`;
const canvas = html`<canvas width=${SIZE * dpr} height=${SIZE * dpr} role="img"
aria-label="Spinning globe showing every magnitude 2.5 and larger earthquake from the past 7 days, from the USGS live feed. Most dots line up along plate boundaries, like the Ring of Fire around the Pacific Ocean."></canvas>`;
const info = html`<div class="lp-globe-info" aria-live="polite"></div>`;
const legend = html`<div class="lp-globe-legend" aria-hidden="true">
<span><i style="background:#fde047"></i>Last 24 hours</span>
<span><i style="background:#f97316"></i>Earlier this week</span>
<span>Bigger dot = stronger quake</span></div>`;
const src = html`<p class="lp-source">Live data: <a href="https://earthquake.usgs.gov/earthquakes/map/" target="_blank" rel="noopener">USGS Earthquake Hazards Program</a>. ${reduceMotion ? "Drag" : "Drag to spin"}, or tap a dot.</p>`;
wrap.append(canvas, info, legend, src);
const ctx = canvas.getContext("2d");
ctx.scale(dpr, dpr);
const projection = d3.geoOrthographic().fitExtent([[6, 6], [SIZE - 6, SIZE - 6]], {type: "Sphere"}).precision(0.5);
const path = d3.geoPath(projection, ctx);
const graticule = d3.geoGraticule10();
const R = projection.scale();
const radius = m => 1.6 * Math.pow(1.65, m - 2.5) + 0.6;
const ago = t => {
const h = (now - t) / 36e5;
if (h < 1) return "less than an hour ago";
if (h < 24) return `${Math.round(h)} hour${Math.round(h) === 1 ? "" : "s"} ago`;
const d = Math.round(h / 24);
return `${d} day${d === 1 ? "" : "s"} ago`;
};
// Headline count + default caption
const strongest = quakes[quakes.length - 1];
const countEl = document.getElementById("lp-quake-count");
if (countEl && quakes.length) countEl.textContent = quakes.length.toLocaleString();
const defaultInfo = () => {
if (!lpQuakes) { info.innerHTML = "Live earthquake data couldn't load right now. Check back later!"; return; }
if (!strongest) { info.innerHTML = "No earthquakes in the feed right now."; return; }
info.innerHTML = `Strongest this week: <b>M${strongest.mag.toFixed(1)}</b>, ${strongest.place} (${ago(strongest.time)})`;
};
defaultInfo();
// Start centered on the strongest quake so it's front and center
let rotation = strongest ? [-strongest.lon, -Math.max(-35, Math.min(35, strongest.lat)) * 0.6] : [74, -20];
let selected = null;
let lastInteract = -Infinity;
function draw(t) {
projection.rotate(rotation);
const [cx, cy] = projection.translate();
ctx.clearRect(0, 0, SIZE, SIZE);
// Atmosphere glow
const glow = ctx.createRadialGradient(cx, cy, R * 0.92, cx, cy, R * 1.04);
glow.addColorStop(0, "rgba(56,189,248,0.35)");
glow.addColorStop(1, "rgba(56,189,248,0)");
ctx.fillStyle = glow;
ctx.beginPath(); ctx.arc(cx, cy, R * 1.04, 0, 2 * Math.PI); ctx.fill();
// Ocean
const ocean = ctx.createRadialGradient(cx - R * 0.35, cy - R * 0.35, R * 0.1, cx, cy, R);
ocean.addColorStop(0, "#1e4f8f");
ocean.addColorStop(1, "#0a1f45");
ctx.beginPath(); path({type: "Sphere"}); ctx.fillStyle = ocean; ctx.fill();
ctx.beginPath(); path(graticule); ctx.strokeStyle = "rgba(148,163,184,0.16)"; ctx.lineWidth = 0.6; ctx.stroke();
if (lpLand) {
ctx.beginPath(); path(lpLand);
ctx.fillStyle = "#2f6f5e"; ctx.fill();
ctx.strokeStyle = "rgba(226,232,240,0.35)"; ctx.lineWidth = 0.5; ctx.stroke();
}
// Quakes on the visible side of the globe
const center = [-rotation[0], -rotation[1]];
for (const q of quakes) {
if (d3.geoDistance([q.lon, q.lat], center) > Math.PI / 2 - 0.02) continue;
const [x, y] = projection([q.lon, q.lat]);
const r = radius(q.mag);
const recent = now - q.time < DAY;
if (recent && !reduceMotion) {
const phase = ((t / 1600) + (q.time % 1000) / 1000) % 1;
ctx.beginPath(); ctx.arc(x, y, r + phase * 14, 0, 2 * Math.PI);
ctx.strokeStyle = `rgba(253,224,71,${0.7 * (1 - phase)})`; ctx.lineWidth = 1.5; ctx.stroke();
}
ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = recent ? "rgba(253,224,71,0.92)" : "rgba(249,115,22,0.72)";
ctx.fill();
ctx.strokeStyle = "rgba(15,23,42,0.6)"; ctx.lineWidth = 0.6; ctx.stroke();
}
if (selected && d3.geoDistance([selected.lon, selected.lat], center) < Math.PI / 2) {
const [x, y] = projection([selected.lon, selected.lat]);
ctx.beginPath(); ctx.arc(x, y, radius(selected.mag) + 5, 0, 2 * Math.PI);
ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 2; ctx.stroke();
}
// Soft shading on the night edge
const shade = ctx.createRadialGradient(cx - R * 0.3, cy - R * 0.3, R * 0.5, cx, cy, R);
shade.addColorStop(0, "rgba(2,6,23,0)");
shade.addColorStop(1, "rgba(2,6,23,0.45)");
ctx.beginPath(); path({type: "Sphere"}); ctx.fillStyle = shade; ctx.fill();
}
// Drag to spin (mouse + touch)
const toLocal = e => {
const b = canvas.getBoundingClientRect();
return [(e.clientX - b.left) * SIZE / b.width, (e.clientY - b.top) * SIZE / b.height];
};
let dragStart = null, rotStart = null, moved = false;
canvas.addEventListener("pointerdown", e => {
dragStart = toLocal(e); rotStart = rotation.slice(); moved = false;
canvas.setPointerCapture(e.pointerId);
});
canvas.addEventListener("pointermove", e => {
if (!dragStart) return;
const p = toLocal(e);
const dx = p[0] - dragStart[0], dy = p[1] - dragStart[1];
if (Math.hypot(dx, dy) > 4) moved = true;
const k = 90 / R;
rotation = [rotStart[0] + dx * k, Math.max(-70, Math.min(70, rotStart[1] - dy * k))];
lastInteract = performance.now();
if (reduceMotion) draw(0);
});
canvas.addEventListener("pointerup", e => {
const p = toLocal(e);
dragStart = null;
lastInteract = performance.now();
if (moved) return;
// Tap: pick the nearest visible quake
const center = [-rotation[0], -rotation[1]];
let best = null, bestD = 22;
for (const q of quakes) {
if (d3.geoDistance([q.lon, q.lat], center) > Math.PI / 2) continue;
const [x, y] = projection([q.lon, q.lat]);
const d = Math.hypot(x - p[0], y - p[1]) - radius(q.mag);
if (d < bestD) { bestD = d; best = q; }
}
selected = best;
if (best) info.innerHTML = `<b>M${best.mag.toFixed(1)}</b> · ${best.place} · ${ago(best.time)}`;
else defaultInfo();
if (reduceMotion) draw(0);
});
canvas.addEventListener("pointercancel", () => { dragStart = null; });
// Animate only while the globe is on screen
let timer = null, last = null;
const tick = elapsed => {
if (last !== null && !dragStart && performance.now() - lastInteract > 2500) {
rotation[0] += (elapsed - last) * 0.006;
}
last = elapsed;
draw(elapsed);
};
const start = () => { if (!timer) { last = null; timer = d3.timer(tick); } };
const stop = () => { if (timer) { timer.stop(); timer = null; } };
if (reduceMotion) {
draw(0);
} else {
const io = new IntersectionObserver(([e]) => e.isIntersecting ? start() : stop());
io.observe(canvas);
invalidation.then(() => { io.disconnect(); stop(); });
}
return wrap;
}