31:Tca9,chartSelect = () => { const marginTop = 13; const svg = d3.create("svg") .attr("width", chartwidth + margin.left + margin.right) .attr("height", bandheight + marginTop + margin.bottom); svg.append("style").html(css); const g = svg.append("g") .attr("transform", `translate(${[margin.left, marginTop]})`); g.append("g") .attr("opacity", selected.sf_1964_1993 ? 1 : 0) .call(g => xaxisGenerator(g, bandheight)); const yaxis = g.append("g").attr("class", "axis y-axis"); const yaxisTick = yaxis.append("g").attr("class", "tick") .attr("transform", `translate(0, ${y.bandwidth() / 2})`); yaxisTick.append("line") .attr("opacity", selected.sf_1964_1993 ? 1 : 0) .attr("x2", chartwidth); yaxisTick.append("text") .attr("dy", "0.32em") .attr("x", -margin.left) .html(`${selected.label}${selected.sf_1964_1993 ? "" : " has insufficient snowfall data to calculate a trend."}`); const city = g.selectAll(".city") .data([selected]) .join("g") .attr("class", "city") .attr("opacity", selected.sf_1964_1993 ? 1 : 0) .attr("transform", d => `translate(0, ${y.bandwidth() / 2})`); const cityLine = city.append("line") .attr("x1", d => x(d.sf_1964_1993)) .attr("x2", d => x(d.sf_1994_2023)) .attr("stroke", d => colorScale(d.sf_change)) .attr("stroke-width", 6); const cityCircleStart = city.append("circle") .attr("cx", d => x(d.sf_1964_1993)) .attr("fill", "#fff") .attr("stroke", "#888") .attr("r", r); const cityCircleEnd = city.append("circle") .attr("cx", d => x(d.sf_1994_2023)) .attr("fill", d => colorScale(d.sf_change)) .attr("stroke", d => d3.color(colorScale(d.sf_change)).darker(1)) .attr("r", r); const cityLabelStart = city.append("text") .attr("class", "city-label") .attr("dx", d => (r + 4) * (d.sf_change < 0 ? 1 : -1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.sf_change < 0 ? "start" : "end") .attr("x", d => x(d.sf_1964_1993)) .attr("y", -18) .text("1964-1993"); const cityLabelEnd = city.append("text") .attr("class", "city-label") .attr("dx", d => (r + 4) * (d.sf_change < 0 ? -1 : 1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.sf_change < 0 ? "end" : "start") .attr("x", d => x(d.sf_1994_2023)) .attr("y", -18) .text("1994-2023"); const cityInchesStart = city.append("text") .attr("class", "county-inches county-inches-start") .attr("dx", d => (r + 4) * (d.sf_change < 0 ? 1 : -1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.sf_change < 0 ? "start" : "end") .attr("x", d => x(d.sf_1964_1993)) .text(d => `${Math.round(d.sf_1964_1993)} inches`); const cityInchesEnd = city.append("text") .attr("class", "county-inches county-inches-end") .attr("dx", d => (r + 4) * (d.sf_change < 0 ? -1 : 1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.sf_change < 0 ? "end" : "start") .attr("x", d => x(d.sf_1994_2023)) .text(d => `${Math.round(d.sf_1994_2023)} inches`); return svg.node() }32:T4c5,chart = () => { const svg = d3.create("svg") .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom); svg.append("style").html(css); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("g").call(g => xaxisGenerator(g, chartheight)); g.append("g").call(yaxisGenerator); const city = g.selectAll(".city") .data(chartData) .join("g") .attr("class", "city") .attr("transform", d => `translate(0, ${y(d.label) + y.bandwidth() / 2})`); const cityLine = city.append("line") .attr("x1", d => x(d.sf_1964_1993)) .attr("x2", d => x(d.sf_1994_2023)) .attr("stroke", d => colorScale(d.sf_change)) .attr("stroke-width", 6) const cityCircleStart = city.append("circle") .attr("cx", d => x(d.sf_1964_1993)) .attr("fill", "#fff") .attr("stroke", "#888") .attr("r", r); const cityCircleEnd = city.append("circle") .attr("cx", d => x(d.sf_1994_2023)) .attr("fill", d => colorScale(d.sf_change)) .attr("stroke", d => d3.color(colorScale(d.sf_change)).darker(1)) .attr("r", r); return svg.node() }33:[{"id":"46b0c2fa71d60b4e74c2c56f48f18526069fa7bca6a078839aca1cbb3eafc15a1b06d45a40465326f5b808d497bdbe59249b0e78a897969ecce8e99e0ab94a88","href":"https://static.observableusercontent.com/files/46b0c2fa71d60b4e74c2c56f48f18526069fa7bca6a078839aca1cbb3eafc15a1b06d45a40465326f5b808d497bdbe59249b0e78a897969ecce8e99e0ab94a88","name":"county_snowfall_summary@2.json","type":"application/json","lastModified":1731461936058.452,"size":670528}] 2f:{"title":"U.S. county snowfall trends and forecast","cells":[{"id":0,"value":"# U.S. county snowfall trends and forecast","pinned":false,"hidden":false,"mode":"md"},{"id":980,"value":"This notebook contains the code and data to make a simplified version of the county lookup tool 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":259,"value":"viewof selected = Inputs.select(countyData, { format: d => d.label, label: \"Select a county:\", value: countyData.find(d => d.label.includes(\"D.C.\")) })","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"robotext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"cs = chartSelect()","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"An area-weighted average was used to aggregate the forecast and historical snowfall data to the county level using shape files from [the U.S. Census Bureau](https://www2.census.gov/geo/tiger/TIGER2024/COUNTY/). The census county boundaries were [clipped to the land border](https://observablehq.com/d/695d3fe44140f858) of the United States so that water areas were not considered.","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"toc({ selector: \"h2\", heading: \"Jump to:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":817,"value":"robotext = () => {\n const { label, sfara } = selected;\n\n const sentence = (\n sfara <= -0.060 ? \"much less\" :\n sfara <= -0.030 ? \"less\" : \n sfara <= 0 ? \"slightly less\" :\n sfara > 0.060 ? \"much more\" : \n sfara > 0.030 ? \"more\" :\n \"slightly more\"\n );\n const background = (\n sfara <= -0.060 ? pillColors[1] :\n sfara <= -0.030 ? pillColors[2] : \n sfara <= 0 ? pillColors[3] :\n sfara > 0.060 ? pillColors[6] :\n sfara > 0.025 ? pillColors[5] : \n pillColors[4]\n );\n const color = foreground(background);\n const explanation = sfara\n ? `Snowfall is forecast to be ${sentence} than normal.`\n : `There is not enough annual snowfall to make a forecast.`;\n \n return html`

${explanation}

`;\n };","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":493,"value":"css = `\n.axis .tick line {\n stroke: #ccc;\n}\n.axis .tick text {\n font-family: ${franklinLight};\n font-size: 14px;\n}\n.axis .domain {\n display: none;\n}\n\n.axis.y-axis .tick text {\n font-size: 14px;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 8px;\n text-anchor: start;\n}\n\n.axis.x-axis .tick:first-of-type text {\n text-anchor: start;\n transform: translate(-4px);\n}\n\n.city-label {\n font-family: ${franklinLight};\n font-size: 13px;\n}\n.city-inches, .county-inches {\n font-family: ${franklinLight};\n font-size: 14px;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 8px;\n\n &.city-inches-end, &.county-inches-end {\n font-weight: bold;\n }\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"pillColors = [\"#543005\", \"#a3661a\", \"#dbb871\", \"#f6ecd2\", \"#ddebf9\", \"#7e9fd4\", \"#3973bb\", \"#0a3258\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"colorScale = d3.scaleThreshold([-30, -20, -10, 0, 10, 20], pillColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"## Generators","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"xaxisGenerator = (g, height) => {\n const xMax = x.domain()[1];\n const tickValues = (\n xMax >= 600 ? d3.range(0, xMax, chartwidth <= 400 ? 300 : 200) :\n xMax >= 300 ? d3.range(0, xMax, chartwidth <= 400 ? 150 : 100) :\n xMax >= 150 ? d3.range(0, xMax, chartwidth <= 400 ? 100 : 50) :\n d3.range(0, 150, chartwidth <= 400 ? 60 : 30)\n );\n \n const generator = d3.axisBottom(x)\n .tickFormat((d, i) => `${d}${i ? \"\" : \" inches\"}`)\n .tickSize(height - y.bandwidth() / 2 + 6)\n .tickValues(tickValues);\n\n g.append(\"g\")\n .attr(\"class\", \"axis x-axis\")\n .attr(\"transform\", `translate(0, ${y.bandwidth() / 2})`)\n .call(generator);\n\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"yaxisGenerator = g => {\n const generator = d3.axisLeft(y)\n .tickSize(chartwidth);\n\n g.append(\"g\")\n .attr(\"class\", \"axis y-axis\")\n .attr(\"transform\", `translate(${chartwidth})`)\n .call(generator)\n .selectAll(\"text\")\n .attr(\"x\", -chartwidth - margin.left);\n \n return g;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"xDefault = [0, 120]","pinned":true,"hidden":false,"mode":"ojs"},{"id":889,"value":"xMax = Math.max(selected.sf_1964_1993, selected.sf_1994_2023)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"x = d3.scaleLinear([0, Math.max(xDefault[1], xMax)], [0, chartwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"y = d3.scaleBand(chartData.map(d => d.label), [0, chartheight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"r = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"margin = ({left: 140, right: 20, top: 5, bottom: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"chartwidth = Math.min(width, 640) - margin.left - margin.right ","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"bandheight = 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"chartheight = chartData.length * bandheight","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"countyData = FileAttachment(\"county_snowfall_summary@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"chartData = [\n \"49035\", // Salt Lake County, Utah\n \"25017\", // Middlesex County, Mass.\n \"26163\", // Wayne County, Mich.\n \"27053\", // Hennepin County, Minn.\n \"08031\", // Denver County, Colo.\n \"36061\", // New York County, N.Y.\n \"17031\", // Cook County, Ill. \n \"06037\", // Los Angeles County, Calif.\n]\n.map(county_fips => countyData.find(f => f.county_fips === county_fips))\n.sort((a, b) => d3.descending(a.sf_1994_2023, b.sf_1994_2023))","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"import { foreground } from \"@climatelab/contrasting-foreground-text@166\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"import { toc } from \"@climatelab/toc@44\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}