31:T970,legend = () => { const wrapper = d3.create("div"); wrapper.append("div") .style("display", "inline-block") .style("font-family", franklinLight) .style("margin-right", "8px") .text("Miles to border"); const legendScale = d3.scaleLinear([0, 1], [0, 100]); const swatchWidth = legendScale.range()[1] / 4; const lastSwatchWidth = 50; const height = 12; const tickPadding = 3; const tickHeight = 3; const margin = {left: 0, right: 1, top: 16, bottom: 0} const width = swatchWidth * 4 + lastSwatchWidth; const gradientScale = d3.scaleLinear([0, 1 / 24 * lastSwatchWidth, lastSwatchWidth], [0, 1 / 12 * 100, 100]); const gradient = gradientLinear() .colors([colors[3], colors[4], colors[colors.length - 1]]) .offsets(gradientScale.domain().map(gradientScale)) const svg = wrapper.append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("display", "inline-block") .call(gradient); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`) const swatch = g.selectAll(".swatch") .data([0, 0.1, 0.2, 0.5, 1]) .join("rect") .attr("class", "swatch") .attr("x", legendScale) .attr("width", (d, i, e) => { if (i === e.length - 1) return lastSwatchWidth; const x0 = legendScale(d); const x1 = legendScale(values[i + 1]) return x1 - x0; }) .attr("height", height) .attr("fill", (d, i, e) => i < e.length - 1 ? c0(d) : `url(#${gradient.id()})`); const ignore = [0.2]; const line = g.selectAll(".line") .data([0.1, 0.2, 0.5, 1, 25]) .join("line") .attr("class", "line") .attr("transform", (d, i, e) => `translate(${i === e.length - 1 ? width : legendScale(d)})`) .attr("y1", d => ignore.includes(d) ? 0 : -tickHeight) .attr("y2", height) .attr("stroke", "black"); const value = g.selectAll(".value") .data([0.1, 0.5, 1, 25]) .join("text") .attr("class", "value") .attr("font-family", franklinLight) .attr("font-size", 14) .attr("text-anchor", (d, i, e) => i === e.length - 1 ? "end" : "middle") .attr("x", (d, i, e) => i === e.length - 1 ? width : legendScale(d)) .attr("y", -tickHeight - tickPadding) .text(d => d); return wrapper.node() }32:T41c,gridData = { const contextSign = DOM.context2d(mapwidth, mapheight, 1); const pathSign = d3.geoPath(projection, contextSign); contextSign.fillStyle = "rgb(40, 0, 120)"; contextSign.fillRect(0, 0, mapwidth, mapheight); contextSign.fillStyle = "rgb(120, 170, 0)"; contextSign.beginPath(); pathSign(geo); contextSign.fill(); const dataSign = contextSign.getImageData(0, 0, mapwidth, mapheight).data; const contextStroke = DOM.context2d(mapwidth, mapheight, 1); const pathStroke = d3.geoPath(projection, contextStroke); contextStroke.strokeStyle = "black"; contextStroke.lineWidth = 0.5; contextStroke.beginPath(); pathStroke(geo); contextStroke.stroke(); const dataStroke = contextStroke.getImageData(0, 0, mapwidth, mapheight).data; const N = mapwidth * mapheight; const sign = new Uint8Array(N); const stroke = new Float64Array(N); for (let i = 0; i < N; i++) { sign[i] = dataSign[4 * i + 1] > 40 ? 1 : 0; stroke[i] = dataStroke[4 * i + 3] > 0 ? 0 : INF; } return { sign, stroke } }33:T453,options = [{ name: "Yellowstone National Park", geo: yellowstoneGeo, bounds: featureFromBounds(d3.geoBounds(yellowstoneGeo)), width: 600 }, { name: "Bicuar National Park", geo: bicuarGeo, bounds: featureFromBounds(d3.geoBounds(bicuarGeo), 1.6), width: 640 }, { name: "Mongaup Valley Wildlife Management Area", geo: mongaupGeo, bounds: featureFromBounds(d3.geoBounds(mongaupGeo), 2), width: 640 }, { name: "Oak Creek Wildlife Area Complex", geo: oakcreekGeo, bounds: featureFromBounds(d3.geoBounds(oakcreekGeo), 2.2), width: 640 }, { name: "St. Croix National Scenic Riverway", geo: stcroixGeo, bounds: featureFromBounds(d3.geoBounds(stcroixGeo)), width: 640 }, { name: "Nyae Nyae Conservancy", geo: nyaenyaeGeo, bounds: featureFromBounds(d3.geoBounds(nyaenyaeGeo)), width: 640 }, { name: "Uatumã Biological Reserve", geo: uatamaGeo, bounds: featureFromBounds(d3.geoBounds(uatamaGeo)), width: 640 }, { name: "Nanda Devi National Park", geo: nandadeviGeo, bounds: featureFromBounds(d3.geoBounds(nandadeviGeo)), width: 640, scaleDistance: 2 }]34:[{"id":"9adff11e291dd1fa3395b5260f11928b8966399e45dedc703f57d7b117187a69ff3923bb1e3431871a7c59668d99630caf4467397af0c10ca3913a290984b0df","href":"https://static.observableusercontent.com/files/9adff11e291dd1fa3395b5260f11928b8966399e45dedc703f57d7b117187a69ff3923bb1e3431871a7c59668d99630caf4467397af0c10ca3913a290984b0df","name":"oakcreek.json","type":"application/json","lastModified":1707488743147.636,"size":11344},{"id":"87db3cb8af67130e0be7707ab87906d1bd499fa74a8feaab760cb026408d9af081462a2de0cab7b9954f284863fd696e4c53af84f4a43c17316794c5db42dd45","href":"https://static.observableusercontent.com/files/87db3cb8af67130e0be7707ab87906d1bd499fa74a8feaab760cb026408d9af081462a2de0cab7b9954f284863fd696e4c53af84f4a43c17316794c5db42dd45","name":"stcroix.json","type":"application/json","lastModified":1707524144672.172,"size":215648},{"id":"4dd9cb6f16109bd5a0e4f82a60097c8e3eaf4c737f3e9e4f4b898621569e220ec9b075ae9d10f8101de70eb756ee832a88ba39ed4cb255d5031a7791fc5cfa84","href":"https://static.observableusercontent.com/files/4dd9cb6f16109bd5a0e4f82a60097c8e3eaf4c737f3e9e4f4b898621569e220ec9b075ae9d10f8101de70eb756ee832a88ba39ed4cb255d5031a7791fc5cfa84","name":"uatuma.json","type":"application/json","lastModified":1707773630462.754,"size":12746},{"id":"1af589617402bd71397599504bf231b78b15c18f5369357d642682b99aadb5169f91a33bba16a353767e8813f8da5e1b5f8b1484d19f90e2032d57f34eba605d","href":"https://static.observableusercontent.com/files/1af589617402bd71397599504bf231b78b15c18f5369357d642682b99aadb5169f91a33bba16a353767e8813f8da5e1b5f8b1484d19f90e2032d57f34eba605d","name":"nandadevi.json","type":"application/json","lastModified":1707773775047.791,"size":13054},{"id":"220b793fc69182225263b5f53df89c441e132b4548948f65f815fe0450d14f67bcd03d9a8052ede31daa44217ecf7786da39b08b32dd620d191855cce60ef59f","href":"https://static.observableusercontent.com/files/220b793fc69182225263b5f53df89c441e132b4548948f65f815fe0450d14f67bcd03d9a8052ede31daa44217ecf7786da39b08b32dd620d191855cce60ef59f","name":"yellowstone@1.json","type":"application/json","lastModified":1707878193613.966,"size":51357},{"id":"ff13375f5fc18cf0b31793c8d91ce2a243431115af49d492a1719af8407dc42325ceea42d926733ea6181bcb15c51f5d4ca237b3c8da8e4b5c5d0f34db6cc06f","href":"https://static.observableusercontent.com/files/ff13375f5fc18cf0b31793c8d91ce2a243431115af49d492a1719af8407dc42325ceea42d926733ea6181bcb15c51f5d4ca237b3c8da8e4b5c5d0f34db6cc06f","name":"bicuar.json","type":"application/json","lastModified":1707878233307.597,"size":23823},{"id":"676f7a93fbc29d910bedf004c0519fc761269a2f389df89db4932ab37911c9295ec805ebdb3bece7cf5a79cb17ab41dfd66880d5b32df85f322b95c9d55bd3ed","href":"https://static.observableusercontent.com/files/676f7a93fbc29d910bedf004c0519fc761269a2f389df89db4932ab37911c9295ec805ebdb3bece7cf5a79cb17ab41dfd66880d5b32df85f322b95c9d55bd3ed","name":"mongaup.json","type":"application/json","lastModified":1707878246659.529,"size":35057},{"id":"a9182db57992db35237fb2c9e94a6976801dac97c18bdb1394d45bcdb26c6a50f282c09a3e5df26e36b2780f0e3a19ae52770831ca7ae3c57d63ea1ce46bdc82","href":"https://static.observableusercontent.com/files/a9182db57992db35237fb2c9e94a6976801dac97c18bdb1394d45bcdb26c6a50f282c09a3e5df26e36b2780f0e3a19ae52770831ca7ae3c57d63ea1ce46bdc82","name":"nyaenyae.json","type":"application/json","lastModified":1707878282358.663,"size":2001}] 2f:{"title":"Distance to the border of protected areas","cells":[{"id":0,"value":"# Distance to the border of protected areas\n\nVersions of these maps appeared in the story “[Can we save nature with crazy shapes?](https://www.washingtonpost.com/climate-environment/interactive/2024/can-we-save-nature-with-crazy-shapes/)”, published in The Washington Post on Feb. 14, 2024. Just for fun, I included some extra protected areas in this notebook.\n\nThe algorithms in this notebook were implemented by [Volodymyr Agafonkin](https://observablehq.com/@mourner/fast-distance-transform) and [Philippe Rivière](https://observablehq.com/@visionscarto/spherical-signed-distance). I am especially grateful to Philippe for helping me get the code to work with random polygons.","pinned":false,"hidden":false,"mode":"md"},{"id":1294,"value":"viewof area = Inputs.select(options, { format: d => d.name, label: \"Select an area:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1932,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1937,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"In [research](https://www.nature.com/articles/s41893-023-01243-0) published in the journal Nature Sustainability, Santiago Schauman and colleagues analyzed the shapes of more than 200,000 protected areas in [the database](https://www.protectedplanet.net/en/thematic-areas/wdpa?tab=WDPA) the U.N. uses to track progress toward its 30-percent goal. They found many protected areas punctured with holes, like moth-eaten rags. Some areas are narrow and twirl like noodles. Others are contorted like gerrymandered congressional districts.\n\nSize matters, but shape matters just as much, Schauman told me. Large, round tracts of land are simply better at protecting wildlife than smaller, misshapen ones. “Nobody is discussing,” Schauman said, “that it is not the same to protect spaghetti as big, compact areas.”","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"toc({heading: \"Jump to:\", selector: \"h2\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":1185,"value":"map = () => {\n const context = DOM.context2d(mapwidth, mapheight, 1);\n \n sdf.forEach((v, i) => {\n if (v > 0) {\n const x = i % mapwidth;\n const y = (i / mapwidth) | 0;\n const c = color(v)\n context.fillStyle = c;\n context.fillRect(x, y, 1, 1); \n }\n });\n \n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1767,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1251,"value":"## Style","pinned":false,"hidden":false,"mode":"md"},{"id":1689,"value":"colors = [\"#007c71\", \"#07a699\", \"#1bd2c3\", \"#34ffef\", \"#cafff9\", \"#e6fffc\", \"#ffffff\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1694,"value":"values = [0, 0.1, 0.2, 0.5, 1, 2, 5, 10, 25]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1734,"value":"c0 = scaleColor(values, colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1708,"value":"c1 = d3.scaleSequential([1, 2], interpolatePalette([colors[3], colors[4]]));","pinned":true,"hidden":false,"mode":"ojs"},{"id":1716,"value":"c2 = d3.scaleSequential([2, 25], interpolatePalette(colors.slice(4)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1180,"value":"color = value => value <= 1 ? c0(value) : value <= 2 ? c1(value) : c2(value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"sdf = {\n const { stroke, sign } = gridData;\n const grid = Float64Array.from(stroke);\n const edt = edt1d(mapwidth, mapheight, grid);\n\n for (let x = 0; x < mapwidth; x++) { // transform each column\n edt(x, mapwidth, mapheight);\n }\n for (let y = 0; y < mapheight; y++) { // transform each row\n edt(y * mapwidth, 1, mapwidth);\n }\n\n // apply sign\n for (let i = 0, n = mapwidth * mapheight; i < n; i++)\n grid[i] = pixelToMiles(Math.sqrt(grid[i]) * (sign[i] * 2 - 1));\n\n return grid\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1079,"value":"pixelToMiles = d3.scaleLinear().domain([0, mapwidth]).range([0, max])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1132,"value":"max = {\n projection.fitSize([mapwidth, mapheight], geo);\n const p0 = projection.invert([0, 0]);\n const p1 = projection.invert([mapwidth, 0]);\n return d3.geoDistance(p0, p1) * 3958.7613;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1345,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1246,"value":"## Geo","pinned":false,"hidden":false,"mode":"md"},{"id":1567,"value":"// The maximum distance from the border\ngeoMax = d3.max(sdf)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"// The area of the protected area\ngeoArea = geoToArea(geo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1574,"value":"// The radius of a circle with the area of the protected area\ngeoRadius = areaToRadius(geoArea)","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"geo = area.geo","pinned":true,"hidden":false,"mode":"ojs"},{"id":1401,"value":"bounds = area.bounds","pinned":true,"hidden":false,"mode":"ojs"},{"id":1292,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1982,"value":"nandadeviGeo = {\n const topo = await FileAttachment(\"nandadevi.json\").json()\n return topojson.feature(topo, topo.objects.nandadevi)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1978,"value":"uatamaGeo = {\n const topo = await FileAttachment(\"uatuma.json\").json()\n return topojson.feature(topo, topo.objects.uatama)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1967,"value":"nyaenyaeGeo = {\n const topo = await FileAttachment(\"nyaenyae.json\").json();\n return topojson.feature(topo, topo.objects.nyaenyae);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"mongaupGeo = {\n const topo = await FileAttachment(\"mongaup.json\").json();\n return topojson.feature(topo, topo.objects.mongaup);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"bicuarGeo = {\n const topo = await FileAttachment(\"bicuar.json\").json();\n return topojson.feature(topo, topo.objects.bicuar);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1274,"value":"yellowstoneGeo = {\n const topo = await FileAttachment(\"yellowstone@1.json\").json();\n return topojson.feature(topo, topo.objects.yellowstone)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1432,"value":"oakcreekGeo = {\n const topo = await FileAttachment(\"oakcreek.json\").json();\n return topojson.feature(topo, topo.objects.oakcreek);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1490,"value":"stcroixGeo = {\n const topo = await FileAttachment(\"stcroix.json\").json()\n return topojson.feature(topo, topo.objects.stcroix)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1240,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":1637,"value":"mapwidth = Math.min(width, 640)","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"mapheight = fitWidth(projection, mapwidth, bounds);","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"INF = 1e8","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"// Adapted from https://observablehq.com/@mourner/fast-distance-transform\nfunction edt1d(width, height, grid){\n const v = new Uint16Array(Math.max(width, height));\n const z = new Float64Array(Math.max(width, height) + 1);\n const f = new Float64Array(Math.max(width, height));\n v[0] = 0;\n z[0] = -INF;\n z[1] = INF;\n\n return (offset, stride, length) => {\n for (let q = 0; q < length; q++) f[q] = grid[offset + q * stride];\n\n for (let q = 1, k = 0, s = 0; q < length; q++) {\n do {\n const r = v[k];\n s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2;\n } while (s <= z[k--]);\n \n k += 2;\n v[k] = q;\n z[k] = s;\n z[k + 1] = INF;\n }\n \n for (let q = 0, k = 0; q < length; q++) {\n while (z[k + 1] < q) k++;\n const r = v[k];\n grid[offset + q * stride] = f[r] + (q - r) * (q - r);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"// Adapted from https://observablehq.com/@d3/projection-comparison\nfunction fitWidth(projection, width, data) {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, data)).bounds(data);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.fitSize([width, dy], data);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1396,"value":"function featureFromBounds(bounds, aspect) {\n let [[x0, y0], [x1, y1]] = bounds;\n if (aspect) {\n const ydist = y1 - y0;\n const xmid = 0.5 * (x1 + x0);\n const xdist = ydist * aspect;\n x0 = xmid - xdist / 2;\n x1 = xmid + xdist / 2;\n }\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [[\n [x0, y0],\n [x0, y1],\n [x1, y1],\n [x1, y0],\n [x0, y0]\n ]]\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1469,"value":"function geoToArea(geo) {\n return d3.sum(geo.features, d => (d.properties.rep_area || d.properties.REP_AREA) * 0.386102)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"function areaToRadius(area) {\n return Math.sqrt(area / Math.PI);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2035,"value":"import { scaleColor } from \"@climatelab/threshold-legend@145\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"import {toc} from \"@climatelab/toc@44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1220,"value":"import { gradientLinear } from \"@washpostgraphics/gradient-generators\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1703,"value":"import { interpolatePalette } from \"@climatelab/roll-your-own-color-palette-interpolator@326\";","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}