31:Td14,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); context.save(); context.beginPath(); path(geoStatesOuter); context.clip(); context.beginPath(); path(geoStatesOuter); context.fillStyle = color(color.domain()[0]) context.fill(); for (let i = 0, l = contours.length; i < l; i++) { const d = contours[i]; context.beginPath(); path(d); const c = color(d.value); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); if (i % 1e4 === 0) yield wrapper.node(); } for (let i = 0, l = mask.length; i < l; i++) { const d = mask[i]; context.beginPath(); path(d); const c = "white"; context.fillStyle = c; context.fill(); } for (let i = 0, l = alaskaGrid.features.length; i < l; i++) { const d = alaskaGrid.features[i]; context.beginPath(); path(d); const c = color(d.properties.sf_change); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); if (i % 1e4 === 0) yield wrapper.node(); } context.restore(); context.fillStyle = "none"; context.lineWidth = 1; context.beginPath(); path(geoStatesInner); context.strokeStyle = "#494949"; context.stroke(); context.beginPath(); path(geoStatesOuter); context.strokeStyle = "#2a2a2a"; context.stroke(); const svg = wrapper.append("svg") .style("pointer-events", "none") .style("position", "absolute") .attr("width", w) .attr("height", h); const city = svg.selectAll(".city") .data(cityLabels) .join("g") .attr("class", d => `city ${d.pos}`) .attr("transform", d => `translate(${projection([d.lon, d.lat])})`); city.append("circle") .attr("class", "bg bg-0") .attr("r", 3); city.append("circle") .attr("class", "bg bg-1") .attr("r", 3); city.append("circle") .attr("class", "fg") .attr("r", 3); city.append("text") .text(d => d.name); const state = svg.append("g") .attr("class", "states") .selectAll(".state") .data(stateLabels) .join("g") .attr("class", d => `state`) .attr("transform", d => `translate(${projection(d.coordinates(w))})`) .style("display", d => d.hide && d.hide(w) ? "none" : "block") state .filter(d => d.leader) .append("polyline") .attr("points", d => d.leader(w)) state.append("text") .style("text-anchor", d => d.leader && d.leader(w) ? d.leaderAnchor(w) : "middle") .attr("dx", d => d.leader && d.leader(w) ? d.leaderDx(w) : 0) .attr("dy", d => d.leader && d.leader(w) ? d.leaderDy(w) : 4) .attr("transform", d => { if (!d.leader) return; const points = d.leader(w); if (points) { return `translate(${points[points.length - 1]})` } else { return; } }) .text(d => w <= 480 ? d.state_postal : d.state_post); yield wrapper.node(); }32:T735,css = ` .city circle.bg { fill: none; stroke: white; } .city circle.bg-0 { stroke-width: 6px; stroke-opacity: 0.2; } .city circle.bg-1 { stroke-width: 3px; stroke-opacity: 0.5; } .city circle.fg { fill: none; stroke: black; } .city.ne text { transform: translate(4px, -4px); @media only screen and (max-width: 480px) { transform: translate(3px, -3px); } } .city.se text { transform: translate(4px, 13px); @media only screen and (max-width: 480px) { transform: translate(3px, 11px); } } .city.e text { transform: translate(6px, 4.5px); @media only screen and (max-width: 480px) { transform: translate(5px, 3.5px); } } .city.nw text { text-anchor: end; transform: translate(-4px, -4px); @media only screen and (max-width: 480px) { transform: translate(-3px, -3px); } } .city.sw text { text-anchor: end; transform: translate(-4px, 13px); @media only screen and (max-width: 480px) { transform: translate(-3px, 11px); } } .city.w text { text-anchor: end; transform: translate(-6px, 4.5px); @media only screen and (max-width: 480px) { transform: translate(-5px, 3.5px); } } .city text { fill: #2a2a2a; font-family: ${franklinLight}; font-size: 14px; paint-order: stroke fill; stroke: #fff; stroke-linejoin: round; stroke-opacity: 0.5; stroke-width: 2px; @media only screen and (max-width: 480px) { font-size: 12px; } } .state { polyline { fill: none; stroke: #2a2a2a; shape-rendering: crispEdges; } text { fill: #2a2a2a; font-family: ${franklinLight}; font-size: 12px; paint-order: stroke fill; stroke: #fff; stroke-linejoin: round; stroke-opacity: 0.3; stroke-width: 2px; text-anchor: middle; @media only screen and (max-width: 480px) { font-size: 11px; } } } `33:T558,cityLabels = [ { "name": "Anchorage", "lon": -149.898654, "lat": 61.215276, "pos": "nw" }, { "name": "Atlanta", "lon": -84.422, "lat": 33.7628, "pos": "ne" }, { "name": "Chicago", "lon": -87.6866, "lat": 41.8375, "pos": "sw" }, { "name": "Dallas", "lon": -96.7667, "lat": 32.7935, "pos": "ne" }, { "name": "Denver", "lon": -104.8758, "lat": 39.762, "pos": "ne" }, { "name": "Houston", "lon": -95.3885, "lat": 29.786, "pos": "ne" }, { "name": "Los Angeles", "lon": -118.4068, "lat": 34.1141, "pos": "ne" }, { "name": "Miami", "lon": -80.2101, "lat": 25.784, "pos": "nw" }, { "name": "Minneapolis", "lon": -93.2678, "lat": 44.9635, "pos": "ne" }, { "name": "New York", "lon": -73.9249, "lat": 40.6943, "pos": "nw" }, { "name": "Phoenix", "lon": -112.0892, "lat": 33.5722, "pos": "se" }, { "name": "San Francisco", "lon": -122.4449, "lat": 37.7558, "pos": "ne" }, { "name": "Seattle", "lon": -122.3244, "lat": 47.6211, "pos": "ne" }, { "name": "St. Louis", "lon": -90.2451, "lat": 38.6359, "pos": "ne" }, { "name": "D.C.", "lon": -77.0163, "lat": 38.9047, "pos": "sw" } ]34:T14d2,stateLabels = [ {"state_post":"Ala.","state_postal":"AL","coordinates": ww => [-86.828,32.79]}, {"state_post":"Ark.","state_postal":"AR","coordinates": ww => [-92.444,34.903]}, {"state_post":"Ariz.","state_postal":"AZ","coordinates": ww => [-111.661,34.292]}, {"state_post":"Calif.","state_postal":"CA","coordinates": ww => [-120.561302, 37.223069]}, {"state_post":"Colo.","state_postal":"CO","coordinates": ww => [-105.543,39]}, {"state_post":"Fla.","state_postal":"FL","coordinates": ww => [-81.381,27.693]}, {"state_post":"Ga.","state_postal":"GA","coordinates": ww => [-83.456,32.656]}, {"state_post":"Idaho","state_postal":"ID","coordinates": ww => [-114.5,43.5]}, {"state_post":"Ill.","state_postal":"IL","coordinates": ww => [-89.204,40.068]}, {"state_post":"Ind.","state_postal":"IN","coordinates": ww => [-86.279,39.907]}, {"state_post":"Iowa","state_postal":"IA","coordinates": ww => [-93.498,42.078]}, {"state_post":"Kan.","state_postal":"KS","coordinates": ww => [-98.331,38.5]}, {"state_post":"Ky.","state_postal":"KY","coordinates": ww => [-85.288,37.53]}, {"state_post":"La.","state_postal":"LA","coordinates": ww => [-92.511,31.482]}, {"state_post":"Maine","state_postal":"ME","coordinates": ww => [-69.1,45.2]}, {"state_post":"Mass.","state_postal":"MA","coordinates": ww => [-71.835,42.3]}, {"state_post":"Minn.","state_postal":"MN","coordinates": ww => [-94.661,46.802]}, {"state_post":"Miss.","state_postal":"MS","coordinates": ww => [-89.671,32.762]}, {"state_post":"Mo.","state_postal":"MO","coordinates": ww => [-92.446,38.303]}, {"state_post":"Mont.","state_postal":"MT","coordinates": ww => [-109.638,47.032]}, {"state_post":"Mich.","state_postal":"MI","coordinates": ww => [-84.8,43.1]}, {"state_post":"Neb.","state_postal":"NE","coordinates": ww => [-99.685,41.5]}, {"state_post":"Nev.","state_postal":"NV","coordinates": ww => [-116.652,40]}, {"state_post":"N.H.","state_postal":"NH","coordinates": ww => [-71.578,43.2]}, {"state_post":"N.M.","state_postal":"NM","coordinates": ww => [-106.11,34.422]}, {"state_post":"N.Y.","state_postal":"NY","coordinates": ww => [-75.031,42.9]}, {"state_post":"N.C.","state_postal":"NC","coordinates": ww => [-79.409,35.548]}, {"state_post":"N.D.","state_postal":"ND","coordinates": ww => [-100.302,47.467]}, {"state_post":"Ohio","state_postal":"OH","coordinates": ww => [-83.034,40.195]}, {"state_post":"Okla.","state_postal":"OK","coordinates": ww => [-97.511,35.588]}, {"state_post":"Ore.","state_postal":"OR","coordinates": ww => [-120.547,43.94]}, {"state_post":"Pa.","state_postal":"PA","coordinates": ww => [-77.801,40.875]}, {"state_post":"S.C.","state_postal":"SC","coordinates": ww => [-80.9,33.918]}, {"state_post":"S.D.","state_postal":"SD","coordinates": ww => [-100.234,44.439]}, {"state_post":"Tenn.","state_postal":"TN","coordinates": ww => [-86.342,35.847]}, {"state_post":"Tex.","state_postal":"TX","coordinates": ww => [-99.359,31.506]}, {"state_post":"Utah","state_postal":"UT","coordinates": ww => [-110.92,38.874]}, {"state_post":"Vt.","state_postal":"VT","coordinates": ww => [-72.665,44.5]}, {"state_post":"Va.","state_postal":"VA","coordinates": ww => [-78.891,37.517]}, {"state_post":"Wash.","state_postal":"WA","coordinates": ww => [-120.421,47.375]}, {"state_post":"W.Va.","state_postal":"WV","coordinates": ww => [-80.611,38.647]}, {"state_post":"Wis.","state_postal":"WI","coordinates": ww => [-90.027,44.638]}, {"state_post":"Wyo.","state_postal":"WY","coordinates": ww => [-107.552,43]}, { "state_post":"R.I.","state_postal":"RI","coordinates": ww => [-71.595,41.695], "leader": ww => { const x = ww <= 550 ? 15 : ww <= 768 ? 20 : 10; const y = ww <= 360 ? 7 : ww <= 400 ? 10 : ww <= 450 ? 13 : ww <= 550 ? 18 : ww <= 768 ? 25 : ww <= 1e3 ? 13 : 18; return [[0,0],[0,y],[x,y]]; }, "leaderAnchor": ww => "start", "leaderDx": ww => 2, "leaderDy": ww => 4 }, { "state_post":"Conn.","state_postal":"CT","coordinates": ww => [-72.6,41.65], "leader": ww => { if (ww <= 550) { const y = ww <= 360 ? 15 : ww <= 450 ? 20 : ww <= 500 ? 25 : 30; return [[0,0],[0,y],[10,y]] } if (ww <= 768) { return undefined; } const y = ww <= 800 ? 22.5 : ww <= 1e3 ? 25 : 30; return [[0,0],[0,y],[5,y]] }, "leaderAnchor": ww => "start", "leaderDx": ww => 2, "leaderDy": ww => 4 }, { "state_post":"N.J.","state_postal":"NJ","coordinates": ww => [-74.733,40], "leader": ww => [[0,0],[ww <= 400 ? 15 : ww <= 550 ? 20 : ww <= 768 ? 30 : 20,0]], "leaderAnchor": ww => "start", "leaderDx": ww => 2, "leaderDy": ww => 4 }, { "state_post":"Md.","state_postal":"MD","coordinates": ww => [-77.05,39.4], "leader": ww => { return undefined }, "leaderAnchor": ww => "start", "leaderDx": ww => 2, "leaderDy": ww => 4 }, { "state_post":"Del.","state_postal":"DE","coordinates": ww => [-75.416,38.826], "leader": ww => { return [[0,0],[ww <= 550 ? 15 : ww <= 768 ? 25 : 15,0]] }, "leaderAnchor": ww => "start", "leaderDx": ww => 2, "leaderDy": ww => 4 }, { "state_post":"Alaska","state_postal":"AK","coordinates": ww => [-151.272085, 64.992153], } ]35:T422,// Use a grid for Alaska because the contours don't work there alaskaGrid = ({ type: "FeatureCollection", features: data .map(properties => { const { longitude, latitude } = properties; const w = Math.max(-180, longitude - cell_res / 2); const e = Math.min(180, longitude + cell_res / 2); const n = Math.min(90, latitude + cell_res / 2); const s = Math.max(-90, latitude - cell_res / 2); return { type: "Feature", properties, geometry: { type: "Polygon", // wn, en, es, ws, wn coordinates: [ [[w, n], [e, n], [e, s], [w, s], [w, n]] ] } } }) // Filter out Alaska only .filter(({properties}) => { const { longitude, latitude } = properties; if (latitude < 50) return false; const p = projection([longitude, latitude]); if (p) { const [ x, y ] = p; return (x < w * 0.25 && y > h * 0.75) } else { return false; } }) })36:[{"id":"d92915fbe30c4efdfc64418c05665d341c1ce094db8001b5c918fefe222e7ebc74bcedc588675516a5973abc378b865177137e9216598a2c6097c16f4133ec77","href":"https://static.observableusercontent.com/files/d92915fbe30c4efdfc64418c05665d341c1ce094db8001b5c918fefe222e7ebc74bcedc588675516a5973abc378b865177137e9216598a2c6097c16f4133ec77","name":"conus-alaska.topo.json","type":"application/json","lastModified":1730226261481.544,"size":88222},{"id":"ac1e56601dd6a77a1344b954e79a47932f453d8b726fba82c1796ede5b0ee5ab27df511b70757ee98149489dbb42d17e9d41cbfecb6bb09bc5b68af5ee4bcdf9","href":"https://static.observableusercontent.com/files/ac1e56601dd6a77a1344b954e79a47932f453d8b726fba82c1796ede5b0ee5ab27df511b70757ee98149489dbb42d17e9d41cbfecb6bb09bc5b68af5ee4bcdf9","name":"sf_trend.csv.zip","type":"application/zip","lastModified":1731441428059.345,"size":23867346},{"id":"6c59bd8cba993e22e58d55161de315c77c2e1120f9fb113caf51a1e0612b9c186a9238b4e3854a7f7e88441d000c7527b9083370b7bf965d5fcd354aa939b012","href":"https://static.observableusercontent.com/files/6c59bd8cba993e22e58d55161de315c77c2e1120f9fb113caf51a1e0612b9c186a9238b4e3854a7f7e88441d000c7527b9083370b7bf965d5fcd354aa939b012","name":"sf_trend-masked.csv.zip","type":"application/zip","lastModified":1731442838526.917,"size":21290480}] 2f:{"title":"Change in annual snowfall in the United States","cells":[{"id":0,"value":"# Change in annual snowfall in the United States","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"This notebook contains the code to make a version of the map of snowfall trends seen in [“The U.S. is getting less snowy. See this winter’s forecast in your area.”](https://www.washingtonpost.com/climate-environment/interactive/2024/snow-forecast-trends-climate-change/), published in The Washington Post on November 13, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"

Note: Hawaii and unshaded areas omitted because they experience less than three inches of annual snowfall. State averages do not include areas with insufficient snowfall data.

","pinned":false,"hidden":false,"mode":"html"},{"id":896,"value":"Historical snowfall data was downloaded from [the Copernicus Climate Data Store](https://cds.climate.copernicus.eu/datasets/reanalysis-era5-single-levels-monthly-means?tab=download). Annual snowfall averages for the two most recent 30-year periods were computed (1993-2024 and 1964-1993), as was the percentage change between the two periods. A conversion from meters to inches was applied, as was a filter to exclude areas that average less than 3 inches of snow per year. Snowfall averages may not be exactly indicative of a single location, given the relative coarseness of this atmospheric reanalysis product, but should be a reasonable areal estimate.","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":622,"value":"legend = () => LegendDivergingThreshold(color, {\n width: 280,\n height: 8,\n arrowPadding: 1/4,\n arrowWidth: 48,\n arrowRight: false,\n fontFamily: franklinLight,\n title: \"Change in annual snowfall\",\n tickSize: 4,\n tickFormat: (d, i, e) => `${d < 0 ? \"-\" : d > 0 ? \"+\" : \"\"}${Math.abs(d)}${[0, e.length - 1].includes(i) ? \"%\" : \"\"}`,\n unit: \"1964-1993 vs. 1994-2023\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"schemeSnow = [\"#543005\", \"#a3661a\", \"#dbb871\", \"#f6ecd2\", \"#ddebf9\", \"#7e9fd4\", \"#3973bb\", \"#0a3258\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"color = d3.scaleThreshold([-30, -20, -10, 0, 10, 20], schemeSnow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## Geo","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"projection = d3.geoAlbersUsa()\n .fitSize([w, h], geoStatesOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"geoStatesInner = topojson.mesh(topo, topo.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"geoStatesOuter = topojson.mesh(topo, topo.objects.states, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"topo = FileAttachment(\"conus-alaska.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":747,"value":"zip = FileAttachment(\"sf_trend.csv.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"data = zip.file(zip.filenames[0]).csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"contours = d3.geoContour().thresholds(10)(points)","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"points = JSON.parse(JSON.stringify(data)).map(d => [d.longitude, d.latitude, Math.max(-50, Math.min(d.sf_change, 50))])","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"zipMask = FileAttachment(\"sf_trend-masked.csv.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"dataMask = zipMask.file(zipMask.filenames[0]).csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"pointsMask = dataMask.map(d => [+d.longitude, +d.latitude, d.sf_change === -9999 ? 1 : 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"mask = d3.geoContour().thresholds(1)(pointsMask)","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"cell_res = 1 / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"h = w * 0.61","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":619,"value":"import { LegendDivergingThreshold } from \"@climatelab/diverging-threshold-legend@86\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"d3 = require(\"d3@7\", \"d3-geo-voronoi@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}