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; }