31:Tfca,map = () => { const wrapper = d3.create("div") .style("width", `${width}px`) .style("height", `${height}px`) .style("position", "relative"); wrapper.append("style").html(css); // Raster layer 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((d, i) => { const { lon, lat } = d; const color_prop = color(d); let c = color_prop ? colors[color_prop] : "#fff"; const p = projection([lon, lat]); // This seems to line up const x = p[0] - cellwidth / 2; const y = p[1] - cellheight * 2; context.fillStyle = c; context.strokeStyle = c; context.fillRect(x, y, cellwidth, cellheight); context.strokeRect(x, y, cellwidth, cellheight); }); // Fast clip by overlaying 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(); }); // Draw the boundaries on the raster context.beginPath(); path(usGeoInner); context.strokeStyle = "#e9e9e9" context.stroke(); context.beginPath(); path(usGeoOuter); context.strokeStyle = "#d5d5d5" context.stroke(); // Vector layor const svg = wrapper.append("svg") .style("position", "absolute") .attr("width", width) .attr("height", height); // Add legend explaining range outline const legendPolygonWidth = 12; const legendPolygonHeight = 16; const legendPoints = [ [0, 0], [0, legendPolygonHeight / 2], [2, legendPolygonHeight / 2], [2, legendPolygonHeight], [legendPolygonWidth, legendPolygonHeight], [legendPolygonWidth, 0], [0, 0] ]; const legendG = svg.append("g") .attr("transform", `translate(${[width * (rangeKeyLeft(width)), height * (rangeKeyTop(width))]})`); legendG.append("polygon") .attr("fill", "none") .attr("stroke", "black") .attr("points", legendPoints); legendG.append("text") .attr("font-family", franklinLight) .attr("x", legendPolygonWidth + 4) .attr("y", legendPolygonHeight * 0.5 + 5) .text("Typical range"); // Highlight typical growing range with subtle inner glow // See also https://observablehq.com/@veltman/inner-glow path.context(null) const defs = svg.append("defs") defs .append("filter") .attr("id", "blur") .append("feGaussianBlur") .attr("color-interpolation-filters", "sRGB") // for better results in Safari .attr("stdDeviation", 2); defs.append("clipPath") .datum(range) .attr("id", "clip-path") .append("path") .attr("d", path); svg.append("path") .datum(range) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("stroke-opacity", 0.8) .attr("stroke-width", 1) .attr("d", path) svg.append("path") .datum(range) .attr("d", path) .attr("clip-path", "url(#clip-path)") .attr("filter", "url(#blur)") .style("stroke", "black") .style("opacity", 0.8) .style("fill", "none"); 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(); }32:T5d1,legend = () => html`

`33:T66a,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: ${width <= 900 ? "end" : "start"}; transform: translate(${width <= 900 ? "-4px" : "4px"}, -4px); } .city.chicago text { text-anchor: ${width <= 620 ? "end" : "start"}; transform: translate(${width <= 620 ? "-4px" : "4px"}, -4px); } .city.minneapolis { display: ${width <= 480 ? "none" : "block"}; } .city.new-york text { text-anchor: ${width <= 660 ? "end" : "start"}; transform: translate(${width <= 600 ? "-4px" : "4px"}, -4px); } .city.philadelphia { display: ${width <= 480 ? "none" : "block"}; } .city.philadelphia text { text-anchor: ${width <= 768 ? "end" : "start"}; transform: translate(${width <= 768 ? "-6px" : "6px"}, 4.5px); } .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 <= 400 ? "end" : width <= 768 ? "middle" : "start"}; transform: ${width <= 400 ? "translate(-4px, 13px)" : width <= 768 ? "translate(0px, 16px)" : "translate(4px, 13px)"}; } .city text { font-size: ${width <= 480 ? "14px" : "16px"}; 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":"b1fab08a21937a61a0a3ffbe8d885b2ea6498b3365a80783579b2d70965618537835b348d7a86f648f43114fa0af3c359557095b494562cfc721d1d059f3770b","href":"https://static.observableusercontent.com/files/b1fab08a21937a61a0a3ffbe8d885b2ea6498b3365a80783579b2d70965618537835b348d7a86f648f43114fa0af3c359557095b494562cfc721d1d059f3770b","name":"ne_50m_ocean.json","type":"application/json","lastModified":1681934886118.837,"size":560350},{"id":"3bc041d51d756afff7c1dd966f2baef3a4e1d2ecee220810d14d7f497fb1cff9d730cd0dc0878e7a2a9fc87daaf1a0b2cee4e9d324baf3087c2a4e94ce4c7340","href":"https://static.observableusercontent.com/files/3bc041d51d756afff7c1dd966f2baef3a4e1d2ecee220810d14d7f497fb1cff9d730cd0dc0878e7a2a9fc87daaf1a0b2cee4e9d324baf3087c2a4e94ce4c7340","name":"ne_50m_admin_0_countries.json","type":"application/json","lastModified":1681934886118.837,"size":115078},{"id":"18b60a3dbe7de16187b0b36d1bfe5b58b93610868ab453e8979e99dcb8ed6b30672bdc5a3a07d043eafa40db0fe0fcfb9d357e337c967f318ae20ccc7c90f314","href":"https://static.observableusercontent.com/files/18b60a3dbe7de16187b0b36d1bfe5b58b93610868ab453e8979e99dcb8ed6b30672bdc5a3a07d043eafa40db0fe0fcfb9d357e337c967f318ae20ccc7c90f314","name":"species@1.json","type":"application/json","lastModified":1682358774931.566,"size":172892},{"id":"c52e200f2a0c3b907788b3ce75abfa6cab013d40502cc824e8b041c545dfd2f0a276efa4ec063f106c03254941cd1a21172b0f7bcbaa040211fe73d8eb5e4aab","href":"https://static.observableusercontent.com/files/c52e200f2a0c3b907788b3ce75abfa6cab013d40502cc824e8b041c545dfd2f0a276efa4ec063f106c03254941cd1a21172b0f7bcbaa040211fe73d8eb5e4aab","name":"PHZ_ccsm45_2099.nc","type":"application/octet-stream","lastModified":1681934886118.837,"size":417224},{"id":"eb9aa348121ee1bc0306f4c021c98cb5aea4641800f48ece3acdf04bf4471263ab16f800683bba0a1bd46c01e3fe77103f4948cdd26649c32a5dbb1964d92b75","href":"https://static.observableusercontent.com/files/eb9aa348121ee1bc0306f4c021c98cb5aea4641800f48ece3acdf04bf4471263ab16f800683bba0a1bd46c01e3fe77103f4948cdd26649c32a5dbb1964d92b75","name":"cities.json","type":"application/json","lastModified":1681934886118.837,"size":971},{"id":"56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","href":"https://static.observableusercontent.com/files/56a937c80f80e07670aa7644167e8649b2a03cc133fb5191e08e9621f812e49af52ce298a5b90de6fe3789d53efe79d3ef673196ad962bfa2a2a672c00cee409","name":"usTopo.json","type":"application/json","lastModified":1681934886118.837,"size":60898},{"id":"e75069dcff747994048841d198b6bd2fb7f0a7bc6f53e19a7b9d2ea2027d747d18db4d8348a9ca6f7c4ed4b137751adb7193ca588eccbaf33f932e8fef3d56da","href":"https://static.observableusercontent.com/files/e75069dcff747994048841d198b6bd2fb7f0a7bc6f53e19a7b9d2ea2027d747d18db4d8348a9ca6f7c4ed4b137751adb7193ca588eccbaf33f932e8fef3d56da","name":"PHZ_ccsm45_2069.nc","type":"application/octet-stream","lastModified":1681934886118.837,"size":417456},{"id":"cd418b049944d2fc158952fba69cad2a7341b2347bd75fb56b0b0d0a83956e13d40c56553c3bbac416b4c93b6fa90573a7bb8739346ce7f19b3cf8177c0e022a","href":"https://static.observableusercontent.com/files/cd418b049944d2fc158952fba69cad2a7341b2347bd75fb56b0b0d0a83956e13d40c56553c3bbac416b4c93b6fa90573a7bb8739346ce7f19b3cf8177c0e022a","name":"PHZ_ccsm45_2039.nc","type":"application/octet-stream","lastModified":1681934886118.837,"size":417456}] 2f:{"title":"Where will trees move in the future?","cells":[{"id":0,"value":"# Where will trees move in the future?","pinned":false,"hidden":false,"mode":"md"},{"id":951,"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":953,"value":"The list of tree species and their hardiness zones was provided by the Davey Tree Expert Company. Out of curiosity, I added entries for European linden, giant sequoia, Monterey pine, sweetbay magnolia and southern magnolia. I found each species’ typical growing range in the [U.S. Department of Agriculture’s PLANTs database](https://plants.usda.gov/home), which is good enough for government work but does not align perfectly with every species.","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"viewof tree = Inputs.select(treesSorted, { format: d => `${d.name_common} (${d.name_scientific})`, label: \"Select a tree:\", value: species.find(d => d.name_common === \"Gray birch\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"phz_min = tree.hardiness_min","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"phz_max = tree.hardiness_max","pinned":true,"hidden":false,"mode":"ojs"},{"id":979,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"md`## Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"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":573,"value":"colors = ({\n gone_2069: \"#b43b13\",\n gone_2099: \"#e79174\",\n current: \"#b2d6a0\",\n new_2069: \"#1366b3\",\n new_2099: \"#84a4d7\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"color = d => {\n const {phz_2009, phz_2039, phz_2069, phz_2099} = d;\n if (!phz_2009 && !phz_2039 && !phz_2069 && !phz_2099) return null;\n \n const is = phz => phz >= phz_min && phz <= phz_max;\n const is_2009 = is(phz_2009);\n const is_2039 = is(phz_2039);\n const is_2069 = is(phz_2069);\n const is_2099 = is(phz_2099);\n \n if ((!is_2069 || !is_2099) && is_2039) {\n if (!is_2069) return \"gone_2069\";\n return \"gone_2099\";\n }\n if ((is_2069 || is_2099) && !is_2039){\n if (is_2069) return \"new_2069\";\n return \"new_2099\";\n }\n if (is_2039) return \"current\";\n\n return null;\n}","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":956,"value":"rangeKeyLeft = ww => ww <= 400 ? 0.08 : ww <= 768 ? 0.1 : 0.72;","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"rangeKeyTop = ww => ww <= 768 ? 0.9 : 0.1;","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":808,"value":"// Outline for inner glow tree range\nrange = topojson.merge(usTopo, usTopo.objects.ne_50m_admin_1_states_provinces_lakes.geometries.filter(d => tree.states.includes(d.properties.postal)))","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":629,"value":"usGeo = topojson.feature(usTopo, usTopo.objects.ne_50m_admin_1_states_provinces_lakes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"canmexTopo = FileAttachment(\"ne_50m_admin_0_countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"// Filtered from Natural Earth (Admin 0 – Countries): https://www.naturalearthdata.com/downloads/50m-cultural-vectors/\ncanmexGeo = topojson.feature(canmexTopo, canmexTopo.objects.ne_50m_admin_0_countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"// Downloaded from Natural Earth (Ocean): https://www.naturalearthdata.com/downloads/50m-physical-vectors/\noceanTopo = FileAttachment(\"ne_50m_ocean.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"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":406,"value":"// via the U.S. Forest Service https://www.fs.usda.gov/rds/archive/catalog/RDS-2019-0001\n// converted to NetCDF with GDAL\nphz_ccsm45_2039 = FileAttachment(\"PHZ_ccsm45_2039.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"// via the U.S. Forest Service https://www.fs.usda.gov/rds/archive/catalog/RDS-2019-0001\n// converted to NetCDF with GDAL\nphz_ccsm45_2069 = FileAttachment(\"PHZ_ccsm45_2069.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"// via the U.S. Forest Service https://www.fs.usda.gov/rds/archive/catalog/RDS-2019-0001\n// converted to NetCDF with GDAL\nphz_ccsm45_2099 = FileAttachment(\"PHZ_ccsm45_2099.nc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"nc_ccsm45_2039 = phz_ccsm45_2039\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"nc_ccsm45_2069 = phz_ccsm45_2069\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"nc_ccsm45_2099 = phz_ccsm45_2099\n .arrayBuffer()\n .then((buffer) => new netcdf(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"values_ccsm45_2039 = nc_ccsm45_2039.getDataVariable(\"Band1\")\n .map(d => d < -60 ? null : d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"values_ccsm45_2069 = nc_ccsm45_2069.getDataVariable(\"Band1\")\n .map(d => d < -60 ? null : d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"values_ccsm45_2099 = nc_ccsm45_2099.getDataVariable(\"Band1\")\n .map(d => d < -60 ? null : d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"lons = nc_ccsm45_2039.getDataVariable(\"lon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"lats = nc_ccsm45_2039.getDataVariable(\"lat\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"// Combine values from the three time ranges\n// The (lat, lon) pairs have the same indexes in each NetCDF\npoints = values_ccsm45_2039\n .map((c_2039, i) => {\n const lon = lons[i % lons.length];\n const lat = lats[(i / lons.length) | 0];\n const f_2039 = cToF(c_2039);\n\n const c_2069 = values_ccsm45_2069[i];\n const f_2069 = cToF(c_2069);\n\n const c_2099 = values_ccsm45_2099[i];\n const f_2099 = cToF(c_2099);\n \n return {\n lon,\n lat,\n phz_2039: fToPhz(f_2039),\n phz_2069: fToPhz(f_2069),\n phz_2099: fToPhz(f_2099)\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"// Sorted for dropdown menu\ntreesSorted = species.sort((a, b) => d3.ascending(a.name_common, b.name_common))","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"// via the Davey Tree Expert company, filtered to include only species in the continental U.S.\n// As mentioned at the top of this notebook, I added a few species of my own\nspecies = FileAttachment(\"species@1.json\").json()","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":981,"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"}