{ // --- 1. CONFIGURATION & STYLES --- const css = ` .earthquake-dashboard { position: relative; width: 100%; height: 650px; background: #050505; /* Deepened black for maximum contrast */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; border-radius: 8px; } .earthquake-dashboard svg { width: 100%; height: 100%; display: block; } /* UPDATED: Lighter fill and stronger stroke for high contrast */ .land { fill: #2e2e2e; stroke: #454545; stroke-width: 0.8px; } .panel { position: absolute; background: rgba(10, 10, 10, 0.95); /* Slightly more opaque panels */ border: 1px solid #333; padding: 14px; color: #aaa; font-size: 10px; pointer-events: none; } #info { top: 20px; left: 20px; max-width: 220px; } #info h1 { font-size: 10px; font-weight: 700; color: #eee; /* Brighter text */ margin-bottom: 8px; text-transform: uppercase; letter-spacing: 2px; } .live { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 9px; color: #ff5555; } .live-dot { width: 6px; height: 6px; background: #ff5555; border-radius: 50%; animation: blink 1.5s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 9px; color: #888; } /* Brighter gradient */ .scale-bar { flex: 1; height: 4px; background: linear-gradient(to right, #44cc88, #ffcc44, #ff5555); border-radius: 2px; } #stats { top: 20px; right: 20px; text-align: right; } .stat-val { font-size: 20px; color: #fff; font-weight: 400; } .stat-label { font-size: 9px; color: #888; text-transform: uppercase; margin-top: 2px; } .stat-row { margin-bottom: 12px; } #tooltip { position: absolute; background: rgba(0, 0, 0, 0.95); border: 1px solid #444; padding: 12px; color: #ccc; font-size: 10px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 20; max-width: 280px; } #tooltip h3 { font-size: 11px; font-weight: 600; margin-bottom: 8px; color: #fff; } #tooltip .row { display: flex; justify-content: space-between; margin: 3px 0; gap: 15px; } #tooltip .val { color: #888; } #time { bottom: 20px; left: 20px; } #controls { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 1px; background: #333; pointer-events: auto; } .btn { background: #1a1a1a; border: none; color: #777; padding: 8px 14px; font-size: 9px; cursor: pointer; transition: all 0.15s; text-transform: uppercase; letter-spacing: 1px; font-family: inherit; } .btn:hover { color: #fff; background: #2a2a2a; } .btn.active { color: #fff; background: #333; font-weight: 600; } @keyframes pulse { 0% { r: 5; opacity: 0.8; stroke-width: 2px; } 100% { r: 30; opacity: 0; stroke-width: 0px; } } `; // --- 2. HTML STRUCTURE --- const container = html`

Earthquake Monitor

USGS Live Feed

Real-time seismic activity. Ring size indicates magnitude. Color shows depth.

M8+

Events

0.0

Max Magnitude

`; // --- 3. JAVASCRIPT LOGIC --- const svg = d3.select(container).select("#map"); const tooltip = container.querySelector("#tooltip"); const mapWidth = width; const height = 650; let projection, path; let landGroup, quakeGroup; let earthquakes = []; let currentPeriod = "day"; let interval; // UPDATED: Brighter colors for better visibility against dark map function getMagColor(mag, depth) { if (depth < 70) return `rgba(255, 90, 90, ${0.6 + mag * 0.05})`; // Bright Red if (depth < 300) return `rgba(255, 200, 80, ${0.6 + mag * 0.05})`; // Bright Yellow return `rgba(100, 160, 255, ${0.6 + mag * 0.05})`; // Bright Blue } function init() { svg.attr("width", mapWidth).attr("height", height); projection = d3 .geoNaturalEarth1() .scale(mapWidth / 5.5) .translate([mapWidth / 2, height / 2]); path = d3.geoPath().projection(projection); landGroup = svg.append("g"); quakeGroup = svg.append("g"); d3.json( "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json" ).then((world) => { const countries = topojson.feature(world, world.objects.countries); landGroup .selectAll("path") .data(countries.features) .enter() .append("path") .attr("class", "land") .attr("d", path); fetchEarthquakes(); }); } async function fetchEarthquakes() { const urls = { day: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson", week: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson", month: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson" }; const updatedEl = container.querySelector("#updated"); if (updatedEl) updatedEl.textContent = "Fetching..."; try { const response = await fetch(urls[currentPeriod]); const data = await response.json(); earthquakes = data.features .map((f) => ({ id: f.id, mag: f.properties.mag, place: f.properties.place, time: f.properties.time, lon: f.geometry.coordinates[0], lat: f.geometry.coordinates[1], depth: f.geometry.coordinates[2] })) .filter((q) => q.mag >= 2.5); container.querySelector("#count").textContent = earthquakes.length; const maxMag = earthquakes.length ? Math.max(...earthquakes.map((q) => q.mag)) : 0; container.querySelector("#max-mag").textContent = maxMag.toFixed(1); if (updatedEl) updatedEl.textContent = `Updated: ${new Date().toLocaleTimeString()}`; drawQuakes(); } catch (err) { console.error("Failed to fetch", err); if (updatedEl) updatedEl.textContent = "Error fetching data"; } } function drawQuakes() { quakeGroup.selectAll("*").remove(); const sorted = [...earthquakes].sort((a, b) => a.mag - b.mag); sorted.forEach((quake, i) => { const pos = projection([quake.lon, quake.lat]); if (!pos) return; const baseRadius = Math.max(3, Math.pow(2, quake.mag) * 0.6); const color = getMagColor(quake.mag, quake.depth); const age = (Date.now() - quake.time) / (1000 * 60 * 60); if (age < 12) { const g = quakeGroup .append("g") .attr("transform", `translate(${pos[0]}, ${pos[1]})`); g.append("circle") .attr("r", baseRadius) .attr("fill", "none") .attr("stroke", color) .style("animation", "pulse 2s ease-out infinite") .style("animation-delay", `${i * 0.1}s`); } quakeGroup .append("circle") .attr("cx", pos[0]) .attr("cy", pos[1]) .attr("r", baseRadius) .attr("fill", color) .attr("stroke", "rgba(255,255,255,0.4)") // Stronger stroke for contrast .attr("stroke-width", 0.5) .datum(quake) .on("mouseenter", function (event, d) { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 2); showTooltip(event, d); }) .on("mouseleave", function () { d3.select(this) .attr("stroke", "rgba(255,255,255,0.4)") .attr("stroke-width", 0.5); tooltip.style.opacity = "0"; }); if (quake.mag >= 5.5) { quakeGroup .append("text") .attr("x", pos[0]) .attr("y", pos[1] + baseRadius + 12) .attr("text-anchor", "middle") .attr("fill", "#fff") // Whiter text .attr("font-size", "9px") .style("text-shadow", "0 1px 3px rgba(0,0,0,0.8)") // Shadow for readability .text(quake.mag.toFixed(1)); } }); } function showTooltip(event, quake) { const timeAgo = Math.round((Date.now() - quake.time) / (1000 * 60 * 60)); const bounds = container.getBoundingClientRect(); const x = event.clientX - bounds.left; const y = event.clientY - bounds.top; tooltip.innerHTML = `

M${quake.mag.toFixed(1)} Earthquake

Location${ quake.place }

Depth${quake.depth.toFixed( 0 )} km

Time${timeAgo}h ago

`; tooltip.style.opacity = "1"; tooltip.style.left = Math.min(x + 15, mapWidth - 200) + "px"; tooltip.style.top = Math.min(y + 15, height - 100) + "px"; } container.querySelectorAll(".btn").forEach((btn) => { btn.addEventListener("click", function () { container .querySelectorAll(".btn") .forEach((b) => b.classList.remove("active")); this.classList.add("active"); currentPeriod = this.dataset.period; fetchEarthquakes(); }); }); init(); interval = setInterval(fetchEarthquakes, 5 * 60 * 1000); invalidation.then(() => clearInterval(interval)); return container; }