3e:null 3f:["$","title",null,{"children":"CoMapeo Area Metrics: Footprint & Extent | Gregor MacLennan | Observable"}] 45:T635,for (const { scenario, footprint, extent } of results) { const footprintKm2 = footprint.area / 1e6; const extentKm2 = extent.area / 1e6; const share = (km2) => scenario.territoryKm2 > 0 ? ` (${((100 * km2) / scenario.territoryKm2).toFixed(0)} %)` : ""; const size = { width: 470, height: 340 }; let right; const left = scenarioMap({ ...size, toMetres: footprint.projection.toMetres, xyRecords: footprint.xyRecords, scenario, title: "Footprint", underlay: footprintUnderlay(footprint, buffer), legend: [{ ...bufferStyle, label: `within ${buffer} m of a record` }], onZoom: (transform) => right?.zoomTo(transform), }); right = scenarioMap({ ...size, toMetres: extent.projection.toMetres, xyRecords: extent.xyRecords, scenario, title: "Extent", overlay: extentOverlay(extent), legend: [ { ...keptStyle, label: "kept cluster extent" }, { ...droppedStyle, label: "dropped cluster" }, ], onZoom: (transform) => left.zoomTo(transform), }); display( html`

${scenario.name}

Footprint ${footprintKm2.toFixed(1)} km²${share(footprintKm2)} · Extent ${extentKm2.toFixed(1)} km²${share(extentKm2)} · territory ${scenario.territoryKm2.toFixed(1)} km²

${scenario.tests}

${left}

${right}

`, ); }46:Ta72,const bufferStyle = { shape: "area", fill: PALETTE.footprint, stroke: PALETTE.footprint, opacity: 0.45, }; const keptStyle = { shape: "area", fill: PALETTE.keptHull, "fill-opacity": 0.18, stroke: PALETTE.keptHull, "stroke-width": 1.4, }; const droppedStyle = { shape: "area", fill: "none", stroke: PALETTE.droppedHull, "stroke-width": 1.4, "stroke-dasharray": "2 4", }; function footprintUnderlay(footprint, buffer) { return ({ view, X, Y, k, pathOf }) => { const group = applyStyle(view.append("g"), bufferStyle); const points = footprint.xyRecords.filter( (record) => record.xy.length === 1, ); const lines = footprint.xyRecords.filter((record) => record.xy.length > 1); group .selectAll("circle") .data(points) .join("circle") .attr("cx", (record) => X(record.xy[0][0])) .attr("cy", (record) => Y(record.xy[0][1])) .attr("r", buffer * k); group .append("path") .attr("d", lines.map((record) => pathOf(record.xy)).join("")) .attr("fill", "none") .attr("stroke-width", 2 * buffer * k) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); }; } function extentOverlay(extent) { return ({ view, X, Y, k }) => { const pathOf = (segments) => segments .map( ([[ax, ay], [bx, by]]) => `M${X(ax).toFixed(1)},${Y(ay).toFixed(1)}L${X(bx).toFixed(1)},${Y(by).toFixed(1)}`, ) .join(""); for (const cluster of extent.clusters) { const style = cluster.kept ? keptStyle : droppedStyle; if (cluster.kept) { view .append("g") .attr("fill", style.fill) .attr("fill-opacity", style["fill-opacity"]) .selectAll("rect") .data(cluster.runs) .join("rect") .attr("x", (run) => X(run.x1)) .attr("y", (run) => Y(run.y2)) .attr("width", (run) => (run.x2 - run.x1) * k) .attr("height", (run) => (run.y2 - run.y1) * k); } applyStyle(view.append("path"), { ...style, fill: "none" }).attr( "d", pathOf(cluster.outline), ); view .append("text") .attr("x", X(cluster.centroid[0]) + 6) .attr("y", Y(cluster.centroid[1]) - 6) .attr("font-size", 11) .attr("font-family", "var(--sans-serif)") .attr("fill", style.stroke) .attr("stroke", PAPER) .attr("stroke-width", 3) .attr("paint-order", "stroke") .text( cluster.kept ? `cluster ${cluster.id}` : `cluster ${cluster.id} dropped: ${cluster.reason}`, ); } }; }47:[] 43:{"id":"eb3ad0084dd4f0fc","slug":"footprint-and-extent-side-by-side","title":"CoMapeo Area Metrics: Footprint & Extent","thumbnail":"2a2ea77cbff057a14eba410611d653faf321482202180dc179074325a80231ff","access_level":"public","create_time":"$D2026-09-18T12:11:53.858Z","update_time":"$D2026-10-14T16:48:48.194Z","view_time":null,"first_public_time":"$D2026-10-14T16:33:08.869Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b8f17b38290a2173","login":"gmaclennan","name":"Gregor MacLennan","avatar_url":"https://avatars-next.observableusercontent.com/63198fee32cdf9a62fee6dd70e000a4d5ed970cb33b7194192381ee674ab230d","tier":"starter_2024","bio":""},"version":56,"publish_version":56,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb7d131148ad1e60","login":"gmaclennan","name":"Gregor MacLennan","avatar_url":"https://avatars-next.observableusercontent.com/63198fee32cdf9a62fee6dd70e000a4d5ed970cb33b7194192381ee674ab230d","tier":null,"bio":""}],"members":[{"type":"team","id":"b8f17b38290a2173","login":"gmaclennan","name":"Gregor MacLennan","avatar_url":"https://avatars-next.observableusercontent.com/63198fee32cdf9a62fee6dd70e000a4d5ed970cb33b7194192381ee674ab230d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CoMapeo Area Metrics: Footprint & Extent","cells":[{"id":2,"value":"# CoMapeo Area Metrics: Footprint & Extent\n\nEvery scenario from the [scenarios](./scenarios) notebook, with its [footprint](./footprint) on the left and its [extent](./extent) on the right, and both figures against the territory the scenario was drawn from. The two maps of a scenario move together: drag, scroll or double-click on either.\n\nThe footprint is the ground within the buffer of any record, the lower figure. The extent grows every record by half the linking distance, fills encircled ground up to the chosen size, and shrinks back by that less the margin, the upper figure. The settings below apply to every scenario.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const buffer = view(\n Inputs.range([50, 1000], {\n label: \"Footprint buffer (m)\",\n step: 50,\n value: 500,\n }),\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const linkingKm = view(\n Inputs.range([0.5, 20], {\n label: \"Extent linking distance (km)\",\n step: 0.5,\n value: 5,\n }),\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const marginM = view(\n Inputs.range([0, 1000], {\n label: \"Extent margin (m)\",\n step: 50,\n value: 250,\n }),\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const holeKm2 = view(\n Inputs.range([0, 400], {\n label: \"Fill encircled ground up to (km²)\",\n step: 5,\n value: 25,\n }),\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const seed = view(\n Inputs.number([0, 999999], {\n label: \"Seed\",\n value: 1,\n step: 1,\n }),\n);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$45","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Drawing\n\nThe footprint is drawn as the exact buffer, a disc around each observation and a round-ended stroke along each track. The extent is drawn as each kept cluster's cells, with dropped clusters as a dotted outline. Both are the same drawings as in the notebooks they come from, without the counted cells and the grown shape.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$46","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Imports\n\nThe estimates come from the [footprint](./footprint) and [extent](./extent) notebooks, the data from [scenarios](./scenarios), and the map from [scenario map](./scenario-map).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {\n scenarioCatalogue,\n makeScenario,\n} from \"observable:@gmaclennan/scenarios\";\nimport {\n scenarioMap,\n applyStyle,\n PALETTE,\n PAPER,\n} from \"observable:@gmaclennan/scenario-map\";\nimport { footprintOf } from \"observable:@gmaclennan/footprint\";\nimport { extentOf } from \"observable:@gmaclennan/extent\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const results = scenarioCatalogue.map((spec) => {\n const scenario = makeScenario(spec, seed);\n return {\n scenario,\n footprint: footprintOf(scenario, {\n buffer,\n cellSize: 100,\n impliedPaths: true,\n }),\n extent: extentOf(scenario, {\n linkingKm,\n marginM,\n holeKm2,\n cellSize: 100,\n strayKm: 50,\n impliedPaths: true,\n }),\n };\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 44:"$43:body"