31:T723,legend = () => { const wrapper = d3.create("div"); wrapper.append("div") .style("font-family", franklinLight) .style("font-size", "16px") .style("font-weight", "bold") .style("margin-bottom", "-4px") .style("text-align", "center") .text("Winter snowfall forecast"); wrapper.append("div") .style("font-family", franklinLight) .style("font-size", "16px") .style("text-align", "center") .style("margin-bottom", "8px") .text("Compared to 1993-2016 average"); const tickSize = 0; const margin = {left: 0, right: 0, top: 0, bottom: tickSize + 18}; const width = 250 - margin.left - margin.right; const height = 12; const svg = wrapper.append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("display", "table") .style("margin", "0 auto") .style("overflow", "visible"); svg.call(gradient); const values = extent; const scale = d3.scaleLinear(extent, [0, width]); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("rect") .attr("fill", `url(#${gradient.id()})`) .attr("height", height) .attr("width", width); const tick = g.selectAll(".tick") .data(values) .join("g") .attr("class", "tick") .attr("transform", d => `translate(${[scale(d), height]})`); tick.append("line") .attr("stroke", "black") .attr("y2", tickSize); tick.append("text") .attr("dy", tickSize) .attr("font-family", franklinLight) .attr("font-size", 14) .attr("text-anchor", (d, i) => i === 0 ? "start" : "end") .attr("y", 14) .text((d, i) => i === 0 ? "Less than normal" : "More"); return wrapper.node(); }32:Td10,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); // States clip context.save(); context.beginPath(); path(statesOuter); context.clip(); for (let i = 0, l = contours.features.length; i < l; i++) { const d = contours.features[i]; context.beginPath(); path(d); const c = color(d.value); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); yield wrapper.node(); } context.restore(); // Alaska clip context.save(); context.beginPath() const cw = w * 0.25; const ch = h * 0.25; const cp = [ [0, 0], [w, 0], [w, h], [cw, h], [cw, h - ch], [0, h - ch], [0, 0] ] context.moveTo(...cp[0]); for (let i = 1, l = cp.length; i < l; i++) { context.lineTo(...cp[i]); } context.closePath(); context.clip(); for (let i = 0, l = mask.features.length; i < l; i++) { const d = mask.features[i]; context.beginPath(); path(d); const c = "white"; context.fillStyle = c; context.fill(); yield wrapper.node(); } context.restore(); context.fillStyle = "none"; context.lineWidth = 1; context.beginPath(); path(statesInner); context.strokeStyle = "#494949"; context.stroke(); context.beginPath(); path(statesOuter); 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(); }33:T7c1,css = ` .city { circle { &.bg { fill: none; stroke: white; } &.bg-0 { stroke-width: 6px; stroke-opacity: 0.2; } &.bg-1 { stroke-width: 3px; stroke-opacity: 0.5; } &.fg { fill: none; stroke: black; } } 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; } } &.e text { transform: translate(6px, 4.5px); @media only screen and (max-width: 480px) { transform: translate(5px, 3.5px); } } &.ne text { transform: translate(4px, -4px); @media only screen and (max-width: 480px) { transform: translate(3px, -3px); } } &.se text { transform: translate(4px, 13px); @media only screen and (max-width: 480px) { transform: translate(3px, 11px); } } &.w text { text-anchor: end; transform: translate(-6px, 4.5px); @media only screen and (max-width: 480px) { transform: translate(-5px, 3.5px); } } &.nw text { text-anchor: end; transform: translate(-4px, -4px); @media only screen and (max-width: 480px) { transform: translate(-3px, -3px); } } &.sw text { text-anchor: end; transform: translate(-4px, 13px); @media only screen and (max-width: 480px) { transform: translate(-3px, 11px); } } } .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; } } } `34: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" } ]35: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], } ]36:[{"id":"f8e288ac90d27cd5e06bce6627fc4f7b603ab37e1663ba40982f76e5e0250525c7ad2dd0e1b3c2fbf8bc39ecf97b61fad0aa4b0558704ec70706fcdbac16a688","href":"https://static.observableusercontent.com/files/f8e288ac90d27cd5e06bce6627fc4f7b603ab37e1663ba40982f76e5e0250525c7ad2dd0e1b3c2fbf8bc39ecf97b61fad0aa4b0558704ec70706fcdbac16a688","name":"sfara-jet-sst@1.csv","type":"text/csv","lastModified":1731430414005.109,"size":3571306},{"id":"b7f738045fbd6b6a24c5286532d9d5996b6ab0893f9d246079a583eb017a0c61f26322b1592318ddf8dc35314e66ef1d5f884932687d71d09aacd63c9543fe52","href":"https://static.observableusercontent.com/files/b7f738045fbd6b6a24c5286532d9d5996b6ab0893f9d246079a583eb017a0c61f26322b1592318ddf8dc35314e66ef1d5f884932687d71d09aacd63c9543fe52","name":"sfara-masked@1.csv","type":"text/csv","lastModified":1731434222871.511,"size":1693991},{"id":"a40dce731369756663eb371d5d3daf70e46831fc0ee32f4c7f3944bfcdc2c636f6f250887e6b49f74a41ae44ad80184f7e2d8d6b2b135722926b27af8f05ff71","href":"https://static.observableusercontent.com/files/a40dce731369756663eb371d5d3daf70e46831fc0ee32f4c7f3944bfcdc2c636f6f250887e6b49f74a41ae44ad80184f7e2d8d6b2b135722926b27af8f05ff71","name":"conus-alaska.topo.json","type":"application/json","lastModified":1730991522273.365,"size":88161}] 2f:{"title":"Snowfall forecast in the United States","cells":[{"id":0,"value":"# Snowfall forecast in the United States","pinned":false,"hidden":false,"mode":"md"},{"id":1053,"value":"This notebook contains the code to make a version of the map of the snowfall forecast 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":283,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"

Note: Winter includes December, January and February. 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":1085,"value":"The seasonal forecast snowfall data was downloaded from [the Copernicus Climate Data Store](https://cds.climate.copernicus.eu/datasets/seasonal-postprocessed-single-levels?tab=overview). A simple multi-model average from the following contributing members was used in the analysis: ECMWF, U.K. Met Office, Météo-France, DWD, CMCC and ECCC. A three-month average was applied to align with meteorological winter (December 2024 to February 2025). A filter was applied so that only areas that typically receive more than three inches of snow annually are shown.","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":264,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"extent = [-0.1, 0.1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"interpolator = interpolatePalette([\"#543005\", \"#8c510a\", \"#bf812d\", \"#dfc27d\", \"#f6e8c3\", \"#f5f5f5\", \"#d3e7fa\", \"#84a4d7\", \"#5784c5\", \"#1366b3\", \"#0a3258\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"color = d3.scaleDiverging([extent[0], 0, extent[1]], interpolator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"## Gradient","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"interval = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"offsets = d3.range(0, 100 + (100 / interval), 100 / interval)","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"colors = offsets.map(d3.scaleLinear(d3.extent(offsets), extent)).map(color)","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"gradient = gradientLinear()\n .id(\"legend-gradient\")\n .offsets(offsets)\n .colors(colors)","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], statesOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":752,"value":"statesTopo = FileAttachment(\"conus-alaska.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"statesOuter = topojson.mesh(statesTopo, statesTopo.objects.states, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"statesInner = topojson.mesh(statesTopo, statesTopo.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1060,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1011,"value":"maskRaw = FileAttachment(\"sfara-masked@1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1003,"value":"maskPoints = JSON.parse(JSON.stringify(maskRaw))\n .map(d => [d.longitude, d.latitude, d.sfara === -9999 ? 1 : 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1008,"value":"maskContour = d3.geoContour().thresholds(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"mask = ({\n type: \"FeatureCollection\",\n features: maskContour(maskPoints)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"raw = FileAttachment(\"sfara-jet-sst@1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":798,"value":"points = raw\n .filter(f => f.sfara !== -9999)\n .map(d => [d.longitude, d.latitude, d.sfara])","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"contour = d3.geoContour().thresholds(40)","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"contours = ({\n type: \"FeatureCollection\",\n features: contour(points)\n})","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.605","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":266,"value":"import { gradientLinear } from \"@climatelab/gradient@60\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"import { interpolatePalette } from \"@climatelab/roll-your-own-color-palette-interpolator@346\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"d3 = require(\"d3@7\", \"d3-geo-voronoi@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}