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

1880

JAN

-0.19°C

INITIALIZING...

SPEED

`; 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"]; let time = 0; let speed = 0.3; let particles = []; let lastSpawnedIndex = -1; let gradient; let width, height; infoBtn.onclick = () => modal.classList.remove("hidden"); closeBtn.onclick = () => modal.classList.add("hidden"); speedInput.oninput = (e) => speed = parseFloat(e.target.value); function resize() { width = cv.width = 1000; // Use fixed resolution or container.clientWidth height = cv.height = 600; 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 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(); } } 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(); 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; } for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } 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; 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")}`; 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(); invalidation.then(() => cancelAnimationFrame(reqId)); return container; }34:Taad,**PROGRESS Global Temperature Anomalies 1880-2025** Tentative de visualisation par Luke Steuber, de l'analyse des températures de surface du Goddard Institute for Space Studies (GISS) de la NASA, version 4 (GISTEMP v4), une estimation de l'évolution de la température mondiale en surface. (https://data.giss.nasa.gov/gistemp/) J’apprécie cette exploration interactive d’une visualisation de données tirées de graphiques et tableaux afin de créer un résultat plus moderne et sans nécessairement utiliser la cartographie. Il est cependant clair que cette façon de représenter les données ne permet pas de situer les anomalies de variations de températures dans le temps, mais permet de créer une dimension temporelle plus appréciable. **Points positifs** - Mot Progress est bien mis de l’avant par sa taille et réfère directement à la visualisation interactive - Sous-titre clair et apporte une précision sur le sujet de la progression - Les dates ont une taille plus imposante que les autres éléments textuels sans en altérer la lisibilité et sans prendre trop de place. Un bel équilibre visuel réussi grâce aux niveaux de lecture créés. - La possibilité de déterminer la vitesse de progression des données par l’utilisateur lui permet d’en apprécier non seulement les éléments visuels qui constituent la visualisation, mais aussi d’établir le rythme de lecture souhaité - Le choix des couleurs réfère aux variations de températures froides (bleu pâle et foncé) et chaudes (jaune/orange/rouge). Les couleurs sont donc cohérentes au sujet pour en exprimer les données de façon clair et rapide. - Les variations de températures sont bien indiquées et le contraste de couleur avec l’arrière-plan en noir, ainsi que sont que son positionnement centré équilibre le tout. - L’utilisation d’un graphique de type Nuage de points est cohérente avec le sujet qui permet de catégoriser selon la couleur, la taille et le volume des données. - Les mois en capitales sont lisibles et contrastent bien avec la superposition. Peu par contre altérer la lecture des données affichées en-dessous. **Points à améliorer** - Il est dommage de ne pas pouvoir arrêter la vitesse d’affichage et sélectionner une date précise. - La visualisation demeure donc esthétique dans sa mise en forme, intègre dans la présentation des données, intéressante dans sa façon de présenter de nouvelles informations, mais demeure questionnable sur sa fonction. En effet, selon le graphique WHAT MAKES GOOD INFORMATION DESIGN développé par le journaliste David McCandless, propose une façon de considérer la visualisation selon les paramètres mentionnés précédemment. 35:[{"id":"546795837a7f59e3007939a428fb2ddc43aeba889fe077f94f9ee738e635cbf3032df0571587ea221673b623d244816d59307135d992c04bfe4b07e9f1da083e","href":"https://static.observableusercontent.com/files/546795837a7f59e3007939a428fb2ddc43aeba889fe077f94f9ee738e635cbf3032df0571587ea221673b623d244816d59307135d992c04bfe4b07e9f1da083e","name":"GLB.Ts+dSST.csv","type":"text/csv","lastModified":1789943427653.367,"size":12798}] 30:{"id":"c11410c4cb40e522","slug":"climate-change-progress","title":"Climate Change Progress","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-09-20T22:30:27.653Z","update_time":"$D2026-09-22T20:40:26.800Z","view_time":null,"first_public_time":"$D2026-09-20T22:30:27.653Z","has_unpublished_edits":null,"fork":{"id":"d91b442b15640eb6","slug":"fuse","title":"Climate Change Progress","owner":{"id":"81892477091a9948","login":"coolhand","name":"Luke Steuber"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1453abbbb403bc88","login":"datavizrookie","name":"Olio","avatar_url":null,"tier":"starter_2024","bio":""},"version":38,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e37d9a5072137eaf","login":"datavizrookie","name":"Olio","avatar_url":null,"tier":null,"bio":""}],"members":[{"type":"team","id":"1453abbbb403bc88","login":"datavizrookie","name":"Olio","avatar_url":null,"tier":"starter_2024","role":"editor"},{"type":"individual","id":"e37d9a5072137eaf","login":"datavizrookie","name":"Olio","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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"},{"id":36,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"

PROGRESS

What is this?