31:Tc65,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 === "bloom_day" ? "Peak bloom date" : `Average temperature, Jan. 1 - ${formatDate(ghcnLatest)}`) 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", "#fff") .attr("stroke", "#767676") .attr("cx", d => x(d.year)) .attr("cy", d => data.find(d0 => d0.type === d.type).y(d.value)) .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.value) ]})`) .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 => d.tip); return wrapper.node(); }32:Ta06,// Each chart needs its own dataset with different y scale and axis data = ["bloom_day", "tavg"] .map(type => { const data = dataJoined.map(d => { return { type, year: d.year, value: d[type], tip: type === "bloom_day" ? formatDate(d.bloom_date) : `${d[type].toFixed(1)}°F` } }); const domain = type === "bloom_day" ? [110, 70] : [30, 50] // bloom_day is swapped because earlier is negative const y = d3.scaleLinear() .domain(domain) .range([chartheight, 0]); const loess = d3.regressionLoess() .x(d => d.year) .y(d => d.value) .bandwidth(bandwidth) (data); const line = d3.line() .x(d => x(d[0])) .y(d => y(d[1])); const tickFormat = (d, i, e) => { if (type === "bloom_day") { const date = dayOfYearToDate(2023, d); const months = ["Jan.", "Feb.", "March", "April"] return `${months[date.getUTCMonth()]} ${date.getUTCDate()}` } else { return `${d}°F` } } let tickValues; if (type === "bloom_day") { tickValues = [ new Date("2023-03-15"), new Date("2023-04-01"), new Date("2023-04-15") ].map(dateToDayOfYear); } else { tickValues = [32, 40, 48]; } const yAxisGenerator = (g, axisType) => { const generator = d3.axisLeft(y) .tickFormat(tickFormat) .tickSize(chartwidth + margin.left - 3) .tickValues(tickValues) 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 === "bloom_day") { return [58, 38, 46][i] } else { return 30; } } 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:T41b,function makeGHCNDatum(d) { const hasTAVG = typeof d.TAVG === "number"; const hasTMAX = typeof d.TMAX === "number"; const hasTMIN = typeof d.TMIN === "number"; let tavg; if (hasTAVG) { // In 8 of the dates, the average reported temperature // is either greater than the max. or less than the min. // For those ones, we use the midpoint of max. and min. if (hasTMAX && hasTMIN) { if (d.TAVG >= d.TMAX || d.TAVG <= d.TMIN) { tavg = (d.TMAX + d.TMIN) / 2; } else { tavg = d.TAVG; } } else { tavg = d.TAVG; } } else if (hasTMAX && hasTMIN) { tavg = (d.TMAX + d.TMIN) / 2; } else { tavg = null; } return { date: d.DATE, day: moment(toDateString(d.DATE), "YYYY-MM-DD").dayOfYear(), tmin: hasTMIN ? convertTemp(d.TMIN / 10, { input: "c", output: "f" }) : undefined, tmax: hasTMAX ? convertTemp(d.TMAX / 10, { input: "c", output: "f" }) : undefined, tavg: convertTemp(tavg / 10, { input: "c", output: "f" }), source: "ghcn" } }34:[{"id":"2354b38619b6b2e95a044c14d4bb9d27ea64853a50100028018925397155a9b7f0570616fac8d1ba3cb75bf952878d2e5acc98d6f0ceaf9355be53d01d1c1a03","href":"https://static.observableusercontent.com/files/2354b38619b6b2e95a044c14d4bb9d27ea64853a50100028018925397155a9b7f0570616fac8d1ba3cb75bf952878d2e5acc98d6f0ceaf9355be53d01d1c1a03","name":"USW00013743.csv","type":"text/csv","lastModified":1710771987621.489,"size":1533218},{"id":"9b5cd3d26f82a98e235ff294ccaa8f6fb3214740dc55b873ef032ccd4c97618ccb48726458235c1520ad92b1869310afee457a5dba83c900eb6836cdfa6364a4","href":"https://static.observableusercontent.com/files/9b5cd3d26f82a98e235ff294ccaa8f6fb3214740dc55b873ef032ccd4c97618ccb48726458235c1520ad92b1869310afee457a5dba83c900eb6836cdfa6364a4","name":"dc_peak_bloom.csv","type":"text/csv","lastModified":1710772711959.092,"size":2115},{"id":"dc555689b1c74867925e2a3aa1645d0f626f3023d222323f557555cb6b5d8ba6fb9757bbf5d82101f64ab717ce86c6cba15fe8e427f3ed8d086c314f76148abc","href":"https://static.observableusercontent.com/files/dc555689b1c74867925e2a3aa1645d0f626f3023d222323f557555cb6b5d8ba6fb9757bbf5d82101f64ab717ce86c6cba15fe8e427f3ed8d086c314f76148abc","name":"USW00013743@3.csv","type":"text/csv","lastModified":1711035729502.503,"size":12090561}] 2f:{"title":"Peak cherry blossom bloom and D.C. temperature, 1921-2024","cells":[{"id":0,"value":"# Peak cherry blossom bloom and D.C. temperature, 1921-2024","pinned":false,"hidden":false,"mode":"md"},{"id":1398,"value":"This notebook contains the code to produce a version of the chart comparing historical peak bloom and temperature that appeared in [“One cherry tree’s rush to bloom”](https://www.washingtonpost.com/climate-environment/interactive/2024/dc-cherry-blossom-peak-bloom-climate-change/), published in The Washington Post on March 22, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"note()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"Historical peak bloom dates are from the National Park Service, and daily temperatures in D.C. are from [Carnegie-Mellon University](https://kilthub.cmu.edu/articles/dataset/Compiled_daily_temperature_and_precipitation_data_for_the_U_S_cities/7890488?file=32874233) and [the National Oceanic and Atmospheric Administration](https://www.ncei.noaa.gov/data/global-historical-climatology-network-daily/access/USW00013743.csv). You’ll find our code to calculate the average temperature in D.C. in the Data section below.","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"toc({ selector: \"h2\", heading: \"Jump to:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`## Graphics`","pinned":false,"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(\"Trend lines created with 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([1921, ...d3.range(1940, 2040, 20)])\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":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":1258,"value":"bandwidth = 0.3","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"// Join the peak bloom and temperature data into one array\ndataJoined = d3.range(bloomStartYear, 2025)\n .map(year => {\n const bloom = bloomData.find(d => d.year === year);\n const temp = dcTemp.find(d => d.year === year);\n\n const o = {\n year,\n bloom_day: bloom.day,\n bloom_date: bloom.date,\n tavg: temp.tavg\n }\n\n return o;\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"dcDaily = {\n const data = [];\n\n // Get the missing dates from the CMU dataset\n dcDailyCMU\n .filter(d => d.Date.getTime() < ghcnStart.getTime())\n .filter(d => d.Date.getUTCFullYear() >= bloomStartYear)\n .forEach(d => {\n data.push(makeCMUDatum(d));\n });\n\n // Fill in the rest from GHCN\n dcDailyGHCN\n .forEach(d => {\n data.push(makeGHCNDatum(d));\n })\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"// Annual D.C. average temperature at the start of the year\ndcTemp = d3\n .groups(dcDaily, d => d.date.getUTCFullYear())\n .map(d => {\n const o = {};\n o.year = d[0];\n\n const toDate = d[1].filter(d0 => {\n const month = d0.date.getUTCMonth();\n\n if (month < ghcnLatest.getUTCMonth()) {\n return true;\n }\n else if (month === ghcnLatest.getUTCMonth() && d0.day <= ghcnLatestDayOfYear) {\n return true;\n }\n else {\n return false;\n }\n });\n\n o.tmax = d3.mean(toDate, d => d.tmax);\n o.tmin = d3.mean(toDate, d => d.tmin);\n o.tavg = d3.mean(toDate, d => d.tavg);\n o.source = d[1][0].source;\n return o;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1079,"value":"ghcnStart = dcDailyGHCN[0].DATE;","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"ghcnLatest = new Date(\"2024-03-17\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1120,"value":"ghcnLatestDayOfYear = moment(toDateString(ghcnLatest), \"YYYY-MM-DD\").dayOfYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1222,"value":"bloomStartYear = bloomData[0].year;","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"// https://kilthub.cmu.edu/articles/dataset/Compiled_daily_temperature_and_precipitation_data_for_the_U_S_cities/7890488?file=32874233\n// Carnegie-Mellon has DC data preceding GHCN\ndcDailyCMU = FileAttachment(\"USW00013743.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":999,"value":"// https://www.ncei.noaa.gov/data/global-historical-climatology-network-daily/access/USW00013743.csv\ndcDailyGHCN = FileAttachment(\"USW00013743@3.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"bloomData = FileAttachment(\"dc_peak_bloom.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":1089,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1164,"value":"makeCMUDatum = d => {\n const { Date, tmin, tmax } = d;\n \n return {\n date: Date,\n day: moment(toDateString(Date), \"YYYY-MM-DD\").dayOfYear(),\n tmin,\n tmax,\n tavg: (tmin + tmax) / 2,\n source: \"cmu\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"// 1-indexed by default, so 1 is Jan. 1\ndayOfYearToDate = (year, dayOfYear, zeroIndex = 1) => {\n const dayMs = 1e3 * 60 * 60 * 24;\n const yearStart = new Date(`${year}-01-01`);\n return new Date(yearStart.getTime() + dayMs * (dayOfYear - zeroIndex));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1147,"value":"toDateString = date => {\n return `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().padStart(2, 0)}-${date.getUTCDate().toString().padStart(2, 0)}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1273,"value":"dateToDayOfYear = date => {\n return moment(toDateString(date)).dayOfYear()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1275,"value":"formatDate = date => {\n const months = [\"Jan.\", \"Feb.\", \"March\", \"April\"];\n return `${months[date.getUTCMonth()]} ${date.getUTCDate()}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"import { convertTemp } from \"@climatelab/temperature-converter@157\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","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 \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"d3 = require(\"d3@7\", \"d3-regression@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"moment = require(\"moment@2.30.1/moment.js\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}