3f:null 40:["$","title",null,{"children":"Global temperature and heat waves | Joshua Poddoku | Observable"}] 46:T9de,globe = { const {Globe, countries, palette, squareAt} = lib; const height = Math.round(Math.min(620, Math.max(340, width * 0.75))); const hit = html`

`; const tip = html`

`; const readout = html`

Hover over or tap a square to read it.

`; const fig = html`

${hit}${tip}${readout}`; const g = new Globe(hit, {animateIn: false}) .width(width) .height(height) .backgroundColor("rgba(0,0,0,0)") .showAtmosphere(false) .polygonsData(countries.features) .polygonAltitude(0.002) .polygonCapColor(() => "rgba(0,0,0,0)") .polygonSideColor(() => "rgba(0,0,0,0)") .polygonStrokeColor(() => palette.ink) .pathPoints(d => d) .pathPointLat(d => d[0]) .pathPointLng(d => d[1]) .pathPointAlt(0.004) .pathColor(() => palette.ink) .pathStroke(2) .pathTransitionDuration(0); g.globeMaterial().shininess = 0; const [ambient, sun] = g.lights(); ambient.color.set("#fff"); ambient.intensity = Math.PI * 0.95; sun.intensity = Math.PI * 0.15; g.controls().autoRotate = true; g.controls().autoRotateSpeed = 0.3; g.pointOfView({lat: 25, lng: 10, altitude: 1.75}); let key = null; const clear = () => { tip.hidden = true; key = null; g.pathsData([]); }; const inspect = event => { if (!fig.month) return; const box = hit.getBoundingClientRect(); const x = event.clientX - box.left; const y = event.clientY - box.top; const point = g.toGlobeCoords(x, y); if (!point) return clear(); const sq = squareAt(fig.month, point.lat, point.lng); const text = `${sq.label}: ${sq.anom > 0 ? "+" : ""}${sq.anom.toFixed(1)} °C against normal`; tip.textContent = readout.textContent = text; tip.hidden = false; tip.style.left = `${Math.min(x + 14, box.width - tip.offsetWidth - 4)}px`; tip.style.top = `${y + 14}px`; if (key !== sq.key) { key = sq.key; g.pathsData([sq.outline]); } }; hit.addEventListener("pointermove", inspect); hit.addEventListener("pointerdown", inspect); hit.addEventListener("pointerenter", () => g.controls().autoRotate = false); hit.addEventListener("pointerleave", () => { g.controls().autoRotate = true; clear(); }); fig.globe = g; invalidation.then(() => g._destructor()); return fig; } 47:T1398,viewof lib = { const grid = await FileAttachment("world.json").json(); const [Globe, world] = await Promise.all([ import("https://cdn.jsdelivr.net/npm/globe.gl@2/+esm").then(m => m.default), fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(r => r.json()) ]); const countries = topojson.feature(world, world.objects.countries); const palette = window.matchMedia("(prefers-color-scheme: dark)").matches ? {hot: "#E0684A", cool: "#4A87CF", mid: "#3A3334", ink: "#F1ECEB"} : {hot: "#B5341C", cool: "#2F6DB5", mid: "#DEDADA", ink: "#241816"}; const color = d3.scaleDiverging([-4, 0, 4], d3.piecewise(d3.interpolateLab, [palette.cool, palette.mid, palette.hot])).clamp(true); const cols = grid.lon.length; const monthName = m => new Date(`${m.month}-01`).toLocaleDateString("en-GB", {month: "long", year: "numeric", timeZone: "UTC"}); const signed = d => `${d > 0 ? "+" : ""}${d}`; function texture(month) { const size = 10; const canvas = document.createElement("canvas"); canvas.width = 72 * size; canvas.height = 36 * size; const ctx = canvas.getContext("2d"); ctx.fillStyle = palette.mid; ctx.fillRect(0, 0, canvas.width, canvas.height); month.anom.forEach((a, i) => { if (a == null) return; const lat = grid.lat[Math.floor(i / cols)]; const lon = ((grid.lon[i % cols] + 180) % 360) - 180; ctx.fillStyle = color(a); ctx.fillRect(((lon - 2.5 + 180) / 5) * size, ((90 - lat - 2.5) / 5) * size, size, size); }); return canvas.toDataURL(); } function squareAt(month, lat, lng) { const row = Math.min(35, Math.floor((lat + 90) / 5)); const col = Math.floor((((lng % 360) + 360) % 360) / 5); const south = -90 + row * 5; const west = ((col * 5 + 180) % 360) - 180; const centre = [south + 2.5, west + 2.5]; const edge = (from, to, fixed, isLat) => { const step = to > from ? 1 : -1; return d3.range(from, to + step, step).map(v => isLat ? [fixed, v] : [v, fixed]); }; return { key: row * cols + col, anom: month.anom[row * cols + col], label: `${Math.abs(centre[0])}°${centre[0] < 0 ? "S" : "N"}, ${Math.abs(centre[1])}°${centre[1] < 0 ? "W" : "E"}`, outline: [ ...edge(west, west + 5, south, true), ...edge(south, south + 5, west + 5, false), ...edge(west + 5, west, south + 5, true), ...edge(south + 5, south, west, false) ] }; } function share(month) { let warm = 0, total = 0; month.anom.forEach((a, i) => { if (a == null) return; const w = Math.cos(grid.lat[Math.floor(i / cols)] * Math.PI / 180); total += w; if (a > 0) warm += w; }); return warm / total; } const chartBox = html`

Loading NOAA's yearly series…

`; const year = new Date().getUTCFullYear() - 1; fetch(`https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/global/time-series/globe/land_ocean/1/0/1850-${year}/data.json`) .then(r => r.json()) .then(({data}) => { const rows = Object.entries(data).map(([k, d]) => ({year: +k.slice(0, 4), v: d.departure})); const years = [...d3.group(rows, d => d.year)] .filter(([, v]) => v.length === 12) .map(([year, v]) => ({year, mean: d3.mean(v, d => d.v)})); const base = d3.mean(years.filter(d => d.year <= 1900), d => d.mean); const planet = years.map(d => ({year: d.year, anomaly: d.mean - base})); const last = planet.at(-1); chartBox.replaceChildren( Plot.plot({ width, height: 340, marginLeft: 44, x: {label: null, tickFormat: "d", interval: 1, ticks: d3.range(1850, 2030, 25)}, y: {label: "Difference from 1850–1900 (°C)", grid: true, tickFormat: signed}, color: {type: "diverging", domain: [-1.5, 1.5], pivot: 0, range: [palette.cool, palette.mid, palette.hot], interpolate: "lab"}, marks: [ Plot.rectY(planet, {x: "year", y: "anomaly", fill: "anomaly", tip: true, channels: {Year: d => String(d.year)}}), Plot.ruleY([0]) ] }), html`

${last.year} was ${last.anomaly.toFixed(2)} °C warmer than the 1850–1900 average.

` ); }) .catch(() => chartBox.replaceChildren(html`

NOAA's yearly series didn't load. Reload the page to try again.

`)); const view = html`

${chartBox} ${md`--- Monthly grid from [NOAAGlobalTemp v6.1](https://www.ncei.noaa.gov/products/land-based-station/noaa-global-temp) up to ${monthName(grid.months.at(-1))}, anomalies against ${grid.baseline}. Global series from [NOAA Climate at a Glance](https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/global/time-series). Country borders from [world-atlas](https://github.com/topojson/world-atlas). Globe drawn with [Globe.gl](https://globe.gl/).`}

`; view.value = {grid, Globe, countries, palette, monthName, texture, squareAt, share}; return view; }48:[{"id":"da49dcf15aa821adb6323590c9f168175f93a6a868d96133224606d454561e4baea0ec6cee4f8214f3ecdb36473c9858296ea8b01fef0840073a0ccb6b48f01a","href":"https://static.observableusercontent.com/files/da49dcf15aa821adb6323590c9f168175f93a6a868d96133224606d454561e4baea0ec6cee4f8214f3ecdb36473c9858296ea8b01fef0840073a0ccb6b48f01a","name":"world.json","type":"application/json","lastModified":1790216368436,"size":158453}] 44:{"id":"1c227e070693b31f","slug":"global-temperature","title":"Global temperature and heat waves","thumbnail":"8cde4cc518d1dcf616fc64a4074e9d4a9f131e113a022d03be4570b60a08d9a0","access_level":"public","create_time":"$D2026-09-24T18:11:57.013Z","update_time":"$D2026-09-24T20:11:45.366Z","view_time":null,"first_public_time":"$D2026-09-24T19:03:25.804Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"1ba1ade48580d6b1","login":"joshua-poddoku","name":"Joshua Poddoku","avatar_url":"https://avatars-next.observableusercontent.com/300268345599deadc6c8e268f4b7e4c695183678d9f5efc50319e8a8681a7e2e","tier":"free_2026","bio":"","following":false},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"25af9a54bbc56aa2","login":"joshua-poddoku","name":"Joshua Poddoku","avatar_url":"https://avatars-next.observableusercontent.com/300268345599deadc6c8e268f4b7e4c695183678d9f5efc50319e8a8681a7e2e","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"1ba1ade48580d6b1","login":"joshua-poddoku","name":"Joshua Poddoku","avatar_url":"https://avatars-next.observableusercontent.com/300268345599deadc6c8e268f4b7e4c695183678d9f5efc50319e8a8681a7e2e","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Global temperature and heat waves","cells":[{"id":39,"value":"# Global temperature and heat waves","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Each 5° square shows how far that month's temperature was from the 1991–2020 average for the same month. Red is warmer, blue is cooler.\n\nDrag to turn the globe. Hover over or tap a square to see its value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"viewof month = Inputs.select(lib.grid.months, {\n label: \"Month\",\n value: lib.grid.months.at(-1),\n format: lib.monthName\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"{\n const {palette, texture} = lib;\n globe.month = month;\n globe.globe.globeImageUrl(texture(month));\n return Plot.legend({\n color: {type: \"diverging\", domain: [-4, 4], pivot: 0, range: [palette.cool, palette.mid, palette.hot], interpolate: \"lab\"},\n label: \"Difference from the 1991–2020 average for that month (°C)\",\n width: Math.min(width, 420),\n marginLeft: 12,\n marginRight: 16,\n tickFormat: d => `${d > 0 ? \"+\" : \"\"}${d}`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`In ${lib.monthName(month)}, **${Math.round(lib.share(month) * 100)}%** of the Earth's surface was warmer than its 1991–2020 average for the month. In a stable climate you'd expect about half. Over the whole year shown here, the share never dropped below ${Math.round(d3.min(lib.grid.months, lib.share) * 100)}%.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`## Data\n\n[NOAAGlobalTemp](https://www.ncei.noaa.gov/products/land-based-station/noaa-global-temp) combines land stations and sea-surface measurements into a grid of monthly averages from 1850. The last twelve months are attached to this notebook as \\`world.json\\`. Each square is about 550 km across at the equator, which is too coarse to show a single heat wave.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## Global average since 1850\n\nYearly global temperature from NOAA, for complete years only, compared with the 1850–1900 average.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"2"}} 45:"$44:body"