2c:null 2d:["$","title",null,{"children":"Climate Change Progress | Luke Steuber | Observable"}] 32:T147e,33:T2068,chart = { // 1. Create the Container const container = html`

1880

JAN

-0.19°C

INITIALIZING...

SPEED

`; // 2. Select Elements (scoped to container) const cv = container.querySelector("canvas"); const ctx = cv.getContext("2d"); const yearEl = container.querySelector(".year-value"); const monthEl = container.querySelector(".month-value"); const tempEl = container.querySelector(".temp-value"); const liveText = container.querySelector(".live-text"); const liveDot = container.querySelector(".live-dot"); const speedInput = container.querySelector("input[type=range]"); const modal = container.querySelector(".modal"); const infoBtn = container.querySelector(".info-btn"); const closeBtn = container.querySelector(".close-btn"); const monthNames = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; // 3. State Variables let time = 0; let speed = 0.3; let particles = []; let lastSpawnedIndex = -1; let gradient; let width, height; // 4. Modal & Speed Logic infoBtn.onclick = () => modal.classList.remove("hidden"); closeBtn.onclick = () => modal.classList.add("hidden"); speedInput.oninput = (e) => speed = parseFloat(e.target.value); // 5. Resize Logic function resize() { width = cv.width = 1000; // Use fixed resolution or container.clientWidth height = cv.height = 600; // Create Gradient const centerY = height / 2; const scaleY = 150; gradient = ctx.createLinearGradient(0, centerY - scaleY, 0, centerY + scaleY); gradient.addColorStop(0, "rgba(255, 50, 0, 0.4)"); gradient.addColorStop(0.45, "rgba(255, 50, 0, 0.05)"); gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)"); gradient.addColorStop(0.55, "rgba(0, 200, 255, 0.05)"); gradient.addColorStop(1, "rgba(0, 200, 255, 0.4)"); } resize(); // Call once // 6. Particle Class (Pasted from your code) class PillarParticle { constructor(x, axisY, dataY, temp) { this.x = x; this.axisY = axisY; this.dataY = dataY; this.temp = temp; this.size = Math.random() * 1.5 + 0.5; this.y = axisY + Math.random() * (dataY - axisY); const t = Math.max(-1, Math.min(2, temp)); if (t < -0.2) { this.r = 0; this.g = 200; this.b = 255; } else if (t < 0) { this.r = 150; this.g = 220; this.b = 255; } else if (t < 0.5) { this.r = 255; this.g = 200; this.b = 100; } else if (t < 1.0) { this.r = 255; this.g = 100; this.b = 50; } else { this.r = 255; this.g = 50; this.b = 0; } const absT = Math.abs(t); this.speed = 0.5 + Math.random() * (1 + absT); this.vy = this.temp > 0 ? -this.speed : this.speed; } update() { this.y += this.vy; if (this.temp > 0) { if (this.y < this.dataY) { this.y = this.axisY; this.x += (Math.random() - 0.5) * 2; } } else { if (this.y > this.dataY) { this.y = this.axisY; this.x += (Math.random() - 0.5) * 2; } } } draw() { const totalDist = Math.abs(this.dataY - this.axisY); const currentDist = Math.abs(this.y - this.axisY); let alpha = 1 - (currentDist / (totalDist + 0.1)); alpha = Math.max(0, Math.min(1, alpha)); ctx.fillStyle = `rgba(${this.r},${this.g},${this.b},${alpha})`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } // 7. Animation Loop let reqId; function animate() { if (!data || data.length === 0) return; // Wait for data cell time += speed; if (time >= data.length) { time = 0; lastSpawnedIndex = -1; particles = []; } ctx.clearRect(0, 0, width, height); const paddingX = 50; const graphWidth = width - paddingX * 2; const scaleY = 150; const centerY = height / 2; const currentIndex = Math.floor(time); // Draw Filled Line ctx.beginPath(); ctx.moveTo(paddingX, centerY); let finalX = paddingX; for (let i = 0; i <= currentIndex; i++) { const d = data[i]; const lx = paddingX + (i / data.length) * graphWidth; const ly = centerY - d.anomaly * scaleY; ctx.lineTo(lx, ly); finalX = lx; } ctx.lineTo(finalX, centerY); ctx.closePath(); ctx.fillStyle = gradient; ctx.fill(); // Spawn Particles if (currentIndex > lastSpawnedIndex) { for (let i = lastSpawnedIndex + 1; i <= currentIndex; i++) { const d = data[i]; if (!d) continue; const px = paddingX + (i / data.length) * graphWidth; const py = centerY - d.anomaly * scaleY; const count = 2 + Math.floor(Math.random() * Math.max(2, Math.abs(d.anomaly) * 5)); for (let p = 0; p < count; p++) { particles.push(new PillarParticle(px, centerY, py, d.anomaly)); } } lastSpawnedIndex = currentIndex; } // Update Particles for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } // Draw Head Dot & Update UI const currentData = data[currentIndex]; if (currentData) { const hx = paddingX + (currentIndex / data.length) * graphWidth; const hy = centerY - currentData.anomaly * scaleY; ctx.fillStyle = "#fff"; ctx.shadowBlur = 10; ctx.shadowColor = "#fff"; ctx.beginPath(); ctx.arc(hx, hy, 3, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; // Update HTML Elements yearEl.textContent = currentData.year; monthEl.textContent = monthNames[currentData.month - 1]; tempEl.textContent = `${currentData.anomaly > 0 ? "+" : ""}${currentData.anomaly.toFixed(2)}°C`; liveText.textContent = `SCAN: ${currentData.year}.${String(currentData.month).padStart(2, "0")}`; // Dynamic Colors let color, shadowColor, shadowSize; if (currentData.anomaly < 0) { color = "rgba(200, 240, 255, 1)"; shadowColor = "rgba(0, 200, 255, 0.8)"; shadowSize = 20 + Math.abs(currentData.anomaly) * 30; liveDot.style.backgroundColor = "#0cf"; liveDot.style.boxShadow = "0 0 10px #0cf"; } else if (currentData.anomaly < 0.5) { color = "rgba(255, 240, 200, 1)"; shadowColor = "rgba(255, 180, 50, 0.6)"; shadowSize = 10; liveDot.style.backgroundColor = "#fa0"; liveDot.style.boxShadow = "none"; } else { color = "rgba(255, 255, 255, 1)"; shadowColor = "rgba(255, 50, 0, 0.9)"; shadowSize = 30 + currentData.anomaly * 40; liveDot.style.backgroundColor = "#f00"; liveDot.style.boxShadow = "0 0 15px #f00"; } tempEl.style.color = color; tempEl.style.textShadow = `0 0 ${shadowSize}px ${shadowColor}`; } reqId = requestAnimationFrame(animate); } animate(); // Observable Cleanup: Stop animation when cell re-runs invalidation.then(() => cancelAnimationFrame(reqId)); return container; }34:[{"id":"546795837a7f59e3007939a428fb2ddc43aeba889fe077f94f9ee738e635cbf3032df0571587ea221673b623d244816d59307135d992c04bfe4b07e9f1da083e","href":"https://static.observableusercontent.com/files/546795837a7f59e3007939a428fb2ddc43aeba889fe077f94f9ee738e635cbf3032df0571587ea221673b623d244816d59307135d992c04bfe4b07e9f1da083e","name":"GLB.Ts+dSST.csv","type":"text/csv","lastModified":1768739890480.389,"size":12798}] 30:{"id":"d91b442b15640eb6","slug":"fuse","title":"Climate Change Progress","thumbnail":"4a7673e7472d013e062dabbf2b405acbfd8c4a8f36e7b39939fd8b8b8580549d","access_level":"public","create_time":"$D2026-01-18T08:57:50.166Z","update_time":"$D2026-01-18T13:19:52.867Z","view_time":null,"first_public_time":"$D2026-01-18T16:02:19.783Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"81892477091a9948","login":"coolhand","name":"Luke Steuber","avatar_url":"https://avatars-next.observableusercontent.com/cbf35db0f8b14279a0d44a789f3878789d61afcb29b8b49a49f9dea5c2e897aa","tier":"starter_2024","bio":"Applied linguist, speech-language pathologist, assistive technology engineer."},"version":34,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7b4ba007dc340435","login":"luke-steuber","name":"Luke Steuber","avatar_url":"https://avatars-next.observableusercontent.com/6805b1f2033c4c5185ff35fe06c2b8c70c102ce2bb88b22a431194fbef978592","tier":null,"bio":""}],"members":[{"type":"team","id":"81892477091a9948","login":"coolhand","name":"Luke Steuber","avatar_url":"https://avatars-next.observableusercontent.com/cbf35db0f8b14279a0d44a789f3878789d61afcb29b8b49a49f9dea5c2e897aa","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7b4ba007dc340435","login":"luke-steuber","name":"Luke Steuber","avatar_url":"https://avatars-next.observableusercontent.com/6805b1f2033c4c5185ff35fe06c2b8c70c102ce2bb88b22a431194fbef978592","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Climate Change Progress","cells":[{"id":27,"value":"# Climate Change Progress\n## Visualizing climate change since 1880","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"data = {\n const text = await FileAttachment(\"GLB.Ts+dSST.csv\").text();\n const lines = text.trim().split(\"\\n\");\n const result = [];\n for (let i = 0; i < lines.length; i++) {\n const line = lines[i].trim();\n if (\n !line ||\n line.startsWith(\"Land\") ||\n line.startsWith(\"Year\") ||\n line.startsWith(\"Global\")\n )\n continue;\n const parts = line.split(\",\");\n const year = parseInt(parts[0]);\n if (isNaN(year)) continue;\n if (parts.length >= 13) {\n for (let month = 1; month <= 12; month++) {\n const val = parts[month];\n if (val && val !== \"***\") {\n const anomaly = parseFloat(val);\n if (!isNaN(anomaly)) result.push({ year, month, anomaly });\n }\n }\n }\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"

PROGRESS

What is this?