31:T73e,legend = () => { const wrapper = d3.create("div").style("width", `${w}px`) wrapper.append("div") .style("font-family", franklinLight) .style("line-height", "22px") .style("margin-bottom", "4px") .style("text-align", "center") .html(`${season} temperature change
per decade, ${startYear}-${endYear}`); const margin = { top: 0, bottom: 18 }; const width = 300; const height = 16; const scaleBand = d3.scaleBand() .domain(legendValues) .range([0, width]); const scaleLinear = d3.scaleLinear() .domain(d3.extent(legendValues)) .range([0, width]); const svg = wrapper.append("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom) .attr("font-family", franklinLight) .style("margin", "0 auto") .style("display", "table") .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(0, ${margin.top})`) const epsilon = 1e-6; const rect = g.selectAll(".rect") .data(legendValues) .join("rect") .attr("class", "rect") .attr("transform", d => `translate(${scaleBand(d)})`) .attr("fill", d => d > 0 ? colorScale(d - epsilon) : colorScale(d + epsilon)) .attr("height", height) .attr("x", -0.5) .attr("width", (_, i, e) => scaleBand.bandwidth() + (i < e.length - 1 ? 1 : 0)); // add some overlap const tick = g.selectAll(".tick") .data(legendData) .join("g") .attr("transform", d => `translate(${scaleLinear(d.position)})`); tick.append("line") .attr("y1", d => 0) .attr("y2", d => height + 4) .attr("stroke", "#2a2a2a"); tick.append("text") .attr("font-size", 14) .attr("text-anchor", "middle") .attr("y", d => height + 17) .text(d => d.label); return wrapper.node(); }32:Tad6,map = function*() { const wrapper = d3.create("div") .style("width", `${w}px`) .style("height", `${h}px`) .style("position", "relative"); wrapper.append("style").html(css); const canvas = wrapper.append("canvas") .style("position", "absolute"); canvas.node().width = w; canvas.node().height = h; const context = canvas.node().getContext("2d"); path.context(context); for (let i = 0, l = X.length * Y.length; i < l; i++) { const lon = X[i % X.length]; const lat = Y[i / X.length | 0]; let w = Math.max(-180, lon - cell_res); let e = Math.min(180, lon + cell_res); let n = Math.min(90, lat + cell_res); let s = Math.max(-90, lat - cell_res); if (n > 0 && s < 0) { if (lon > 0) s = 0; if (lon < 0) n = 0; } context.beginPath(); path(feature(n, e, w, s)); const c = colorScale(values[season.toLowerCase()][i] * 10); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); if (i % 1e4 === 0) yield wrapper.node(); } context.fillStyle = "none"; context.beginPath(); path(countriesGeoInner); context.strokeStyle = "#494949"; context.stroke(); context.beginPath(); path(countriesGeoOuter); context.strokeStyle = "#2a2a2a"; context.stroke(); const svg = wrapper.append("svg") .style("overflow", "visible") .style("position", "absolute") .attr("width", w) .attr("height", h); // Mask hack const center = [w / 2, h / 2]; svg.selectAll("polygon") .data([0, 1]) .join("polygon") .attr("fill", "white") .attr("points", d => [ ...swoopy.arc([w / 2, 0], center, 1 - 2 * d), ...swoopy.arc(center, [w / 2, h], 1 - 2 * d), [d * w, h], [d * w, 0] ]); svg.selectAll(".sphere") .data([0, 1]) .join("circle") .attr("class", "sphere") .attr("cx", w / 2) .attr("cy", d => h / 4 + (h / 2) * d) .attr("fill", "none") .attr("r", w / 2) .attr("stroke", "#494949"); const citiesG = svg.selectAll(".city") .data(cities) .join("g") .attr("class", d => `city ${d.pos}`) .attr("transform", d => `translate(${projection([d.lon, d.lat])})`); citiesG.append("circle") .attr("class", "bg bg-0") .attr("r", 3); citiesG.append("circle") .attr("class", "bg bg-1") .attr("r", 3); citiesG.append("circle") .attr("class", "fg") .attr("r", 3); citiesG.append("text") .attr("class", "bg bg-0") .text(d => d.name); citiesG.append("text") .attr("class", "bg bg-1") .text(d => d.name); citiesG.append("text") .attr("class", "fg") .text(d => d.name); yield wrapper.node(); }33:T408,cities = [ { "name": "Cairo", "lon": 31.236526, "lat": 30.043171, "pos": "sw" }, { "name": "Delhi", "lon": 77.232684, "lat": 28.648466, "pos": "se" }, { "name": "Johannesburg", "lon": 28.033843, "lat": -26.210499, "pos": "sw" }, { "name": "London", "lon": -0.125125, "lat": 51.506809, "pos": "nw" }, { "name": "Los Angeles", "lon": -118.4068, "lat": 34.1141, "pos": "ne" }, { "name": "Moscow", "lon": 37.618492, "lat": 55.751091, "pos": "ne" }, { "name": "São Paulo", "lon": -46.641614, "lat": -23.559922, "pos": "se" }, { "name": "Shanghai", "lon": 121.475418, "lat": 31.219231, "pos": "ne" }, { "name": "Sydney", "lon": 151.207691, "lat": -33.865304, "pos": "se" }, { "name": "Tokyo", "lon": 139.761857, "lat": 35.676985, "pos": "ne" }, { "name": "D.C.", "lon": -77.0163, "lat": 38.9047, "pos": "sw" } ]34:[{"id":"c4fd3c584cd7c4e78d7bdc3cd33fd1f3c21573ea1bd8a2d3692e656f45ee85dde2cceddc99be9cd794ece29b995c81ea35423a461c6a08b977c1cd255c4efa47","href":"https://static.observableusercontent.com/files/c4fd3c584cd7c4e78d7bdc3cd33fd1f3c21573ea1bd8a2d3692e656f45ee85dde2cceddc99be9cd794ece29b995c81ea35423a461c6a08b977c1cd255c4efa47","name":"seasonal_slopes_1944_2023_v3.nc","type":"application/octet-stream","lastModified":1723042349202.768,"size":8314812},{"id":"8598ae6a7a219b65ea34478e7edf15707b654b12ddccf2d1dd7ce543760467e0438961d33551abe1488f071eab1547b05d010120949f50dd8f3f264d644fc197","href":"https://static.observableusercontent.com/files/8598ae6a7a219b65ea34478e7edf15707b654b12ddccf2d1dd7ce543760467e0438961d33551abe1488f071eab1547b05d010120949f50dd8f3f264d644fc197","name":"topo_110m.topo.json","type":"application/json","lastModified":1723065691323.553,"size":569013}] 2f:{"title":"Map: Temperature change in summer and winter, 1944-2023","cells":[{"id":0,"value":"# Map: Temperature change in summer and winter, 1944-2023","pinned":false,"hidden":false,"mode":"md"},{"id":1168,"value":"A version of this map appeared in [“Summer or winter: Which season is warming faster in your town?”](https://www.washingtonpost.com/climate-environment/interactive/2024/summer-winter-seasonal-warming-global-trends/), published in The Washington Post on Aug. 8, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":492,"value":"viewof season = Inputs.radio([\"Summer\", \"Winter\"], { value: \"Summer\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"To calculate seasonal temperature trends, I used [ERA5 gridded monthly temperature data](https://cds.climate.copernicus.eu/cdsapp#!/dataset/10.24381/cds.f17050d7?tab=overview) from the Copernicus Climate Change Service. The dataset included monthly temperatures on a 0.25°x0.25° grid from January 1940 through June 2024. I wanted to analyze the maximum round number of decades, so I filtered the time series from January 1944 through December 2023, resulting in 80 full years of data.\n\nIn the Northern Hemisphere, I defined summer as June through August, and winter as December through February, including December of the previous year. In the Southern Hemisphere, I swapped those seasons.","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"legendValues = [...coldValues.slice().reverse(), ...heatValues]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"legendData = d3\n .range(-1, 2, 0.5)\n .map((value, i, e) => ({\n type: \"f\",\n position: value,\n label: legendLabel(value, i, e, \"°F\")\n }));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"legendLabel = (value, i, e, unit) => {\n return `${(value < 0 ? \"-\" : value > 0 ? \"+\" : \"\")}${Math.abs(value)}${[0, e.length - 1].includes(i) ? unit : \"\"}`\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1177,"value":"feature = (n, e, w, s) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n // wn, en, es, ws, wn\n coordinates: [\n [[w, n], [e, n], [e, s], [w, s], [w, n]]\n ]\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"css = `\n.city circle.bg {\n fill: none;\n stroke: white;\n}\n.city circle.bg-0 {\n stroke-width: 6px;\n stroke-opacity: 0.2;\n}\n.city circle.bg-1 {\n stroke-width: 3px;\n stroke-opacity: 0.5;\n} \n.city circle.fg {\n fill: none;\n stroke: black;\n}\n\n.city.ne text {\n transform: translate(4px, -4px);\n}\n.city.se text {\n transform: translate(4px, 13px);\n}\n.city.e text {\n transform: translate(6px, 4.5px);\n}\n.city.nw text {\n text-anchor: end;\n transform: translate(-4px, -4px);\n}\n.city.sw text {\n text-anchor: end;\n transform: translate(-4px, 13px);\n}\n.city.w text {\n text-anchor: end;\n transform: translate(-6px, 4.5px);\n}\n\n.city text {\n font-size: 14px;\n font-family: ${franklinLight};\n fill: black;\n}\n\n.city text.bg {\n fill: white;\n stroke: white;\n}\n\n.city text.bg-0 {\n stroke-width: 4px;\n stroke-opacity: 0.2;\n}\n\n.city text.bg-1 {\n stroke-width: 2px;\n stroke-opacity: 0.5;\n} \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"colorScale = value => {\n if (value < 0) {\n let index = -1;\n\n for (let i = 0, l = coldValues.length; i < l; i++) {\n const v = coldValues[i];\n if (value > v) {\n index = i;\n break;\n }\n }\n \n return index === -1 ? coldColors[coldColors.length - 1] : coldColors[index];\n }\n else {\n let index = -1;\n \n for (let i = 0, l = heatValues.length; i < l; i++){\n const v = heatValues[i];\n if (value < v) {\n index = i;\n break;\n }\n }\n \n return index === -1 ? heatColors[heatColors.length - 1] : heatColors[index]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"heatValues = [0.083, 0.167, 0.25, 0.333, 0.417, 0.5, 0.583, 0.667, 0.75, 0.833, 0.917, 1, 1.083, 1.167, 1.25, 1.333, 1.417, 1.5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"heatColors = [\n \"#f8f4e2\", \"#f9e9ce\", \"#fadfbb\", \"#fad5a7\", \"#f9ca94\", \"#f7c081\", // 1\n \"#fd9c63\", \"#f69259\", \"#ee8850\", \"#e77d47\", \"#df733e\", \"#d76935\", // 2\n \"#cc0000\", \"#bf0018\", \"#b20124\", \"#a5042b\", \"#980730\", \"#8b0a34\" // 3\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"coldValues = [-0.083, -0.167, -0.25, -0.333, -0.417, -0.5, -0.583, -0.667, -0.75, -0.833, -0.917, -1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"coldColors = [\n \"#eff4e9\", \"#e0ede6\", \"#d2e5e1\", \"#c4deda\", \"#b6d7d2\", \"#a9d0ca\", // -1\n \"#9fc4d7\", \"#95bed3\", \"#8cb7ce\", \"#82b1ca\", \"#78aac6\", \"#6ea4c1\" // -2\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## Geo","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"// See https://observablehq.com/@d3/azimuthal-equidistant-hemispheres\nprojection = d3.geoInterrupt(\n d3.geoAzimuthalEquidistantRaw,\n [[ // northern hemisphere\n [[-180, 0], [ -90, 90], [ 0, 0]],\n [[ 0, 0], [ 90, 90], [ 180, 0]]\n ], [ // southern hemisphere\n [[-180, 0], [ -90, -90], [ 0, 0]],\n [[ 0, 0], [ 90, -90], [ 180, 0]]\n ]]\n)\n.rotate([-20, 0, 90])\n.angle(-90)\n.fitSize([w, h], { type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"topo = FileAttachment(\"topo_110m.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"countriesGeoInner = topojson.mesh(topo, topo.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"countriesGeoOuter = topojson.mesh(topo, topo.objects.countries, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"file = FileAttachment(\"seasonal_slopes_1944_2023_v3.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"startYear = 1944","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"endYear = 2023","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"nc = file\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"winter = nc.getDataVariable(\"winter_slope\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"summer = nc.getDataVariable(\"summer_slope\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"values = ({ winter, summer })","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"X = nc.getDataVariable(\"longitude\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"Y = nc.getDataVariable(\"latitude\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"cell_res = d3.median(d3.pairs(X), ([a, b]) => Math.abs(a - b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"h = w * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"w = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"netcdf = import(\"https://cdn.skypack.dev/netcdfjs@2.0.2?min\").then(d => d.NetCDFReader)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1105,"value":"swoopy = require(\"swoopy@0.0.17\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}