31:T4cb,legend = () => { const margin = { top: 20, bottom: 18 }; const width = 300; const height = 16; const svg = d3.create("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom) .attr("font-family", franklinLight) .style("margin", "0 auto") .style("display", "table") .style("overflow", "visible") .call(gradient); const g = svg.append("g") .attr("transform", `translate(0, ${margin.top})`) g.append("text") .attr("font-size", 18) .attr("dy", -8) .attr("x", width / 2) .attr("font-weight", "bold") .attr("text-anchor", "middle") .html("Arrival of spring leaves"); g.append("rect") .attr("width", width) .attr("height", height) .attr("fill", `url(#${gradient.id()})`); const tick = g.selectAll(".tick") .data([-20, 20]) .join("g") .attr("class", "tick") .attr("transform", (d, i) => `translate(${i ? width : 0})`); tick.append("text") .attr("font-size", 14) .attr("text-anchor", (d, i) => i ? "end" : "start") .attr("y", height + 14) .text((d, i) => `${Math.abs(d)}${i ? " days late" : " days early"}`); return svg.node(); }32:T6f3,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(); } S .forEach((cell, i) => { if (cell || cell === 0) { context.fillStyle = scale(cell); const x = X[i % X.length]; const y = Y[(i / X.length) | 0]; const p = projection([x, y]); context.fillRect(p[0] | 0, p[1] | 0, 1, 1); } }); 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":"ffd25a92d8584f8c7dc67ccbb0caac78a8ea1655c5d959ac62f11584e11181d80dd904584bc889a4a151b5210c5984d1792fe7c13dc12840104eaee20851fcde","href":"https://static.observableusercontent.com/files/ffd25a92d8584f8c7dc67ccbb0caac78a8ea1655c5d959ac62f11584e11181d80dd904584bc889a4a151b5210c5984d1792fe7c13dc12840104eaee20851fcde","name":"leaf_anomaly_2023-03-14.nc","type":"application/octet-stream","lastModified":1678826561979.809,"size":12817140},{"id":"5fd835f5ec6bf7adf4d14633809d6f8d0ec9f028627741ea46df80b4fb39d8da826d895e478cb450a122a96daf121588b89ab0a0b49207f12e448696fc5a9d5b","href":"https://static.observableusercontent.com/files/5fd835f5ec6bf7adf4d14633809d6f8d0ec9f028627741ea46df80b4fb39d8da826d895e478cb450a122a96daf121588b89ab0a0b49207f12e448696fc5a9d5b","name":"cities.json","type":"application/json","lastModified":1678283382871.578,"size":1772},{"id":"e1946f18621cf53f53479b41a8fd820d9c0e430e8f7a469983346a7827beaec9cddfa22e1f40d77afed61188fdabb94cb815fc274d02547d76a3f3f77d7f8132","href":"https://static.observableusercontent.com/files/e1946f18621cf53f53479b41a8fd820d9c0e430e8f7a469983346a7827beaec9cddfa22e1f40d77afed61188fdabb94cb815fc274d02547d76a3f3f77d7f8132","name":"leaf_anomaly_2023-03-16.nc","type":"application/octet-stream","lastModified":1679003419680.681,"size":12817140},{"id":"56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","href":"https://static.observableusercontent.com/files/56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","name":"ne_50m_admin_1_states_provinces_lakes@1.json","type":"application/json","lastModified":1678116152933.45,"size":60898}] 2f:{"title":"Leaf Index Anomaly Map","cells":[{"id":0,"value":"md`# Leaf Index Anomaly Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"This notebook shows how to turn a NetCDF file from the USA National Phenology Network into a map. To download an updated NetCDF file, visit NPN’s [Geoserver Request Builder Tool](https://www.usanpn.org/geoserver-request-builder), and input the following settings:\n- **Service Type:** WCS\n- **Layer Name:** Spring Indices, Daily Anomaly - Daily Spring Index Leaf Anomaly\n- **Date:** Your choice\n- **Format:** NetCDF","pinned":false,"hidden":false,"mode":"md"},{"id":1315,"value":"A version of this map appeared in the story “[When will spring come? Or has it already? Look up where you live.](https://www.washingtonpost.com/climate-environment/interactive/2023/spring-early-late-climate-change/)”, published in The Washington Post on March 15, 2023.","pinned":false,"hidden":false,"mode":"md"},{"id":1346,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"note()","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":1184,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1328,"value":"note = () => d3.create(\"div\")\n .style(\"color\", \"#666\")\n .style(\"font-family\", franklinLight)\n .style(\"font-size\", \"14px\")\n .text(\"Data as of March 14\")\n .node()","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":1177,"value":"colors = [\"#286b1e\", \"#5e8f22\", \"#92b52f\", \"#c8db4d\", \"#ffffab\", \"#eac2d2\", \"#d095b7\", \"#b06c99\", \"#7d516f\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"interpolator = interpolatePalette(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1032,"value":"scale = d3.scaleDiverging([-20, 0, 20], interpolator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1159,"value":"interval = 1 / (colors.length - 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1181,"value":"offsets = d3.range(0, 100 + interval * 100, interval * 100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"gradient = gradientLinear()\n .offsets(offsets)\n .colors(colors)","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":946,"value":"anomaly = FileAttachment(\"leaf_anomaly_2023-03-16.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"nc = anomaly\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"S0 = nc.getDataVariable(\"six_leaf_anomaly\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"S = S0.map((d, i) => (d !== -9999 ? d : null))","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"X = nc.getDataVariable(\"lon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"Y = nc.getDataVariable(\"lat\")","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":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 \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"import { franklinLight } from \"1dec0e3505bd3624\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"import { gradientLinear } from \"@washpostgraphics/gradient-generators\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"import { interpolatePalette } from \"@harrystevens/roll-your-own-color-palette-interpolator\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"netcdf = import(\"https://cdn.skypack.dev/netcdfjs@2.0.2?min\").then(\n (d) => d.NetCDFReader\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}