31:T482,legend = () => { const margin = { top: 20, bottom: 18 }; const width = 300; const height = 12; const svg = d3.create("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom) .attr("font-family", franklinLight) .style("display", "table") .style("margin", "0 auto") .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(0, ${margin.top})`); g.append("text") .attr("font-size", 18) .attr("dy", -8) .attr("font-weight", "bold") .html("Plant Hardiness Zone"); const tick = g.selectAll(".tick") .data(ticks) .join("g") .attr("class", "tick") .attr("transform", (d, i) => `translate(${i / (ticks.length) * width})`); tick.append("rect") .attr("width", width / ticks.length) .attr("height", height) .attr("fill", color); tick.append("line") .attr("stroke", "black") .attr("y2", height + 6); tick.append("text") .attr("font-size", 14) .attr("text-anchor", "middle") .attr("y", height + 18) .text(d => d); return svg.node(); }32:T97e,map = () => { const wrapper = d3.create("div") .style("width", `${width}px`) .style("height", `${height}px`) .style("position", "relative"); wrapper.append("style").html(css); // Raster layer for NetCDF const canvas = wrapper.append("canvas") .style("position", "absolute"); canvas.node().width = width; canvas.node().height = height; const context = canvas.node().getContext("2d"); path.context(context); points .forEach(({phz, lon, lat}, i) => { const c = (isNaN(phz) || phz === null || (phz !== 0 && !phz)) ? "#fff" : color(phz); const p = projection([lon, lat]); // This seems to line up the best, though I don't know why const x = p[0]; const y = p[1] - cellheight * 2; context.fillStyle = c; context.strokeStyle = c; context.fillRect(x, y, cellwidth + 1, cellheight + 1); context.strokeRect(x, y, cellwidth + 1, cellheight + 1); }); // Clip using Canada, Mexico and the ocean context.strokeStyle = "white"; context.fillStyle = "white"; canmexGeo.features .forEach((feature, index) => { context.beginPath(); path(feature); context.fill(); context.stroke(); }); oceanGeo.features .forEach((feature, index) => { context.beginPath(); path(feature); context.fill(); context.stroke(); }); context.fillStyle = "none"; // Draw borders on raster context.beginPath(); path(usGeoInner); context.strokeStyle = "#f5f5f5" context.stroke(); context.beginPath(); path(usGeoOuter); context.strokeStyle = "#888888" context.stroke(); // Vector layer for city labels const svg = wrapper.append("svg") .style("position", "absolute") .attr("width", width) .attr("height", height); 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("class", "circle-bg") .attr("r", 3); 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:T625,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: ${width <= 480 ? "none" : "block"}; } .city.boston text { text-anchor: end; transform: translate(-4px, -4px); } .city.chicago text { text-anchor: start; transform: translate(4px, 13px); } .city.miami text { fill: black; } .city.miami text.bg { fill: white; stroke: white; } .city.minneapolis { display: ${width <= 480 ? "none" : "block"}; } .city.new-york text { text-anchor: end; transform: translate(-4px, -4px); } .city.philadelphia { display: ${width <= 480 ? "none" : "block"}; } .city.philadelphia text { text-anchor: end; transform: translate(-7px, 4px); } .city.seattle text { transform: translate(4px, ${width <= 400 ? "13px" : "-4px"}); } .city.st-louis { display: ${width <= 480 ? "none" : "block"}; } .city.washington-dc text { text-anchor: ${width <= 600 ? "middle" : "end"}; transform: ${width <= 600 ? "translate(0, 16px)" : "translate(-4px, 13px)"}; } .city circle { stroke: white; } .city circle.circle-bg { stroke: black; stroke-opacity: 0.3; stroke-width: 3px; } .city text { fill: white; font-size: ${width <= 480 ? "14px" : "16px"}; font-family: ${franklinLight}; } .city text.bg { fill: black; stroke: black; } .city text.bg-0 { stroke-width: 4px; stroke-opacity: 0.2; } .city text.bg-1 { stroke-width: 2px; stroke-opacity: 0.5; } `34:[{"id":"b1fab08a21937a61a0a3ffbe8d885b2ea6498b3365a80783579b2d70965618537835b348d7a86f648f43114fa0af3c359557095b494562cfc721d1d059f3770b","href":"https://static.observableusercontent.com/files/b1fab08a21937a61a0a3ffbe8d885b2ea6498b3365a80783579b2d70965618537835b348d7a86f648f43114fa0af3c359557095b494562cfc721d1d059f3770b","name":"oceanTopo.json","type":"application/json","lastModified":1681850154337.999,"size":560350},{"id":"3bc041d51d756afff7c1dd966f2baef3a4e1d2ecee220810d14d7f497fb1cff9d730cd0dc0878e7a2a9fc87daaf1a0b2cee4e9d324baf3087c2a4e94ce4c7340","href":"https://static.observableusercontent.com/files/3bc041d51d756afff7c1dd966f2baef3a4e1d2ecee220810d14d7f497fb1cff9d730cd0dc0878e7a2a9fc87daaf1a0b2cee4e9d324baf3087c2a4e94ce4c7340","name":"canmexTopo.json","type":"application/json","lastModified":1681850148602.862,"size":115078},{"id":"108501d196644bdfeaac244f40c76de64bc84f5cd00645e6cb45e4a2a0abc2ce1dec4e537b9da5505cfa59da1036b7dcbbc8804c6e2b250aeeb530252b30ca74","href":"https://static.observableusercontent.com/files/108501d196644bdfeaac244f40c76de64bc84f5cd00645e6cb45e4a2a0abc2ce1dec4e537b9da5505cfa59da1036b7dcbbc8804c6e2b250aeeb530252b30ca74","name":"PHZ_gfdl85_2069.nc","type":"application/octet-stream","lastModified":1680894091328.719,"size":417456},{"id":"dbb94aba85a00626e16f35d07e4bb9114d2d5b8565c35cd8a6ccc18e3faf6d3007cc965da8b372c6e01fc1e20216b8b5e2a6b60daa0a2867065277abdc3d8323","href":"https://static.observableusercontent.com/files/dbb94aba85a00626e16f35d07e4bb9114d2d5b8565c35cd8a6ccc18e3faf6d3007cc965da8b372c6e01fc1e20216b8b5e2a6b60daa0a2867065277abdc3d8323","name":"PHZ_gfdl85_2039.nc","type":"application/octet-stream","lastModified":1680894083184.473,"size":417456},{"id":"7f70f8b90180a79a0347b1f977b8e20187c4db918e43d06231842e8c75042218f62cada18278db85d7a18a9bdd606b1dbe6dfbb5e1684d36d68d331f8eb4221e","href":"https://static.observableusercontent.com/files/7f70f8b90180a79a0347b1f977b8e20187c4db918e43d06231842e8c75042218f62cada18278db85d7a18a9bdd606b1dbe6dfbb5e1684d36d68d331f8eb4221e","name":"PHZ_gfdl85_2009.nc","type":"application/octet-stream","lastModified":1680894039490.275,"size":417456},{"id":"e75069dcff747994048841d198b6bd2fb7f0a7bc6f53e19a7b9d2ea2027d747d18db4d8348a9ca6f7c4ed4b137751adb7193ca588eccbaf33f932e8fef3d56da","href":"https://static.observableusercontent.com/files/e75069dcff747994048841d198b6bd2fb7f0a7bc6f53e19a7b9d2ea2027d747d18db4d8348a9ca6f7c4ed4b137751adb7193ca588eccbaf33f932e8fef3d56da","name":"PHZ_ccsm45_2069.nc","type":"application/octet-stream","lastModified":1680894024407.58,"size":417456},{"id":"cd418b049944d2fc158952fba69cad2a7341b2347bd75fb56b0b0d0a83956e13d40c56553c3bbac416b4c93b6fa90573a7bb8739346ce7f19b3cf8177c0e022a","href":"https://static.observableusercontent.com/files/cd418b049944d2fc158952fba69cad2a7341b2347bd75fb56b0b0d0a83956e13d40c56553c3bbac416b4c93b6fa90573a7bb8739346ce7f19b3cf8177c0e022a","name":"PHZ_ccsm45_2039.nc","type":"application/octet-stream","lastModified":1680893996415.549,"size":417456},{"id":"a768c604b60e002071c9b0b76c212efd53a37246f1a2cbca19e02428acc53ca73d031b354eead895fded8596b45634718e1c5db47da8f0b1a8b450d1da16c384","href":"https://static.observableusercontent.com/files/a768c604b60e002071c9b0b76c212efd53a37246f1a2cbca19e02428acc53ca73d031b354eead895fded8596b45634718e1c5db47da8f0b1a8b450d1da16c384","name":"PHZ_ccsm45_2009.nc","type":"application/octet-stream","lastModified":1680893946832.042,"size":417456},{"id":"c52e200f2a0c3b907788b3ce75abfa6cab013d40502cc824e8b041c545dfd2f0a276efa4ec063f106c03254941cd1a21172b0f7bcbaa040211fe73d8eb5e4aab","href":"https://static.observableusercontent.com/files/c52e200f2a0c3b907788b3ce75abfa6cab013d40502cc824e8b041c545dfd2f0a276efa4ec063f106c03254941cd1a21172b0f7bcbaa040211fe73d8eb5e4aab","name":"PHZ_ccsm45_2099.nc","type":"application/octet-stream","lastModified":1680879762196.978,"size":417224},{"id":"eb9aa348121ee1bc0306f4c021c98cb5aea4641800f48ece3acdf04bf4471263ab16f800683bba0a1bd46c01e3fe77103f4948cdd26649c32a5dbb1964d92b75","href":"https://static.observableusercontent.com/files/eb9aa348121ee1bc0306f4c021c98cb5aea4641800f48ece3acdf04bf4471263ab16f800683bba0a1bd46c01e3fe77103f4948cdd26649c32a5dbb1964d92b75","name":"cities.json","type":"application/json","lastModified":1680879762196.978,"size":971},{"id":"56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","href":"https://static.observableusercontent.com/files/56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","name":"usTopo.json","type":"application/json","lastModified":1680879762196.978,"size":60898},{"id":"44204ba535b42713937ce0515de94d3dd24f0663330f363c1138ef212e6c8d79296d619b357554c500248da3887c9195824eb324305aa4a5a41c8785c0e698a6","href":"https://static.observableusercontent.com/files/44204ba535b42713937ce0515de94d3dd24f0663330f363c1138ef212e6c8d79296d619b357554c500248da3887c9195824eb324305aa4a5a41c8785c0e698a6","name":"PHZ_gfdl85_2099.nc","type":"application/octet-stream","lastModified":1680894097716.521,"size":417456}] 2f:{"title":"Projected change in plant hardiness zones","cells":[{"id":0,"value":"# Projected change in plant hardiness zones","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"This notebook contains code to produce a version of the maps seen in [“Trees are moving north from global warming. Look up how your city could change.”](https://www.washingtonpost.com/climate-environment/interactive/2023/tree-species-climate-change-north-shift/), published in The Washington Post on Apr. 26, 2023.","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"As greenhouse gas emissions nudge temperatures higher, trees’ growing ranges are shifting northward, [projections from the U.S. Forest Service](https://www.fs.usda.gov/rds/archive/catalog/RDS-2019-0001) show. Trees near the southern edge of their geographic ranges — what scientists refer to as “plant hardiness zones” — will be left behind, while northern latitudes will welcome new species from the south.","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"viewof scenario = Inputs.radio([\"ccsm45\", \"gfdl85\"], { format: d => `RCP${d.slice(4, 5)}.${d.slice(5, 6)}`, value: \"ccsm45\", label: \"Scenario:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof year = Inputs.radio([\"2009\", \"2039\", \"2069\", \"2099\"], { format: d => `${d - 29}-${d}`, value: \"2039\", label: \"Time period:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`## Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"ticks = d3.range(1, 13)","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"colors = [\n \"#fefdeb\",\n \"#faf7b2\",\n \"#ecf060\",\n \"#cedb53\",\n \"#b0c646\",\n \"#94b23a\",\n \"#789d2e\",\n \"#807f22\",\n \"#7f6118\",\n \"#784410\",\n \"#6b290b\",\n \"#570e05\",\n \"#3c0000\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"color = phz => phz ? colors[phz] : \"#fff\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"height = width * 0.631","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"cellwidth = width / lons.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"cellheight = height / lats.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`## Geo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"projection = d3.geoAlbers()\n .fitSize([width, height], usGeoOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"// Filtered from Natural Earth (Admin 1 – States, provinces): https://www.naturalearthdata.com/downloads/50m-cultural-vectors/\nusTopo = FileAttachment(\"usTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"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":56,"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":58,"value":"cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"// Filtered from Natural Earth (Admin 0 – Countries): https://www.naturalearthdata.com/downloads/50m-cultural-vectors/\ncanmexTopo = FileAttachment(\"canmexTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"// Downloaded from Natural Earth (Ocean): https://www.naturalearthdata.com/downloads/50m-physical-vectors/\noceanTopo = FileAttachment(\"oceanTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"canmexGeo = topojson.feature(canmexTopo, canmexTopo.objects.ne_50m_admin_0_countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"oceanGeo = topojson.feature(oceanTopo, oceanTopo.objects.ne_50m_ocean)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"phzs = d3.range(-60, 80, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"phz_ccsm45_2009 = FileAttachment(\"PHZ_ccsm45_2009.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"phz_ccsm45_2039 = FileAttachment(\"PHZ_ccsm45_2039.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"phz_ccsm45_2069 = FileAttachment(\"PHZ_ccsm45_2069.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"phz_ccsm45_2099 = FileAttachment(\"PHZ_ccsm45_2099.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"phz_gfdl85_2009 = FileAttachment(\"PHZ_gfdl85_2009.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"phz_gfdl85_2039 = FileAttachment(\"PHZ_gfdl85_2039.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"phz_gfdl85_2069 = FileAttachment(\"PHZ_gfdl85_2069.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"phz_gfdl85_2099 = FileAttachment(\"PHZ_gfdl85_2099.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"// All files downloaded from here: https://www.fs.usda.gov/rds/archive/catalog/RDS-2019-0001\n// Coverted to NetCDF with GDAL\nfiles = ({\n phz_ccsm45_2009,\n phz_ccsm45_2039,\n phz_ccsm45_2069,\n phz_ccsm45_2099,\n phz_gfdl85_2009,\n phz_gfdl85_2039,\n phz_gfdl85_2069,\n phz_gfdl85_2099\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"nc = files[`phz_${scenario}_${year}`]\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"// Coerce invalid values to null\nvalues = nc.getDataVariable(\"Band1\")\n .map(d => d < -60 ? null : d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"lons = nc.getDataVariable(\"lon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"lats = nc.getDataVariable(\"lat\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"// Join the NetCDF variables\npoints = values\n .map((c, i) => {\n const lon = lons[i % lons.length]; // rows\n const lat = lats[(i / lons.length) | 0]; // columns\n const f = cToF(c); // convert Celsius to Fahrenheit\n return {\n lon,\n lat,\n c,\n f,\n phz: fToPhz(f) // convert Fahrenheit to PHZ\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"// Function to convert Fahrenheit to PHZ\nfunction fToPhz(f) {\n if (isNaN(f) || f === null || (f !== 0 && !f)) return undefined;\n \n if (f < phzs[0]) return 0;\n\n const l = phzs.length;\n \n if (f >= phzs[l - 1]) return l - 1;\n \n for (let i = 0; i < l; i++){\n const v0 = phzs[i];\n const v1 = phzs[i + 1];\n \n // PHZ is [v0, v1)\n if (f >= v0 && f < v1) {\n return i + 1;\n break;\n }\n }\n\n return undefined;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"// Function to convert Celsius to Fahrenheit\nfunction cToF(c) {\n return (isNaN(c) || c === null || (c !== 0 && !c)) ? undefined : c * 9 / 5 + 32;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"// Function to convert a string to slug case\nfunction 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":7,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"import { toc } from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"import { franklinLight } from \"1dec0e3505bd3624\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"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"}