31:Tc85,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").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("x2", chartwidth); yaxisTick.append("text") .attr("dy", "0.32em") .attr("font-weight", "bold") .attr("x", -margin.left) .text(selected.label); const city = g.selectAll(".city") .data([selected]) .join("g") .attr("class", "city") .attr("transform", d => `translate(0, ${y.bandwidth() / 2})`); const cityLine = city.append("line") .attr("x1", d => x(new Date(dayOfYearToDate(d.data.line[0][1])))) .attr("x2", d => x(new Date(dayOfYearToDate(d.data.line[1][1])))) .attr("stroke", d => colorScale(d.data.trend)) .attr("stroke-width", 6); const cityCircleStart = city.append("circle") .attr("cx", d => x(new Date(dayOfYearToDate(d.data.line[0][1])))) .attr("fill", "#fff") .attr("stroke", "#888") .attr("r", r); const cityCircleEnd = city.append("circle") .attr("cx", d => x(new Date(dayOfYearToDate(d.data.line[1][1])))) .attr("fill", d => colorScale(d.data.trend)) .attr("stroke", d => d3.color(colorScale(d.data.trend)).darker(1)) .attr("r", r); const cityLabelStart = city.append("text") .attr("class", "city-label") .attr("dx", d => (r + 4) * (d.data.trend < 0 ? 1 : -1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.data.trend < 0 ? "start" : "end") .attr("x", d => x(new Date(dayOfYearToDate(d.data.line[0][1])))) .attr("y", -18) .text("Expected in 1981"); const cityLabelEnd = city.append("text") .attr("class", "city-label") .attr("dx", d => (r + 4) * (d.data.trend < 0 ? -1 : 1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.data.trend < 0 ? "end" : "start") .attr("x", d => x(new Date(dayOfYearToDate(d.data.line[1][1])))) .attr("y", -18) .text("Expected in 2023"); const cityDateStart = city.append("text") .attr("class", "city-date") .attr("dx", d => (r + 4) * (d.data.trend < 0 ? 1 : -1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.data.trend < 0 ? "start" : "end") .attr("x", d => x(new Date(dayOfYearToDate(d.data.line[0][1])))) .text(d => formatDate(dayOfYearToDate(d.data.line[0][1]))); const cityDateEnd = city.append("text") .attr("class", "city-date") .attr("dx", d => (r + 4) * (d.data.trend < 0 ? -1 : 1)) .attr("dy", "0.32em") .attr("text-anchor", d => d.data.trend < 0 ? "end" : "start") .attr("x", d => x(new Date(dayOfYearToDate(d.data.line[1][1])))) .text(d => formatDate(dayOfYearToDate(d.data.line[1][1]))); return svg.node() }32:T53e,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(options) .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(new Date(dayOfYearToDate(d.data.line[0][1])))) .attr("x2", d => x(new Date(dayOfYearToDate(d.data.line[1][1])))) .attr("stroke", d => colorScale(d.data.trend)) .attr("stroke-width", 6) const cityCircleStart = city.append("circle") .attr("cx", d => x(new Date(dayOfYearToDate(d.data.line[0][1])))) .attr("fill", "#fff") .attr("stroke", "#888") .attr("r", r); const cityCircleEnd = city.append("circle") .attr("cx", d => x(new Date(dayOfYearToDate(d.data.line[1][1])))) .attr("fill", d => colorScale(d.data.trend)) .attr("stroke", d => d3.color(colorScale(d.data.trend)).darker(1)) .attr("r", r); return svg.node() }33:[{"id":"2daf09c01aac356455bd7cef8a791d4949e55499dfac293cbd664f59fe547f61352fbf301f99beddf8b8a5a25b6732aa28907ed8ccc509baba1f85ffed69457d","href":"https://static.observableusercontent.com/files/2daf09c01aac356455bd7cef8a791d4949e55499dfac293cbd664f59fe547f61352fbf301f99beddf8b8a5a25b6732aa28907ed8ccc509baba1f85ffed69457d","name":"3974.json","type":"application/json","lastModified":1710270775472.673,"size":207},{"id":"6c47fd50d6f7dce43a319f19eb2258ce63021099664bfdca21827872be3b416806d2ea0d44a0043e1cc95e39313a5a7761c8768b3a2731e555523d42c0b08998","href":"https://static.observableusercontent.com/files/6c47fd50d6f7dce43a319f19eb2258ce63021099664bfdca21827872be3b416806d2ea0d44a0043e1cc95e39313a5a7761c8768b3a2731e555523d42c0b08998","name":"10123.json","type":"application/json","lastModified":1710270796330.03,"size":212},{"id":"6dc9813af57845fdd34851de357096304a3c9de5c9b214a272e390a9017c5d18e3b79ef5cf8043587ad53fb20976aa69a165bcd1f48c34ff076442a90b84bdea","href":"https://static.observableusercontent.com/files/6dc9813af57845fdd34851de357096304a3c9de5c9b214a272e390a9017c5d18e3b79ef5cf8043587ad53fb20976aa69a165bcd1f48c34ff076442a90b84bdea","name":"25433.json","type":"application/json","lastModified":1710270824994.19,"size":216},{"id":"23eb3019b778aadd656207d2f72d4bc6a671bb29f24db81df6ccd8c665b3850725e2dbfe9b1d2fbc50e0dd4e8be8cb12ad83cd3691e3d4dc5e6b271b2847ac0f","href":"https://static.observableusercontent.com/files/23eb3019b778aadd656207d2f72d4bc6a671bb29f24db81df6ccd8c665b3850725e2dbfe9b1d2fbc50e0dd4e8be8cb12ad83cd3691e3d4dc5e6b271b2847ac0f","name":"17834.json","type":"application/json","lastModified":1710270855346.068,"size":217},{"id":"b3e6a2cc83376dfd7953c1b5dfbece83a970dadf33ad831f09261832b79f0bb8611bda7cd18a3502c92f3a1b075670af30c29a455a89d99ac94aec980b82e03e","href":"https://static.observableusercontent.com/files/b3e6a2cc83376dfd7953c1b5dfbece83a970dadf33ad831f09261832b79f0bb8611bda7cd18a3502c92f3a1b075670af30c29a455a89d99ac94aec980b82e03e","name":"4228.json","type":"application/json","lastModified":1710270882878.571,"size":219},{"id":"2dd633ab2aa6f3062e8c35054e17878b71cca39598436b9acdc881a053dae117e0de486f257b5d9a7da8145d34dba347acaba27bf5320462c0b168de177d5bb9","href":"https://static.observableusercontent.com/files/2dd633ab2aa6f3062e8c35054e17878b71cca39598436b9acdc881a053dae117e0de486f257b5d9a7da8145d34dba347acaba27bf5320462c0b168de177d5bb9","name":"24628.json","type":"application/json","lastModified":1710270912660.792,"size":214},{"id":"1ca0636e2166f6171e3e0847f9e58007397c4ba9a36da3f8032e1ae3646d5381e74e19a60c91961044873dbd183d14d4542ca9922638214913c4cba65cc1f1e4","href":"https://static.observableusercontent.com/files/1ca0636e2166f6171e3e0847f9e58007397c4ba9a36da3f8032e1ae3646d5381e74e19a60c91961044873dbd183d14d4542ca9922638214913c4cba65cc1f1e4","name":"3606.json","type":"application/json","lastModified":1710270932095.042,"size":215},{"id":"69bcff9a894e5ba5e9ccf2efe858a7686c27a517b4292bb729f2e2ba46d895cdc2a5627169022cb679bbfbcd195fa8e470d51ca7a6dbf6af975b1461806546fe","href":"https://static.observableusercontent.com/files/69bcff9a894e5ba5e9ccf2efe858a7686c27a517b4292bb729f2e2ba46d895cdc2a5627169022cb679bbfbcd195fa8e470d51ca7a6dbf6af975b1461806546fe","name":"18875.json","type":"application/json","lastModified":1710270966969.241,"size":213}] 2f:{"title":"Trend in spring leaf appearance in select cities","cells":[{"id":0,"value":"# Trend in spring leaf appearance in select cities\n\nThis notebook contains the code to make a simplified version of the city lookup 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.\n\nThe article published on The Post’s website lets you search from about 30,000 towns and cities in the contiguous U.S. I downloaded the leaf appearance trend data from the USA National Phenology Network and calculated the linear regressions myself. I downloaded the city location data are from [this GitHub repository](https://github.com/kelvins/US-Cities-Database/) and joined their coordinates to the grid myself.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"viewof selected = Inputs.select(options.slice().sort((a, b) => d3.ascending(a.label, b.label)), { format: d => d.label, label: \"Select a city:\", value: options.find(d => d.label === \"Washington\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"robotext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"chartSelect()","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"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":203,"value":"robotext = () => {\n const { city, state_post, trend } = selected.data;\n const wrapper = d3.create(\"div\")\n .style(\"font-family\", franklinLight)\n .style(\"text-align\", \"center\")\n .style(\"width\", `${chartwidth + margin.left + margin.right}px`)\n\n wrapper.append(\"style\").html(`.pill { border-radius: 4px; padding: 1px 4px; }`)\n \n wrapper.append(\"div\")\n .style(\"font-weight\", \"bold\")\n .text(`${city}, ${state_post}`);\n\n const change = Math.round(trend);\n const color = colorScale(trend);\n const span = ``\n const text = change === 0 ? `${span}at about the same time as` : `${span}${Math.abs(change)} days ${trend < 0 ? \"earlier\" : \"later\"} than`\n \n wrapper.append(\"text\")\n .html(`Leaves are expected to appear ${text} in 1981`);\n\n return wrapper.node();\n \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: 16px;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 8px;\n text-anchor: start;\n}\n\n.city-label {\n font-family: ${franklinLight};\n font-size: 13px;\n}\n.city-date {\n font-family: ${franklinLight};\n font-size: 16px;\n font-weight: bold;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 8px;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"backgroundColor = colorScale(decadalChange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"foregroundColor = foreground(backgroundColor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"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":706,"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":708,"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":43,"value":"## Generators","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"xaxisGenerator = (g, height) => {\n const generator = d3.axisBottom(x)\n .tickFormat(d => months[d.getUTCMonth()])\n .tickSize(height - y.bandwidth() / 2 + 10)\n .tickValues(d3.range(1, 6).map(mm => new Date(`2023-${mm.toString().padStart(2, 0)}-01`)));\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":441,"value":"startDate = new Date(\"2023-01-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"endDate = new Date(\"2023-05-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"x = d3.scaleTime([startDate, endDate], [0, chartwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"y = d3.scaleBand(options.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: 90, right: 20, top: 5, bottom: 26})","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 = options.length * bandheight","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"decadalChange = data.trend","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"data = selected.data","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"options = [\n {\n label: \"Miami\",\n data: (await FileAttachment(\"3974.json\").json())\n },\n {\n label: \"Houston\",\n data: (await FileAttachment(\"25433.json\").json())\n },\n {\n label: \"Las Vegas\",\n data: (await FileAttachment(\"17834.json\").json())\n },\n {\n label: \"Atlanta\",\n data: (await FileAttachment(\"4228.json\").json())\n },\n {\n label: \"Nashville\",\n data: (await FileAttachment(\"24628.json\").json())\n },\n {\n label: \"Washington\",\n data: (await FileAttachment(\"3606.json\").json())\n },\n {\n label: \"New York\",\n data: (await FileAttachment(\"18875.json\").json())\n },\n {\n label: \"Boston\",\n data: (await FileAttachment(\"10123.json\").json())\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"months = [\"Jan.\", \"Feb.\", \"March\", \"April\", \"May\", \"June\", \"July\", \"Aug.\", \"Sept.\", \"Oct.\", \"Nov.\", \"Dec.\"];","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"function formatDate(date) {\n const [yyyy, mm, dd] = date.split(\"-\");\n return `${months[+mm - 1]} ${+dd}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"function dayOfYearToDate(dayOfYear) {\n return moment(`${2023}-01-01`)\n .add(dayOfYear, \"days\")\n .format(\"YYYY-MM-DD\");\n}","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"},{"id":345,"value":"moment = require(\"moment@2.30.1/moment.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}