31:Tad4,legend = () => { const wrapper = d3.create("div"); wrapper.append("div") .style("font-family", franklinLight) .style("line-height", "22px") .style("margin-bottom", "4px") .style("text-align", "center") .html("Change in expected arrival
of leaves, 1981-2023"); const margin = { top: 1, bottom: 32, right: 0 }; const width = 250; const height = 16; const scale = d3.scaleBand() .domain(legendValues) .range([0, width]); const svg = wrapper.append("svg") .attr("width", width + margin.right) .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 tick = g.selectAll(".tick") .data(legendValues) .join("g") .attr("class", "tick") .attr("transform", d => `translate(${scale(d)})`); const epsilon = 1e-6; tick.append("rect") .attr("fill", d => { const v = d > 0 ? d - epsilon : d + epsilon; return colorScale(v) }) .attr("height", height) .attr("x", -0.5) .attr("width", (_, i, e) => scale.bandwidth() + (i < e.length - 1 ? 1 : 0)); // add some overlap const tickValues = [...d3.range(-28, 0, 7), -1, ...d3.range(0, 21, 7)] tick.append("line") .filter(d => tickValues.includes(d)) .attr("stroke", "black") .attr("transform", d => `translate(${-0.5 + (d >= valuesEarlier[0] ? scale.bandwidth() : 0)})`) .attr("y1", height) .attr("y2", height + 4); tick.append("text") .filter(d => tickValues.includes(d)) .attr("font-size", 14) .attr("text-anchor", "middle") .attr("transform", d => `translate(${-0.5 + (d >= valuesEarlier[0] ? scale.bandwidth() : 0)})`) .attr("y", height + 17) .html((d, i, e) => d === valuesEarlier[0] ? "0" : `${Math.abs(d)}`); const adverb = g.selectAll(".adverb") .data(["days earlier", "days later"]) .join("text") .attr("class", "adverb") .attr("font-size", 14) .attr("text-anchor", "middle") .attr("x", (_, i) => i * width) .attr("y", height + 30) .text(d => d) const noTrend = svg.append("g") .attr("transform", `translate(${[width + 24, margin.top]})`); noTrend.append("rect") .attr("height", height) .attr("width", scale.bandwidth()) .attr("fill", "none") .attr("shape-rendering", "crispEdges") .attr("stroke", "#000"); noTrend.append("text") .attr("font-size", 14) .attr("x", scale.bandwidth() + 4) .attr("y", height / 2 + 4) .text("No trend") return wrapper.node(); }32:T6bd,map = () => { 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); // Clipping will take a long time if (clip) { context.save(); context.beginPath(); path(usGeoOuter); context.clip(); } data .forEach((d, i) => { context.beginPath(); path(square(d)); const c = colorScale(d.trend); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); }); if (clip) { context.restore(); } context.fillStyle = "none"; context.beginPath(); path(usGeoInner); context.strokeStyle = "#e9e9e9" context.stroke(); context.beginPath(); path(usGeoOuter); context.strokeStyle = "#d5d5d5" context.stroke(); const svg = wrapper.append("svg") .style("position", "absolute") .attr("width", w) .attr("height", h); const citiesG = svg.selectAll(".city") .data(cities) .join("g") .attr("class", d => `city ${d.pos} ${toSlugCase(d.name)}`) .attr("transform", d => `translate(${projection([d.lon, d.lat])})`); citiesG.append("circle") .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); return wrapper.node(); }33:T622,css = ` .city circle { fill: none; stroke: black; } .city.ne text { transform: translate(4px, -4px); } .city.se text { transform: translate(4px, 13px); } .city.e text { transform: translate(6px, 4.5px); } .city.boston { display: ${w <= 480 ? "none" : "block"}; } .city.boston text { text-anchor: ${w <= 900 ? "end" : "start"}; transform: translate(${w <= 900 ? "-4px" : "4px"}, -4px); } .city.chicago text { text-anchor: ${w <= 620 ? "end" : "start"}; transform: translate(${w <= 620 ? "-4px" : "4px"}, -4px); } .city.minneapolis { display: ${w <= 480 ? "none" : "block"}; } .city.new-york text { text-anchor: ${w <= 660 ? "end" : "start"}; transform: translate(${w <= 600 ? "-4px" : "4px"}, -4px); } .city.philadelphia { display: ${w <= 480 ? "none" : "block"}; } .city.philadelphia text { text-anchor: ${w <= 768 ? "end" : "start"}; transform: translate(${w <= 768 ? "-6px" : "6px"}, 4.5px); } .city.seattle text { transform: translate(4px, ${w <= 400 ? "13px" : "-4px"}); } .city.st-louis { display: ${w <= 480 ? "none" : "block"}; } .city.washington-dc text { text-anchor: ${w <= 400 ? "end" : w <= 768 ? "middle" : "start"}; transform: ${w <= 400 ? "translate(-4px, 13px)" : w <= 768 ? "translate(0px, 16px)" : "translate(4px, 13px)"}; } .city text { font-size: ${w <= 480 ? "13px" : "14px"}; font-family: ${franklinLight}; } .city text.bg { fill: white; stroke: white; } .city text.bg-0 { stroke-width: 4px; stroke-opacity: 0.2; } .city text.bg-1 { stroke-width: 2px; stroke-opacity: 0.5; } `34:[{"id":"e2fe1b9ff7f54cb5f0e1e687a779c8b980fc8081eab7048adbdd8588367d8cf06c00f3973e6e967f3dcddb53feaaf9f9950fefa8f186aadec2dda9953865710d","href":"https://static.observableusercontent.com/files/e2fe1b9ff7f54cb5f0e1e687a779c8b980fc8081eab7048adbdd8588367d8cf06c00f3973e6e967f3dcddb53feaaf9f9950fefa8f186aadec2dda9953865710d","name":"regression_1981-2023@2.csv","type":"text/csv","lastModified":1709929696394.697,"size":45899966},{"id":"5fd835f5ec6bf7adf4d14633809d6f8d0ec9f028627741ea46df80b4fb39d8da826d895e478cb450a122a96daf121588b89ab0a0b49207f12e448696fc5a9d5b","href":"https://static.observableusercontent.com/files/5fd835f5ec6bf7adf4d14633809d6f8d0ec9f028627741ea46df80b4fb39d8da826d895e478cb450a122a96daf121588b89ab0a0b49207f12e448696fc5a9d5b","name":"cities.json","type":"application/json","lastModified":1709677524266.928,"size":1772},{"id":"56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","href":"https://static.observableusercontent.com/files/56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","name":"ne_50m_admin_1_states_provinces_lakes@1.json","type":"application/json","lastModified":1709677524266.928,"size":60898}] 2f:{"title":"Map: Trend in spring leaf appearance, 1981-2023","cells":[{"id":0,"value":"md`# Map: Trend in spring leaf appearance, 1981-2023\n\nThis notebook contains the code to make a basic version of the map seen in [“You’re not crazy. Spring is really coming earlier in much of the U.S.”](https://www.washingtonpost.com/climate-environment/interactive/2024/spring-earlier-arrival-plants-map/), published in The Washington Post on March 13, 2024.\n\nTo make the data shown here, I downloaded each year’s Leaf Index file (Spring Indices, Historical Annual (1981-Previous Year) - First Leaf - Spring Index) from the USA National Phenology Network’s [Geoserver Request Builder](https://www.usanpn.org/data/code/geoserver-request-builder) and calculated the linear regression in each grid cell. Cells with a p-value greater than 0.5 are filtered out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"robotext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"toc({ selector: \"h2\", heading: \"Jump to code:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"md`## Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"legendValues = d3.range(-28, 15).filter(d => d);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1184,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1613,"value":"robotext = () => {\n const f = d3.format(\",\")\n const csvL = csv.length;\n const l = data.length;\n const l0 = data.filter(d => d.slope < 0).length;\n const l1 = data.filter(d => d.slope > 0).length;\n return html`

Of ${f(l)} cells with a trend, ${f(l0)} (${(l0 / l * 100).toFixed(2)}%) are trending earlier. Of all ${f(csvL)} cells, ${(l0 / csvL * 100).toFixed(2)}% are trending earlier, ${(l1 / csvL * 100).toFixed(2)}% are trending later, and ${((csvL - (l0 + l1)) / csvL * 100).toFixed(2)}% show no trend at all.

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1081,"value":"viewof clip = Inputs.toggle({ label: \"Clip (might kill your browser):\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1667,"value":"colorsLater = [\n // l95 - l75\n \"#f6eff6\", \"#f1e3f1\", \"#ecd7ec\", \"#e7cbe7\", \"#e2c0e1\", \"#dcb4dc\", \"#d7a8d7\",\n\n // l71.67 - l51.67\n \"#a2a1ce\", \"#9796c8\", \"#8d8ac2\", \"#827fbd\", \"#7774b7\", \"#6b6ab1\", \"#605fab\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1651,"value":"colorsEarlier = [\n // l95 - l75\n \"#ffffe5\", \"#fcfcd7\", \"#faf9ca\", \"#f6f5bc\", \"#f3f2ae\", \"#f0efa1\", \"#ecec93\",\n\n // l71.67 - l51.67\n \"#c5e085\", \"#beda7c\", \"#b7d473\", \"#b0ce6a\", \"#a9c860\", \"#a2c257\", \"#9bbc4e\",\n\n // l48.33 - l28.33\n \"#68a550\", \"#61994a\", \"#598d44\", \"#52823f\", \"#4b7639\", \"#446b33\", \"#3d602e\",\n\n // l25 - l5\n \"#375629\", \"#2f4a24\", \"#273f1f\", \"#1f341a\", \"#172a15\", \"#101f10\", \"#031607\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1665,"value":"valuesEarlier = d3.range(1, 29).map(d => d * -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1674,"value":"valuesLater = d3.range(1, 15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1032,"value":"colorScale = value => {\n const fl = Math.floor(Math.abs(value));\n \n if (value < 0) {\n return colorsEarlier[fl] || colorsEarlier[colorsEarlier.length - 1];\n }\n else {\n return colorsLater[fl] || colorsLater[colorsLater.length - 1];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"md`# Geo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"projection = d3.geoAlbers()\n .fitSize([w, h], usGeoOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1145,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1135,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":992,"value":"h = w * 0.631","pinned":true,"hidden":false,"mode":"ojs"},{"id":1125,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"startYear = 1981","pinned":true,"hidden":false,"mode":"ojs"},{"id":1633,"value":"endYear = 2023","pinned":true,"hidden":false,"mode":"ojs"},{"id":1814,"value":"csv = FileAttachment(\"regression_1981-2023@2.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1489,"value":"data = csv\n .filter(d => d.p_value < 0.5) // filter out cells that have no trend whatsoever\n .map(d => {\n d.trend = +d.slope * (endYear - startYear);\n return d;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"usTopo = FileAttachment(\"ne_50m_admin_1_states_provinces_lakes@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"usGeoInner = topojson.mesh(usTopo, usTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"usGeoOuter = topojson.mesh(usTopo, usTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1461,"value":"square = geoSquare()\n .center(d => [d.longitude, d.latitude])\n .area(cellsize ** 2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1476,"value":"cellsize = 4; // PRISM is 4km resolution (https://prism.oregonstate.edu/explorer/)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1261,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"function toSlugCase(x) {\n return x.toString().toLowerCase()\n .replace(/\\s+/g, \"-\") // Replace spaces with -\n .replace(/[^\\w\\-]+/g, \"\") // Remove all non-word chars\n .replace(/\\-\\-+/g, \"-\") // Replace multiple - with single -\n .replace(/^-+/, \"\") // Trim - from start of text\n .replace(/-+$/, \"\"); // Trim - from end of text\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"import { toc } from \"@climatelab/toc@44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1471,"value":"import { geoSquare } from \"@climatelab/geosquare@267\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"netcdf = import(\"https://cdn.skypack.dev/netcdfjs@2.0.2?min\").then(d => d.NetCDFReader)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}