31:Te1a,chart = () => { const wrapper = d3.create("div") .style("font-family", franklinLight) .style("pointer-events", "none"); wrapper.append("style").html(css); const chart = wrapper.selectAll(".chart") .data(data) .join("div") .attr("class", "div") .style("display", "inline-block") .style("margin-left", (d, i) => width <= breakpoint ? 0 : i == 0 ? 0 : "24px") .style("margin-right", (d, i) => width <= breakpoint ? 0 : i === 0 ? "24px" : 0) .style("margin-bottom", (d, i) => width <= breakpoint && i === 0 ? "24px" : 0) .style("width", `${basewidth}px)`); chart.append("div") .style("margin-bottom", "16px") .text(d => d.type === "leaf" ? "Leaf appearance" : "Temperature, January to May") const svg = chart.append("svg") .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom) .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("rect") .attr("x", -r) .attr("width", chartwidth + (r * 2)) .attr("height", chartheight) .style("pointer-events", "all") .style("fill", "white") .on("mousemove", (ev) => { const year = Math.round(x.invert(ev.offsetX - margin.left)); tipLabel.style("display", d => d.year === year ? "block" : "none"); }) .on("mouseout", () => { tipLabel.style("display", (d, i, e) => i === e.length - 1 ? "block" : "none"); }); g.append("g").call(xAxis); g.append("g") .each((d, i, e) => { d3.select(e[i]).call(g => d.yAxisGenerator(g, "line")); }); g.selectAll("circle") .data(d => d.data) .join("circle") .attr("fill", d => d.type === "leaf" ? colorScale(d.anomaly) : "#fff") .attr("stroke", d => d.type === "leaf" ? d3.color(colorScale(d.anomaly)).darker() : "#767676") .attr("cx", d => x(d.year)) .attr("cy", d => data.find(d0 => d0.type === d.type).y(d.anomaly)) .attr("r", r); g.append("g") .each((d, i, e) => { d3.select(e[i]).call(g => d.yAxisGenerator(g, "text")); }); g.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("d", d => d.line(d.loess)); // Labels const tipLabel = g.selectAll(".tip-label") .data(d => d.data) .join("g") .attr("class", "tip-label") .attr("transform", d => `translate(${[ x(d.year), data.find(d0 => d.type === d0.type).y(d.anomaly) ]})`) .style("display", (d, i, e) => i === e.length - 1 ? "block" : "none"); tipLabel.append("circle") .attr("r", r); tipLabel.append("polyline") .attr("points", [[0, -r], [0, -r - 5]]); const tipLabelText = tipLabel.append("g") .attr("class", "label-text-g") .attr("text-anchor", d => d.year >= 2010 ? "end" : d.year <= 1930 ? "start" : "middle") .attr("transform", d => `translate(${d.year >= 2010 ? 5 : d.year <= 1930 ? -5 : 0}, -28)`) tipLabelText.append("text") .attr("class", "year") .text(d => d.year); tipLabelText.append("text") .attr("y", 14) .text(d => { const abs = Math.round(Math.abs(d.anomaly)); if (d.type === "leaf") { return abs === 0 ? "About average" : `${abs} day${abs === 1 ? "" : "s"} ${d.anomaly < 0 ? " early" : "late"}` } else { return abs === 0 ? "About average" : `${abs}${d.anomaly < 0 ? "°F colder" : "°F warmer"}` } }); return wrapper.node(); }32:T8dc,data = ["leaf", "temp"] .map(type => { const data = dataJoined.map(d => { return { type, year: d.year, anomaly: d[`${type}_anomaly`] } }); const y = d3.scaleLinear() .domain(type === "leaf" ? [12, -12] : [-5, 5]) // leaf is swapped because earlier is negative .range([chartheight, 0]); const loess = d3.regressionLoess() .x(d => d.year) .y(d => d.anomaly) .bandwidth(loessBandwidth) (data); const line = d3.line() .x(d => x(d[0])) .y(d => y(d[1])); const tickFormat = (d, i, e) => { const abs = Math.abs(d); if (type === "leaf") { return `${abs || ""}${i === 0 ? " days earlier" : i === e.length - 1 ? " days later" : "Average"}` } else { return `${abs || ""}${i === 0 ? "°F colder" : i === e.length - 1 ? "°F warmer" : "Average"}` } } const yAxisGenerator = (g, axisType) => { const generator = d3.axisLeft(y) .tickFormat(tickFormat) .tickSize(chartwidth + margin.left - 3) .tickValues(type === "leaf" ? [-12, 0, 12] : [-5, 0, 5]) const axis = g.call(generator) .attr("transform", `translate(${chartwidth})`); axis.select(".domain").remove(); const ticks = axis.selectAll(".tick"); if (axisType === "text"){ ticks.select("text") .attr("fill", "#444") .attr("font-family", franklinLight) .attr("font-size", 14) .attr("text-anchor", "start"); ticks.select("line").remove(); } else { ticks.select("text").remove(); const offset = (d, i, e) => { if (type === "leaf") { return i === 0 ? 86 : i === e.length - 1 ? 75 : 47; } else { return i === 0 ? 60 : i === e.length - 1 ? 68 : 47; } } ticks.select("line") .attr("stroke", "#e2e2e2") .attr("x2", (d, i, e) => { const currX2 = +d3.select(e[i]).attr("x2"); return currX2 + offset(d, i, e) }); } return axis; } return { type, data, line, loess, y, yAxisGenerator } })33:[{"id":"44cc0d0a82ded17d98cead1a6739b6589da4523c8101eac9a121964bf49e3e74e5942b85a95ea626bde23c67fcbd569723459ddbe675ca9f669d474ae7edbdba","href":"https://static.observableusercontent.com/files/44cc0d0a82ded17d98cead1a6739b6589da4523c8101eac9a121964bf49e3e74e5942b85a95ea626bde23c67fcbd569723459ddbe675ca9f669d474ae7edbdba","name":"SI-x_L48_1900_2023_25_byyear.csv","type":"text/csv","lastModified":1710271885550.994,"size":4111},{"id":"13c87c3f6bd94cf25751fe27008e2ebe0f7ae24ca8e083248b7226d47b9541a2bc4b00aff208c64de8bc57e6dd9b05fe33ce774fa1f71958f8e70d5aa65ef3c0","href":"https://static.observableusercontent.com/files/13c87c3f6bd94cf25751fe27008e2ebe0f7ae24ca8e083248b7226d47b9541a2bc4b00aff208c64de8bc57e6dd9b05fe33ce774fa1f71958f8e70d5aa65ef3c0","name":"1900-2023.csv","type":"text/csv","lastModified":1710272585644.974,"size":2454}] 2f:{"title":"Leaf appearance and temperature, 1900-2023","cells":[{"id":0,"value":"# Leaf appearance and temperature, 1900-2023","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"This notebook contains the code to make a version of the historical trends chart 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.","pinned":false,"hidden":false,"mode":"md"},{"id":808,"value":"The historical leaf index data are from Mark D. Schwartz of the University of Wisconsin at Milwaukee, who emailed me the data file. The temperature data are from [NOAA](https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/national/time-series/110/tavg/5/5/1900-2023.csv?base_prd=true&begbaseyear=1981&endbaseyear=2010).","pinned":false,"hidden":false,"mode":"md"},{"id":778,"value":"titles()","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"note()","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"toc({ selector: \"h2\", heading: \"Jump to code:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`## Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"titles = () => {\n const wrapper = d3.create(\"div\")\n .style(\"font-family\", franklinLight)\n .style(\"text-align\", width <= 768 ? \"left\" : \"center\")\n \n wrapper.append(\"div\")\n .style(\"font-size\", \"18px\")\n .style(\"font-weight\", \"bold\")\n .text(\"Leaf appearance and temperature\")\n \n wrapper.append(\"div\")\n .text(\"Compared with 1981-2010 average\");\n\n return wrapper.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"note = () => {\n const wrapper = d3.create(\"div\")\n .style(\"font-family\", franklinLight);\n\n wrapper.append(\"div\")\n .text(\"Hover on the chart to explore the data\")\n\n wrapper.append(\"div\")\n .style(\"color\", \"#666\")\n .style(\"font-size\", \"14px\")\n .text(\"Data for contiguous U.S. Lines of best fit created using LOESS smoothing.\")\n \n return wrapper.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"css = `\n.tip-label circle {\n fill: none;\n stroke: black;\n}\n\n.tip-label polyline {\n stroke: black;\n}\n\n.tip-label text {\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-opacity: 0.8;\n stroke-width: 4px;\n}\n\n.tip-label .label-text-g {\n font-size: 14px;\n}\n\n.tip-label .label-text-g .year {\n font-weight: bold;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"xAxis = g => {\n const generator = d3.axisBottom(x)\n .tickFormat(d => d)\n .tickValues([...d3.range(1900, 1925, 2025, 25), 2023])\n .tickSize(12);\n\n const axis = g\n .attr(\"transform\", `translate(0, ${chartheight + 8})`)\n .call(generator);\n\n axis.select(\".domain\").remove();\n\n const tick = g.selectAll(\".tick\")\n\n tick.select(\"text\")\n .attr(\"fill\", \"#222\")\n .attr(\"font-family\", franklinLight)\n .attr(\"font-size\", 14)\n \n tick.select(\"line\")\n .attr(\"stroke\", \"#ccc\");\n\n return axis;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"x = d3.scaleLinear()\n .domain(d3.extent(dataJoined, d => d.year))\n .range([0, chartwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"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":836,"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":276,"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":423,"value":"r = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"breakpoint = 480","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"margin = ({ left: 50, right: 16, top: 5, bottom: 35 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"basewidth = width <= breakpoint ? width : width / 2 - 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"chartwidth = basewidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"chartheight = Math.max(300, chartwidth * 9 / 16) - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"loessBandwidth = 0.55","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"variable = \"leaf\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"dataJoined = d3.range(1900, 2024)\n .map(year => {\n const spring = springIndexData.find(d => d.year === year)\n const temp = tempData.find(d => d.year === year);\n\n const o = {\n year,\n temp_anomaly: temp.anomaly\n }\n\n o[`${variable}_anomaly`] = spring[`six_f${variable}_diff_mean`];\n\n return o;\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"// Received from Mark D. Schwartz of the University of Wisconsin at Milwaukee in an email on March 7, 2024\nspringIndexData = {\n const data = await FileAttachment(\"SI-x_L48_1900_2023_25_byyear.csv\").csv()\n \n data.forEach(d => {\n data.columns.forEach((c, i) => {\n d[c.toLowerCase()] = +d[c];\n delete d[c];\n });\n return d;\n });\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"tempData = {\n // https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/national/time-series/110/tavg/5/5/1900-2023.csv?base_prd=true&begbaseyear=1981&endbaseyear=2010\n const text = await FileAttachment(\"1900-2023.csv\").text()\n const rows = text.split(\"\\n\").slice(4)\n const cols = rows[0].split(\",\").map(s => s.toLowerCase());\n const tempData = rows.slice(1)\n .map(d => {\n const o = {};\n const vals = d.split(\",\");\n cols.forEach((c, i) => {\n const v = vals[i];\n o[c] = i < 1 ? v : +v;\n });\n o.year = +o.date.slice(0, 4);\n return o;\n })\n .filter(d => d.year);\n \n return tempData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import { franklinLight } from \"1dec0e3505bd3624\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"import { interpolatePalette } from \"@harrystevens/roll-your-own-color-palette-interpolator\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"import { toc } from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"d3 = require(\"d3@7\", \"d3-regression@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}