45:["$","title",null,{"children":"Wildfire Burn Severity | geo-theo | Observable"}] 4d:T487,

# Hypothesis Wind and topography have an important role to play in where fire spreads, but I am curious about the way that burn severity spreads along hills and ridges. Trying to get any wind data will be far too much of an estimated raster value, but we can possibly explore the relationship between topography and burn severity. Looking at timestamped perimeter data seems to show that fires spread faster uphill (this will be explored further in Project 5). Assuming that wind travels and carries fire faster up hillsides, would the burn severity be more intensive or would it be passing so fast to be not as severe of a burn? I am not sure either way, but if we want to test the logic that the time a fire spends initially burning in an area affects the severity of the burn, then the hypothesis will be that fires moving up in elevation are moving faster but burn fuels less severely due to spending less 'spread time' in the area. - _**Null hypothesis: areas are burned just as severely at the maximum height of the fire than they are at the lowest point of the fire.**_ - _**Hypothesis: Burn-severity decreases as fires ascend in elevation.**_4e:T11c9,{ const years = [...new Set(calendarCountData.map(d => d.year))] .sort(d3.descending); const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const monthStarts = calendarCountData.filter( d => d.date.getUTCDate() === 1 ); const formatDate = d3.utcFormat("%B %d, %Y"); const formatMonth = d3.utcFormat("%b"); const formatCount = d3.format(",d"); const maxCount = d3.max(calendarCountData, d => d.count); const colorDomain = [0, maxCount]; const colorRange = ["#fff5eb", "#7f2704"]; const colorFor = d3.scaleLinear() .domain(colorDomain) .range(colorRange) .clamp(true); // Stepped dividers follow the first day of each new month. const monthDividers = []; for (const d of monthStarts) { if (d.month === 0) continue; const w = d.week; const day = d.weekday; const points = day === 0 ? [[w, 0], [w, 7]] : [[w + 1, 0], [w + 1, day], [w, day], [w, 7]]; for (let i = 1; i < points.length; i++) { monthDividers.push({ year: d.year, x1: points[i - 1][0], y1: points[i - 1][1], x2: points[i][0], y2: points[i][1] }); } } const weekdayLabels = years.flatMap(year => weekdays.map((label, day) => ({year, day, label})) ); // Keep the cells large enough to read; scroll on narrow screens. const chartWidth = Math.max(1152, width); const cellSize = (chartWidth - 20) / 57; const chart = Plot.plot({ title: "Fire count calendar", subtitle: "Daily fire records by start date", width: chartWidth, height: Math.ceil(years.length * cellSize * 10), marginTop: 10, marginBottom: 10, marginLeft: 10, marginRight: 10, axis: null, style: { background: "white", color: "black", fontFamily: "system-ui, sans-serif", fontSize: "10px", maxWidth: "none" }, x: { type: "linear", domain: [-3, 54], nice: false }, y: { type: "linear", domain: [7, -1.5], nice: false }, fy: { domain: years, padding: 0.15 }, color: { type: "linear", domain: colorDomain, range: colorRange, clamp: true, legend: true, label: "Fire records per day", tickFormat: d3.format("d") }, marks: [ // One square for every calendar day. Plot.rect(calendarCountData, { fy: "year", x1: d => d.week, x2: d => d.week + 1, y1: d => d.weekday, y2: d => d.weekday + 1, fill: "count", inset: 0.5, title: d => `${formatDate(d.date)}\n` + `Fire records: ${formatCount(d.count)}`, tip: true }), // Day-of-month numbers. Plot.text(calendarCountData, { fy: "year", x: d => d.week + 0.5, y: d => d.weekday + 0.5, text: d => String(d.date.getUTCDate()), fill: d => d3.lab(colorFor(d.count)).l < 55 ? "white" : "black", fontSize: 9, pointerEvents: "none" }), // Month boundaries. Plot.link(monthDividers, { fy: "year", x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "black", strokeWidth: 0.8, pointerEvents: "none" }), // Month names. Plot.text(monthStarts, { fy: "year", x: d => d.week + 0.5, y: () => -0.6, text: d => formatMonth(d.date), textAnchor: "start", fill: "black", fontSize: 11 }), // Weekday labels. Plot.text(weekdayLabels, { fy: "year", x: () => -0.4, y: d => d.day + 0.5, text: "label", textAnchor: "end", fill: "black", fontSize: 10 }), // Year labels above each calendar. Plot.text(years.map(year => ({year})), { fy: "year", x: () => -0.4, y: () => -0.6, text: d => String(d.year), textAnchor: "end", fill: "black", fontSize: 12, fontWeight: "bold" }) ] }); Object.assign(chart.style, { background: "white", color: "black", margin: "0", maxWidth: "none" }); chart.querySelectorAll("h2, h3").forEach(heading => { heading.style.color = "black"; }); const container = document.createElement("div"); Object.assign(container.style, { background: "white", color: "black", overflowX: "auto", maxWidth: "100%" }); container.append(chart); return container; }4f:T7e9,{ const background = "#2b2b2b"; const orange = "#e87524"; const lightGrey = "#d9d9d9"; const chart = Plot.plot({ title: "Fire sizes by year", subtitle: "One dot per fire record · Positive acreage only · Colored by state", width, height: 550, marginLeft: 85, marginBottom: 55, style: { background, color: orange, fontFamily: "system-ui, sans-serif", fontSize: "12px" }, fx: { domain: [2020, 2021, 2022, 2023, 2024], axis: null, padding: 0.15 }, y: { type: "log", axis: null }, color: { type: "ordinal", domain: [...new Set(firesByYear.map(d => d.state))].sort(), scheme: "YlOrRd", legend: true, label: "State" }, marks: [ Plot.gridY({ ticks: 6, stroke: "white", strokeOpacity: 0.12 }), Plot.axisY({ label: "ACRES (log scale)", ticks: 6, tickFormat: ",~g", fill: lightGrey, stroke: "white" }), Plot.axisFx({ anchor: "bottom", label: "Year", tickFormat: d => String(d), tickSize: 6, fill: lightGrey, stroke: "white" }), Plot.dot( firesByYear, Plot.dodgeX( {anchor: "middle", padding: 0.5}, { fx: "year", y: "ACRES", fill: "state", r: 3, stroke: "#7c2d12", strokeWidth: 0.4, fillOpacity: 0.85, title: d => `${d.FIRE_ID}\nState: ${d.state}\nYear: ${d.year}\nACRES: ${d.ACRES.toLocaleString()}`, tip: true } ) ) ] }); Object.assign(chart.style, { background, color: orange, padding: "20px", borderRadius: "10px", boxSizing: "border-box" }); // Set title and subtitle colors explicitly. chart.querySelectorAll("h2, h3").forEach(heading => { heading.style.color = lightGrey; }); return chart; }50:Ta8e,westernMapConfigV3 = (async () => { const width = 1200; const height = 760; const background = "#242a2d"; const textColor = "#d5dddf"; const mutedColor = "#aab6b9"; const outlineColor = "#788589"; const stateCodes = [ "WA", "OR", "CA", "ID", "NV", "UT", "AZ", "MT", "WY", "CO", "NM" ]; const fipsToCode = { "04": "AZ", "06": "CA", "08": "CO", "16": "ID", "30": "MT", "32": "NV", "35": "NM", "41": "OR", "49": "UT", "53": "WA", "56": "WY" }; const stateNames = { WA: "Washington", OR: "Oregon", CA: "California", ID: "Idaho", NV: "Nevada", UT: "Utah", AZ: "Arizona", MT: "Montana", WY: "Wyoming", CO: "Colorado", NM: "New Mexico" }; const displayLabels = { BS5: "Regen", BS1: "Unburned", BS2: "Low", BS3: "Moderate", BS4: "High" }; const severityOrder = ["BS5", "BS1", "BS2", "BS3", "BS4"]; if (!raw.length || !("FIRE_ID" in raw[0])) { throw new Error("The CSV must contain FIRE_ID."); } const idsByState = new Map(stateCodes.map(code => [code, new Set()])); for (const row of raw) { const fireId = String(row.FIRE_ID ?? "").trim(); const code = fireId.slice(0, 2).toUpperCase(); if (fireId && idsByState.has(code)) idsByState.get(code).add(fireId); } const fireCounts = new Map( stateCodes.map(code => [code, idsByState.get(code).size]) ); const maxFires = d3.max(fireCounts.values()) || 1; const fireColor = d3.scaleSequential() .domain([0, maxFires]) .interpolator(d3.interpolateRgb("#bfe8df", "#006b68")); const us = await d3.json( "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json" ); const states = topojson.feature(us, us.objects.states).features .filter(feature => stateCodes.includes(fipsToCode[String(feature.id).padStart(2, "0")]) ) .map(feature => ({ ...feature, stateCode: fipsToCode[String(feature.id).padStart(2, "0")] })); const westernData = statePieMapData.filter(d => stateCodes.includes(d.state)); const maxAverage = d3.max( westernData, d => Number.isFinite(d.averageAcres) ? d.averageAcres : 0 ) || 1; const radius = d3.scaleSqrt() .domain([0, maxAverage]) .range([0, 38]); const projection = d3.geoAlbersUsa().fitExtent( [[385, 100], [1180, 735]], {type: "FeatureCollection", features: states} ); return { width, height, background, textColor, mutedColor, outlineColor, stateCodes, stateNames, displayLabels, severityOrder, states, fireCounts, maxFires, fireColor, westernData, maxAverage, radius, path: d3.geoPath(projection), formatCount: d3.format(","), formatShort: d3.format(".2s"), formatPercent: d3.format(".1%") }; })(); 51:Tafb,westernMapLegendV3 = (svg, config) => { const { textColor, mutedColor, outlineColor, maxFires, fireColor, maxAverage, radius, formatCount, formatShort, severityOrder, displayLabels } = config; const defs = svg.append("defs"); const countGradient = defs.append("linearGradient") .attr("id", "fire-count-gradient-v3") .attr("x1", "0") .attr("x2", "0") .attr("y1", "1") .attr("y2", "0"); countGradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#bfe8df"); countGradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#006b68"); // Legend order: fire count, acreage size, burn severity. svg.append("text") .attr("x", 30).attr("y", 42) .attr("fill", textColor).attr("font-size", 14) .attr("font-weight", "bold") .text("Fire count"); svg.append("rect") .attr("x", 32).attr("y", 60) .attr("width", 18).attr("height", 130) .attr("rx", 3) .attr("fill", "url(#fire-count-gradient-v3)"); svg.append("text") .attr("x", 60).attr("y", 72) .attr("fill", mutedColor).attr("font-size", 11) .text(formatCount(maxFires)); svg.append("text") .attr("x", 60).attr("y", 190) .attr("fill", mutedColor).attr("font-size", 11) .text("0"); svg.append("text") .attr("x", 30).attr("y", 235) .attr("fill", textColor).attr("font-size", 14) .attr("font-weight", "bold") .text("Average acres per perimeter"); const sizeLevels = [1, 0.8, 0.6, 0.4, 0.2]; const centerX = 85; const bottomY = 390; const maxLegendRadius = 48; for (const proportion of sizeLevels) { const value = maxAverage * proportion; const r = Math.max(5, radius(value) * maxLegendRadius / 38); svg.append("circle") .attr("cx", centerX) .attr("cy", bottomY - r) .attr("r", r) .attr("fill", "none") .attr("stroke", outlineColor) .attr("stroke-width", 1); } sizeLevels.forEach((proportion, i) => { svg.append("text") .attr("x", 155) .attr("y", 310 + i * 24) .attr("fill", mutedColor) .attr("font-size", 11) .text(`${formatShort(maxAverage * proportion)} acres`); }); svg.append("text") .attr("x", 30).attr("y", 455) .attr("fill", textColor).attr("font-size", 14) .attr("font-weight", "bold") .text("Burn severity"); for (const [i, code] of severityOrder.entries()) { const category = bsTotals.find(d => d.label === code); if (!category) continue; const y = 490 + i * 35; svg.append("rect") .attr("x", 32).attr("y", y - 12) .attr("width", 16).attr("height", 16) .attr("fill", category.color); svg.append("text") .attr("x", 60).attr("y", y) .attr("fill", textColor).attr("font-size", 13) .text(displayLabels[code]); } return svg; }; 52:Tbbf,westernMapDrawV3 = (svg, config, showTooltip, hideTooltip) => { const { background, textColor, states, stateNames, fireCounts, westernData, radius, path, severityOrder, formatCount, formatShort, formatPercent } = config; const featuresByCode = new Map(states.map(d => [d.stateCode, d])); const mapped = westernData .filter(d => featuresByCode.has(d.state) && d.total > 0 && Number.isFinite(d.averageAcres) && d.averageAcres > 0 ) .map(d => { const feature = featuresByCode.get(d.state); const slicesByCode = new Map(d.slices.map(s => [s.label, s])); const orderedSlices = []; for (const code of severityOrder) { const slice = slicesByCode.get(code); if (slice) orderedSlices.push(slice); } return { ...d, name: stateNames[d.state], center: path.centroid(feature), fireCount: fireCounts.get(d.state) || 0, orderedSlices }; }); const pie = d3.pie().sort(null).value(d => d.count); const pies = svg.append("g") .selectAll("g") .data([...mapped].sort((a, b) => b.averageAcres - a.averageAcres)) .join("g") .attr("transform", d => `translate(${d.center})`); pies.each(function(state) { const group = d3.select(this); const r = radius(state.averageAcres); const arc = d3.arc().innerRadius(0).outerRadius(r); group.selectAll("path.slice") .data(pie(state.orderedSlices)) .join("path") .attr("class", "slice") .attr("d", arc) .attr("fill", d => d.data.color) .attr("stroke", background) .attr("stroke-width", 1) .attr("tabindex", 0) .attr("role", "img") .attr("aria-label", d => `${state.name}, ${d.data.label}, ${formatCount(d.data.count)} pixels` ) .on("mouseenter", function(event, d) { d3.select(this).attr("stroke", "#ffffff").attr("stroke-width", 3); showTooltip(state, d.data, event); }) .on("mousemove", (event, d) => showTooltip(state, d.data, event)) .on("mouseleave", function() { d3.select(this).attr("stroke", background).attr("stroke-width", 1); hideTooltip(); }) .on("focus", function(event, d) { d3.select(this).attr("stroke", "#ffffff").attr("stroke-width", 3); showTooltip(state, d.data, event); }) .on("blur", function() { d3.select(this).attr("stroke", background).attr("stroke-width", 1); hideTooltip(); }); group.append("circle") .attr("r", r).attr("fill", "none") .attr("stroke", background).attr("stroke-width", 1) .style("pointer-events", "none"); group.append("text") .attr("y", -r - 5).attr("text-anchor", "middle") .attr("font-size", 11).attr("font-weight", "bold") .attr("fill", textColor).attr("stroke", background) .attr("stroke-width", 3).attr("paint-order", "stroke") .style("pointer-events", "none") .text(state.state); }); return svg; }; 53:Tc68,westernBurnSeverityMapV3 = (() => { const config = westernMapConfigV3; const {width, height, background, textColor, mutedColor} = config; const root = d3.create("div") .style("position", "relative") .style("background", background) .style("color", textColor) .style("font-family", "system-ui, sans-serif") .style("padding", "16px"); root.append("h2").style("color", textColor).style("margin", "0 0 6px") .text("BS pixel composition by state"); root.append("p").style("color", mutedColor).style("margin", "0 0 10px") .style("font-size", "14px") .text("State color shows fire count. Pie slices show BS pixel proportions; pie area shows average acreage per perimeter record."); const svg = root.append("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("role", "group") .attr("aria-label", "Western states map with fire counts and burn-severity pie charts") .style("display", "block").style("width", "100%") .style("height", "auto").style("background", background); westernMapLegendV3(svg, config); const map = svg.append("g"); map.selectAll("path.state").data(config.states).join("path") .attr("class", "state").attr("d", config.path) .attr("fill", d => config.fireColor(config.fireCounts.get(d.stateCode) || 0)) .attr("stroke", config.outlineColor).attr("stroke-width", 1) .append("title") .text(d => `${config.stateNames[d.stateCode]} (${d.stateCode}) · ` + `${config.formatCount(config.fireCounts.get(d.stateCode) || 0)} fires`); const tooltip = root.append("div").style("position", "absolute") .style("display", "none").style("z-index", "2") .style("max-width", "270px").style("padding", "10px 12px") .style("background", "#151a1c") .style("border", `1px solid ${config.outlineColor}`) .style("border-radius", "5px").style("box-shadow", "0 3px 12px #0008") .style("font-size", "12px").style("line-height", "1.5") .style("pointer-events", "none"); function hideTooltip() { tooltip.style("display", "none"); } function showTooltip(state, slice, event) { tooltip.html(""); tooltip.append("div").style("color", textColor) .style("font-weight", "bold").style("margin-bottom", "4px") .text(`${state.name} (${state.state})`); tooltip.append("div").style("color", mutedColor) .text(`${config.formatCount(state.fireCount)} fires · ` + `${config.formatShort(state.averageAcres)} acres average`); const row = tooltip.append("div").style("margin-top", "5px"); row.append("span").style("color", slice.color) .style("font-weight", "bold").style("text-shadow", "0 1px 2px #000") .text(slice.label); row.append("span").style("color", textColor) .text(` · ${config.formatCount(slice.count)} pixels ` + `(${config.formatPercent(slice.proportion)})`); const [x, y] = d3.pointer(event, root.node()); tooltip.style("display", "block") .style("left", `${Math.max(12, Math.min(x + 14, root.node().clientWidth - 285))}px`) .style("top", `${Math.max(12, y + 14)}px`); } westernMapDrawV3(svg, config, showTooltip, hideTooltip); return root.node(); })(); 54:Tca9,// Cell 13 — Combined display wildfireMap = { const {Plot, d3} = libraries; const n = perimeters.length; const first = perimeters[0]; const last = perimeters[n - 1]; const span = last.properties.time - first.properties.time || 1; const [west, south, east, north] = mtbs.bounds; const [x0, y0, x1, y1] = mapBounds; const mapWidth = Math.min(width, 900); const timestamp = i => perimeterCounts[i].timestamp .replace("T", " ").replace(".000Z", " UTC"); const map = Plot.plot({ width: mapWidth, height: (mapWidth - 32) * (y1 - y0) / ((x1 - x0) * (mtbs.xAspect ?? 1)) + 32, margin: 16, style: {background: "white"}, x: {type: "linear", domain: [x0, x1], axis: null, nice: false}, y: {type: "linear", domain: [y0, y1], axis: null, nice: false}, color: { type: "ordinal", domain: [1, 2, 3, 4], range: severityColors, unknown: null, legend: true, label: "MTBS severity (1 = least; 4 = most)" }, opacity: {domain: [0, 1], range: [0, 1]}, caption: "Perimeters", marks: [ Plot.raster(mtbs.values, { width: mtbs.width, height: mtbs.height, x1: west, x2: east, y1: north, y2: south, fill: Plot.identity, interpolate: "none", imageRendering: "pixelated" }), Plot.geo([...perimeters].reverse(), { fill: "none", stroke: "teal", strokeWidth: 4 / 3, strokeOpacity: d => perimeterMode === "All" ? 0.55 + 0.45 * (d.properties.time - first.properties.time) / span : 1, title: d => new Date(d.properties.time).toISOString() }) ] }); // A fixed count scale makes bar heights comparable across frames. const maxCount = d3.max(perimeterCounts, d => d3.max(d.rows, row => row.count)); const makeBars = i => severityCharts( perimeterCounts[i], width, maxCount, i, perimeterMode ); const view = document.createElement("div"); const barHost = document.createElement("div"); barHost.style.minHeight = "360px"; view.append(viewof incident, viewof perimeterMode, map, barHost); const paths = [...map.querySelectorAll('g[aria-label="geo"] > path')]; const caption = map.querySelector("figcaption"); if (perimeterMode === "All") { caption.textContent = `${n} perimeters · ${timestamp(0)} – ${timestamp(n - 1)}`; barHost.append(severityCharts(null, width, maxCount, null, "All")); return view; // Full acreage series; the bars and pie remain blank. } // Pre-render the required chart rows before starting playback. const indices = perimeterMode === "Animated" ? d3.range(n) : [perimeterMode === "First" ? 0 : n - 1]; const barCharts = new Map(indices.map(i => [i, makeBars(i)])); const show = i => { paths.forEach((path, j) => { path.style.display = j === n - 1 - i ? "" : "none"; }); caption.textContent = `${i + 1}/${n} · ${timestamp(i)}`; barHost.replaceChildren(barCharts.get(i)); }; show(indices[0]); if (perimeterMode === "Animated") { let frame = 0; const timer = setInterval(() => { frame = (frame + 1) % n; show(frame); // Map and all three charts update together in one callback. }, 100); invalidation.then(() => clearInterval(timer)); } return view; }55:T163e,orangeCyanMap = { const r = orangeCyanRaster, palette = orangeCyanPalette, {d3} = orangeCyanLibraries; const numericColors = orangeCyanSettings.colorBy === "Numeric value"; const root = document.createElement("figure"); root.style.cssText = "margin:0;max-width:920px;font:13px system-ui;color:#262626"; const title = document.createElement("h3"); title.textContent = "MCFARLAND · pixel value = Z × BSᵖ"; title.style.cssText = "font:600 20px system-ui;margin:0 0 8px"; const details = document.createElement("p"); details.style.cssText = "margin:0 0 12px;line-height:1.5"; details.textContent = `p = ${r.p.toFixed(2)} · BS1–BS4 multipliers: ${r.weights.map(d3.format(".3f")).join(", ")} · at the same Z, BS4 has ${d3.format(".3f")(r.weights[3])}× BS1's multiplier. ${numericColors ? "Color shows the calculated value." : "Color shows BS and Z; changing p changes the numeric value, while these two-input colors stay fixed."}`; const canvas = document.createElement("canvas"); canvas.width = r.width; canvas.height = r.height; const [west, south, east, north] = r.bounds; canvas.style.cssText = `display:block;width:${Math.min(width, 920)}px;max-width:100%;height:auto;aspect-ratio:${(east-west)/(north-south)};image-rendering:pixelated;background:#eeefef;outline:1px solid #d4d4d4;touch-action:pan-y`; canvas.setAttribute("role", "img"); canvas.setAttribute("aria-label", "MCFARLAND numeric raster, north up; gray background is excluded data."); const context = canvas.getContext("2d"), image = context.createImageData(r.width, r.height); for (let i = 0; i < r.values.length; ++i) { if (!Number.isFinite(r.values[i])) continue; // zero IS a valid value const t = numericColors ? r.values[i] / r.valueDomain[1] : r.z[i]; const j = Math.round(Math.max(0, Math.min(1, t)) * (palette.shades - 1)); const rgb = numericColors ? palette.valueLookup[j] : palette.lookup[r.severity[i] - 1][j]; image.data.set(rgb, 4 * i); } context.putImageData(image, 0, 0); let selectedBS = 0; const filtered = context.createImageData(r.width, r.height); const fullPixels = new Uint32Array(image.data.buffer); const filteredPixels = new Uint32Array(filtered.data.buffer); const filterStatus = document.createElement("div"); filterStatus.style.cssText = "font-weight:600;margin:0 0 8px"; filterStatus.setAttribute("aria-live", "polite"); const status = document.createElement("div"); status.style.cssText = "min-height:3em;padding:10px 0;line-height:1.5;font-variant-numeric:tabular-nums"; status.setAttribute("aria-live", "polite"); const prompt = "Hover for the numeric pixel value, elevation, Z, BS, and severity multiplier."; status.textContent = prompt; canvas.addEventListener("pointermove", event => { const box = canvas.getBoundingClientRect(); const col = Math.floor((event.clientX - box.left) / box.width * r.width); const row = Math.floor((event.clientY - box.top) / box.height * r.height); if (col < 0 || col >= r.width || row < 0 || row >= r.height) return; const i = row * r.width + col, s = r.severity[i]; if (!s) { status.textContent = `row ${row}, column ${col} · excluded: requires BS1–BS4 and valid elevation.`; return; } if (selectedBS && s !== selectedBS) { status.textContent = `row ${row}, column ${col} · BS${s} pixel hidden by the BS${selectedBS} filter.`; return; } const x = west + (col + .5) * r.dx, y = north + (row + .5) * r.dy; status.textContent = `Value ${r.values[i].toFixed(6)} = Z ${r.z[i].toFixed(6)} × ${r.weights[s - 1].toFixed(6)} · BS${s} (${orangeCyanOptions.severityLabels[s - 1]}) · elevation ${d3.format(",.2f")(r.elevation[i])} ${orangeCyanOptions.elevationUnit} · row ${row}, column ${col} · EPSG:5070 center [${x.toFixed(0)}, ${y.toFixed(0)}]`; }); canvas.addEventListener("pointerleave", () => { status.textContent = prompt; }); const caption = document.createElement("figcaption"); caption.style.cssText = "line-height:1.5;color:#555;margin:0 0 12px"; const exclusions = [...r.excludedSeverity].map(([key, n]) => `${key}: ${d3.format(",")(n)}`).join("; "); caption.textContent = `${d3.format(",")(r.validCount)} numeric pixels · observed values ${r.valueMin.toFixed(6)}–${r.valueMax.toFixed(6)} · elevation ${r.min.toFixed(3)}–${r.max.toFixed(3)} ${orangeCyanOptions.elevationUnit} · ${r.dx} m native grid, EPSG:5070. Gray = excluded or hidden by the BS filter. Source exclusions: ${exclusions}; BS1–BS4 missing elevation: ${r.missingElevation}. Elevation units assumed ${orangeCyanOptions.elevationUnit}.`; const legend = orangeCyanLegend(orangeCyanSettings.colorBy); const renderFilter = () => { selectedBS = legend.value; if (selectedBS) { filteredPixels.fill(0); for (let i = 0; i < fullPixels.length; ++i) { if (r.severity[i] === selectedBS) filteredPixels[i] = fullPixels[i]; } context.putImageData(filtered, 0, 0); } else context.putImageData(image, 0, 0); const shown = selectedBS ? r.counts[selectedBS - 1] : r.validCount; filterStatus.textContent = `${selectedBS ? `BS${selectedBS} (${orangeCyanOptions.severityLabels[selectedBS - 1]})` : "All BS bands"} · ${d3.format(",")(shown)} of ${d3.format(",")(r.validCount)} pixels shown`; canvas.setAttribute("aria-label", `MCFARLAND numeric raster, north up; ${selectedBS ? `only BS${selectedBS}` : "all severity bands"} shown. Gray background is excluded or filtered data.`); status.textContent = prompt; }; legend.addEventListener("input", renderFilter); renderFilter(); root.append(title, details, filterStatus, canvas, status, caption, legend); return root; } 56:Tbc7,severityProbabilityPlot1 = { const Plot = await import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17/+esm"); const fit = ordinalRegression, pixels = regressionPixels; const sigmoid = z => z >= 0 ? 1 / (1 + Math.exp(-z)) : Math.exp(z) / (1 + Math.exp(z)); // Terciles describe the data; their medians are the prediction scenarios. const observedSlopes = Array.from(pixels.slope10, v => v * 10 + 20) .sort((a, b) => a - b); const quantile = p => observedSlopes[Math.round((observedSlopes.length - 1) * p)]; const lowBoundary = quantile(1 / 3), highBoundary = quantile(2 / 3); const slopeScenarios = [ {name: `Low (${quantile(1 / 6).toFixed(1)}°)`, degrees: quantile(1 / 6)}, {name: `Medium (${quantile(1 / 2).toFixed(1)}°)`, degrees: quantile(1 / 2)}, {name: `High (${quantile(5 / 6).toFixed(1)}°)`, degrees: quantile(5 / 6)} ]; const rows = []; const start = Math.floor(fit.minElevation / 25) * 25; const end = Math.ceil(fit.maxElevation / 25) * 25; for (const scenario of slopeScenarios) { for (const [cover, isRangeland] of [["Forest", 0], ["Rangeland", 1]]) { for (let elevation = start; elevation <= end; elevation += 25) { const eta = fit.betaElevation100 * (elevation - 1000) / 100 + fit.betaSlope10 * (scenario.degrees - 20) / 10 + fit.betaRangeland * isRangeland; const [f1, f2, f3] = fit.cutpoints.map(c => sigmoid(c - eta)); const probabilities = [f1, f2 - f1, f3 - f2, 1 - f3]; probabilities.forEach((probability, j) => rows.push({ elevation, cover, slopeGroup: scenario.name, severity: `BS${j + 1}`, probability })); } } } return Plot.plot({ width: Math.min(width, 1000), height: 760, style: {backgroundColor: "#23272b", color: "#d8dde1", padding: "16px", borderRadius: "8px"}, title: "Fitted burn-severity probabilities by elevation and slope", subtitle: `Solid Forest · dotted Rangeland · slope terciles split at ${lowBoundary.toFixed(1)}° and ${highBoundary.toFixed(1)}°`, marginLeft: 55, marginRight: 125, marginBottom: 50, x: {label: "Elevation (m)"}, y: {domain: [0, 1], grid: true, label: "Predicted probability", tickFormat: ".0%"}, fy: {axis: "right", label: "Slope scenario", domain: slopeScenarios.map(s => s.name)}, // Red → orange → yellow as severity increases. color: { type: "ordinal", domain: ["BS1", "BS2", "BS3", "BS4"], range: ["#d7301f", "#f46d43", "#fdae61", "#fdd835"], legend: true }, marks: [ Plot.ruleY([0]), Plot.line(rows.filter(d => d.cover === "Forest"), { x: "elevation", y: "probability", stroke: "severity", strokeWidth: 2.5, fy: "slopeGroup" }), Plot.line(rows.filter(d => d.cover === "Rangeland"), { x: "elevation", y: "probability", stroke: "severity", strokeWidth: 2.5, strokeDasharray: "1.5,4", strokeLinecap: "round", fy: "slopeGroup" }) ] }); } 57:T591,regressionResultsTable = { const f = ordinalRegression; const summary = md`### Ordinal Logistic Regression results **Outcome:** burn severity BS1–BS4 (higher means more severe) **Pixels modeled:** ${f.n.toLocaleString()} **Land-cover reference:** Forest (code 2) | Predictor | Coefficient (log odds) | Adjusted odds ratio | |:--|--:|--:| | Elevation, per 100 m | ${f.betaElevation100.toFixed(3)} | ${f.oddsRatioElevation100.toFixed(3)} | | Slope, per 10° | ${f.betaSlope10.toFixed(3)} | ${f.oddsRatioSlope10.toFixed(3)} | | Rangeland vs Forest | ${f.betaRangeland.toFixed(3)} | ${f.oddsRatioRangeland.toFixed(3)} | The odds ratios describe the odds of a **higher** severity class, holding the other predictors fixed`; Object.assign(summary.style, { backgroundColor: "#23272b", color: "#d8dde1", padding: "18px 22px", borderRadius: "8px", maxWidth: "1000px", boxSizing: "border-box" }); const tableOrange = "#f29a52", lightOrange = "#f6bd8a"; const table = summary.querySelector("table"); if (table) { table.style.borderCollapse = "collapse"; table.style.borderTop = `1px solid ${lightOrange}`; } for (const cell of summary.querySelectorAll("th, td")) { cell.style.color = tableOrange; cell.style.borderBottom = `1px solid ${lightOrange}`; } const notes = summary.querySelectorAll("p"); if (notes.length) notes[notes.length - 1].style.color = lightOrange; return summary; }58:T42b,{ const maxAcres = 10000; // Change to 5000 for a closer view const visible = fires.filter(d => d.ACRES < maxAcres); const excluded = fires.length - visible.length; return Plot.plot({ title: "Fire size distribution", subtitle: `100-acre bins · ${excluded.toLocaleString()} fires at or above ${maxAcres.toLocaleString()} acres not shown`, width, height: 320, marginLeft: 65, marginBottom: 45, x: { label: "ACRES", domain: [0, maxAcres], ticks: 6, tickFormat: ",.0f" }, y: { label: "Fire count (square-root scale)", type: "sqrt", zero: true, grid: true, ticks: 6, tickFormat: d => Number.isInteger(d) ? d.toLocaleString() : "" }, marks: [ Plot.rectY( visible, Plot.binX( {y: "count"}, { x: "ACRES", interval: 100, domain: [0, maxAcres], fill: "orange", inset: 0.3, tip: true } ) ), Plot.ruleY([0]) ] }); }59:T437,Plot.plot({ title: "Fire sizes by year", subtitle: "Each dot represents one fire record · Colored by state", width, height: 550, marginLeft: 80, marginBottom: 50, fx: { domain: [2020, 2021, 2022, 2023, 2024], axis: "bottom", label: "Year", tickFormat: d => String(d), padding: 0.15 }, y: { label: "ACRES (square-root scale)", type: "sqrt", zero: true, grid: true, ticks: 6, tickFormat: ",.0f" }, color: { type: "ordinal", domain: [...new Set(firesByYear.map(d => d.state))].sort(), scheme: "YlOrRd", legend: true, label: "State" }, marks: [ Plot.dot( firesByYear, Plot.dodgeX( {anchor: "middle", padding: 0.5}, { fx: "year", y: "ACRES", fill: "state", r: 3, stroke: "#7c2d12", strokeWidth: 0.4, fillOpacity: 0.85, title: d => `${d.FIRE_ID}\nState: ${d.state}\nYear: ${d.year}\nACRES: ${d.ACRES.toLocaleString()}`, tip: true } ) ) ] })5a:T42a,Plot.plot({ title: "Fire sizes by year", subtitle: "One dot per fire record · Positive acreage only · Colored by state", width, height: 550, marginLeft: 85, marginBottom: 50, fx: { domain: [2020, 2021, 2022, 2023, 2024], axis: "bottom", label: "Year", tickFormat: d => String(d), padding: 0.15 }, y: { label: "ACRES (log scale)", type: "log", grid: true, ticks: 6, tickFormat: ",~g" }, color: { type: "ordinal", domain: [...new Set(firesByYear.map(d => d.state))].sort(), scheme: "YlOrRd", legend: true, label: "State" }, marks: [ Plot.dot( firesByYear, Plot.dodgeX( {anchor: "middle", padding: 0.5}, { fx: "year", y: "ACRES", fill: "state", r: 3, stroke: "#7c2d12", strokeWidth: 0.4, fillOpacity: 0.85, title: d => `${d.FIRE_ID}\nState: ${d.state}\nYear: ${d.year}\nACRES: ${d.ACRES.toLocaleString()}`, tip: true } ) ) ] })5b:T8b2,calendarData = { const firstYear = 2020; const lastYear = 2024; const required = ["YEAR", "STARTMONTH", "STARTDAY", "ACRES"]; const missing = required.filter(key => fires.length && !(key in fires[0]) ); if (missing.length) { throw new Error(`Missing columns: ${missing.join(", ")}`); } const records = []; for (const fire of fires) { const year = Number(fire.YEAR); if (year < firstYear || year > lastYear) continue; const month = Number(fire.STARTMONTH); const day = Number(fire.STARTDAY); const date = new Date(Date.UTC(year, month - 1, day)); if ( !Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day) || date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day ) { throw new Error( `Invalid start date for ${fire.FIRE_ID ?? "a fire"}: ${year}-${month}-${day}` ); } records.push({date, acres: fire.ACRES}); } if (!records.length) { throw new Error("No valid fire records found for 2020–2024."); } const totals = d3.rollup( records, rows => ({ acres: d3.sum(rows, d => d.acres), count: rows.length }), d => +d.date ); // Include every calendar day, including leap days. const days = d3.utcDays( new Date(Date.UTC(firstYear, 0, 1)), new Date(Date.UTC(lastYear + 1, 0, 1)) ).map(date => { const total = totals.get(+date); return { date, year: date.getUTCFullYear(), month: date.getUTCMonth(), weekday: date.getUTCDay(), week: d3.utcWeek.count(d3.utcYear(date), date), acres: total?.acres ?? 0, count: total?.count ?? 0 }; }); // Compare January days with all January days, February with // all February days, and so on across the selected years. const monthlyStats = d3.rollup( days, rows => ({ mean: d3.mean(rows, d => d.acres), sd: d3.deviation(rows, d => d.acres) || 0 }), d => d.month ); return days.map(d => { const {mean, sd} = monthlyStats.get(d.month); return { ...d, monthlyMean: mean, anomaly: sd > 0 ? (d.acres - mean) / sd : 0 }; }); }5c:T131b,{ const years = [...new Set(calendarData.map(d => d.year))] .sort(d3.descending); const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const monthStarts = calendarData.filter( d => d.date.getUTCDate() === 1 ); const formatDate = d3.utcFormat("%B %d, %Y"); const formatMonth = d3.utcFormat("%b"); const formatAcres = d3.format(",.0f"); const colorDomain = [-2, 0, 2]; const colorRange = ["#08306b", "#ffffff", "#c45100"]; const colorFor = d3.scaleLinear() .domain(colorDomain) .range(colorRange) .clamp(true); // Stepped dividers follow the first day of each new month. const monthDividers = []; for (const d of monthStarts) { if (d.month === 0) continue; const w = d.week; const day = d.weekday; const points = day === 0 ? [[w, 0], [w, 7]] : [[w + 1, 0], [w + 1, day], [w, day], [w, 7]]; for (let i = 1; i < points.length; i++) { monthDividers.push({ year: d.year, x1: points[i - 1][0], y1: points[i - 1][1], x2: points[i][0], y2: points[i][1] }); } } const weekdayLabels = years.flatMap(year => weekdays.map((label, day) => ({year, day, label})) ); // Keep the cells large enough to read; scroll on narrow screens. const chartWidth = Math.max(1152, width); const cellSize = (chartWidth - 20) / 57; const chart = Plot.plot({ title: "Fire acreage calendar", subtitle: "Daily totals by fire start date, relative to the monthly average", width: chartWidth, height: Math.ceil(years.length * cellSize * 10), marginTop: 10, marginBottom: 10, marginLeft: 10, marginRight: 10, axis: null, style: { background: "white", color: "black", fontFamily: "system-ui, sans-serif", fontSize: "10px", maxWidth: "none" }, x: { type: "linear", domain: [-3, 54], nice: false }, y: { type: "linear", domain: [7, -1.5], nice: false }, fy: { domain: years, padding: 0.15 }, color: { type: "linear", domain: colorDomain, range: colorRange, clamp: true, legend: true, label: "Departure from monthly average (standard deviations)", ticks: [-2, -1, 0, 1, 2], tickFormat: d => d === -2 ? "≤ −2" : d === 0 ? "Average" : d === 2 ? "≥ +2" : d > 0 ? `+${d}` : `${d}` }, marks: [ // One square for every calendar day. Plot.rect(calendarData, { fy: "year", x1: d => d.week, x2: d => d.week + 1, y1: d => d.weekday, y2: d => d.weekday + 1, fill: "anomaly", inset: 0.5, title: d => `${formatDate(d.date)}\n` + `Fire records: ${d.count}\n` + `Total ACRES: ${formatAcres(d.acres)}\n` + `Monthly daily average: ${formatAcres(d.monthlyMean)} acres\n` + `Departure: ${d3.format("+.2f")(d.anomaly)} standard deviations`, tip: true }), // Day-of-month numbers. Plot.text(calendarData, { fy: "year", x: d => d.week + 0.5, y: d => d.weekday + 0.5, text: d => String(d.date.getUTCDate()), fill: d => d3.lab(colorFor(d.anomaly)).l < 55 ? "white" : "black", fontSize: 9, pointerEvents: "none" }), // Month boundaries. Plot.link(monthDividers, { fy: "year", x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "black", strokeWidth: 0.8, pointerEvents: "none" }), // Month names. Plot.text(monthStarts, { fy: "year", x: d => d.week + 0.5, y: () => -0.6, text: d => formatMonth(d.date), textAnchor: "start", fill: "black", fontSize: 11 }), // Weekday labels. Plot.text(weekdayLabels, { fy: "year", x: () => -0.4, y: d => d.day + 0.5, text: "label", textAnchor: "end", fill: "black", fontSize: 10 }), // Year labels above each calendar. Plot.text(years.map(year => ({year})), { fy: "year", x: () => -0.4, y: () => -0.6, text: d => String(d.year), textAnchor: "end", fill: "black", fontSize: 12, fontWeight: "bold" }) ] }); Object.assign(chart.style, { background: "white", color: "black", margin: "0", maxWidth: "none" }); chart.querySelectorAll("h2, h3").forEach(heading => { heading.style.color = "black"; }); const container = document.createElement("div"); Object.assign(container.style, { background: "white", color: "black", overflowX: "auto", maxWidth: "100%" }); container.append(chart); return container; }5d:T609,calendarCountData = { const firstYear = 2020; const lastYear = 2024; const required = ["YEAR", "STARTMONTH", "STARTDAY"]; const missing = required.filter(key => fires.length && !(key in fires[0]) ); if (missing.length) { throw new Error(`Missing columns: ${missing.join(", ")}`); } const records = []; for (const fire of fires) { const year = Number(fire.YEAR); if (year < firstYear || year > lastYear) continue; const month = Number(fire.STARTMONTH); const day = Number(fire.STARTDAY); const date = new Date(Date.UTC(year, month - 1, day)); if ( !Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day) || date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day ) { throw new Error( `Invalid start date for ${fire.FIRE_ID ?? "a fire"}: ${year}-${month}-${day}` ); } records.push({date}); } if (!records.length) { throw new Error("No valid fire records found for 2020–2024."); } const counts = d3.rollup( records, rows => rows.length, d => +d.date ); // Include every calendar day, including leap days. return d3.utcDays( new Date(Date.UTC(firstYear, 0, 1)), new Date(Date.UTC(lastYear + 1, 0, 1)) ).map(date => ({ date, year: date.getUTCFullYear(), month: date.getUTCMonth(), weekday: date.getUTCDay(), week: d3.utcWeek.count(d3.utcYear(date), date), count: counts.get(+date) ?? 0 })); }5e:T5be,westernFireLocations = { const longitudeColumn = "LONGITUDE"; const latitudeColumn = "LATITUDE"; if (!raw.length) throw new Error("The CSV contains no records."); const missing = [longitudeColumn, latitudeColumn] .filter(column => !(column in raw[0])); if (missing.length) { throw new Error( `Missing coordinate columns: ${missing.join(", ")}. ` + `Available columns: ${Object.keys(raw[0]).join(", ")}` ); } const parseCoordinate = value => { const text = String(value ?? "").trim(); return text === "" ? NaN : Number(text); }; const points = []; let invalidCoordinates = 0; let outsideRegion = 0; for (const row of raw) { const longitude = parseCoordinate(row[longitudeColumn]); const latitude = parseCoordinate(row[latitudeColumn]); if ( !Number.isFinite(longitude) || !Number.isFinite(latitude) || longitude < -180 || longitude > 180 || latitude < -90 || latitude > 90 ) { invalidCoordinates++; continue; } if (!d3.geoContains(westernStates, [longitude, latitude])) { outsideRegion++; continue; } points.push({ ...row, longitude, latitude }); } if (!points.length) { throw new Error( "No fire locations fall within the western states. " + "Check the coordinate columns and confirm they contain decimal degrees." ); } return {points, invalidCoordinates, outsideRegion}; }5f:T883,{ const binWidth = 12; // Smaller = finer detail; larger = more aggregation const { points, invalidCoordinates, outsideRegion } = westernFireLocations; const chart = Plot.plot({ title: "Fire counts across the western US", subtitle: `${points.length.toLocaleString()} fire records · ` + "Larger, darker hexagons indicate more fires", caption: `${invalidCoordinates.toLocaleString()} records excluded for invalid or missing coordinates; ` + `${outsideRegion.toLocaleString()} located outside the selected region.`, // Fixed dimensions keep the binning consistent across screen sizes. width: 900, height: 720, margin: 15, style: { background: "white", color: "black", fontFamily: "system-ui, sans-serif", fontSize: "12px" }, projection: { type: "albers", domain: westernStates, inset: 20 }, color: { type: "sqrt", range: ["#dedede", "#111111"], zero: true, legend: true, label: "Fire count", ticks: 5, tickFormat: d => Number.isInteger(d) ? d.toLocaleString() : "" }, r: { type: "sqrt" }, marks: [ Plot.geo(westernStates, { fill: "#f7f7f7", stroke: "#b0b0b0", strokeWidth: 0.7 }), Plot.dot( points, Plot.hexbin( { r: "count", fill: "count", title: records => `${records.length.toLocaleString()} fire records` }, { x: "longitude", y: "latitude", binWidth, stroke: "#333", strokeWidth: 0.3, tip: true } ) ), // Keep state boundaries visible above the hexagons. Plot.geo(westernStates, { fill: "none", stroke: "#555", strokeWidth: 0.65, pointerEvents: "none" }) ] }); Object.assign(chart.style, { background: "white", color: "orange" }); chart.querySelectorAll("h2, h3, figcaption").forEach(element => { element.style.color = "black"; }); return chart; }60:T505,bsTotals = { const classes = [ {label: "BS1", column: "count_BS1", color: "#8b0000", text: "white"}, {label: "BS2", column: "count_BS2", color: "#b84a00", text: "white"}, {label: "BS3", column: "count_BS3", color: "#fdb366", text: "black"}, {label: "BS4", column: "count_BS4", color: "#ffe34d", text: "black"}, {label: "BS5", column: "count_BS5", color: "#238b45", text: "white"} ]; if (!raw.length) throw new Error("The CSV contains no records."); const totals = classes.map(category => { if (!(category.column in raw[0])) { throw new Error(`Missing column: ${category.column}`); } const count = d3.sum(raw, (row, i) => { const value = String(row[category.column] ?? "") .trim() .replace(/,/g, ""); const number = Number(value); if ( value === "" || !Number.isSafeInteger(number) || number < 0 ) { throw new Error( `Invalid ${category.column} in data row ${i + 1}.` ); } return number; }); return {...category, count}; }); const total = d3.sum(totals, d => d.count); if (total === 0) throw new Error("Total BS pixel count is zero."); return totals.map(d => ({ ...d, proportion: d.count / total })); }61:Tbc9,{ const chartWidth = 720; const chartHeight = 650; const radius = 245; const total = d3.sum(bsTotals, d => d.count); const formatCount = d3.format(","); const formatPercent = d3.format(".1%"); const arcs = d3.pie() .sort(null) .value(d => d.count)(bsTotals); const arc = d3.arc() .innerRadius(0) .outerRadius(radius); const labelArc = d3.arc() .innerRadius(radius * 0.65) .outerRadius(radius * 0.65); const svg = d3.create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("width", chartWidth) .attr("height", chartHeight) .attr("role", "img") .attr("aria-label", "BS pixel counts and proportions across all perimeters") .style("display", "block") .style("max-width", "100%") .style("height", "auto") .style("background", "white") .style("color", "black") .style("font-family", "system-ui, sans-serif"); svg.append("text") .attr("x", chartWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .attr("fill", "black") .text("BS pixel distribution"); svg.append("text") .attr("x", chartWidth / 2) .attr("y", 55) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("fill", "black") .text(`All perimeters · ${formatCount(total)} total BS pixels`); const pie = svg.append("g") .attr("transform", `translate(${chartWidth / 2}, 330)`); pie.selectAll("path") .data(arcs) .join("path") .attr("d", arc) .attr("fill", d => d.data.color) .attr("stroke", "white") .attr("stroke-width", 2) .append("title") .text(d => `${d.data.label}\n` + `${formatCount(d.data.count)} pixels\n` + `${formatPercent(d.data.proportion)} of total` ); const labels = pie.selectAll("text") .data(arcs.filter(d => d.data.count > 0)) .join("text") .attr("transform", d => `translate(${labelArc.centroid(d)})`) .attr("text-anchor", "middle") .attr("fill", d => d.data.text) .attr("font-size", 13) .style("pointer-events", "none"); labels.append("tspan") .attr("x", 0) .attr("y", "-1em") .attr("font-weight", "bold") .text(d => d.data.label); labels.append("tspan") .attr("x", 0) .attr("dy", "1.25em") .text(d => formatCount(d.data.count)); labels.append("tspan") .attr("x", 0) .attr("dy", "1.25em") .attr("font-weight", "bold") .text(d => formatPercent(d.data.proportion)); const legend = svg.append("g") .attr("transform", `translate(${(chartWidth - 460) / 2}, 610)`); const items = legend.selectAll("g") .data(bsTotals) .join("g") .attr("transform", (d, i) => `translate(${i * 95}, 0)`); items.append("rect") .attr("width", 14) .attr("height", 14) .attr("fill", d => d.color); items.append("text") .attr("x", 20) .attr("y", 11) .attr("font-size", 12) .attr("fill", "black") .text(d => d.label); return svg.node(); }62:Tfac,{ const formatCount = d3.format(","); const formatPercent = d3.format(".1%"); const container = d3.create("div") .style("background", "white") .style("color", "black") .style("font-family", "system-ui, sans-serif") .style("padding", "16px"); container.append("h2") .style("color", "black") .style("margin", "0 0 6px") .text("BS pixel distribution by state"); container.append("p") .style("color", "black") .style("margin", "0 0 16px") .text("Each pie shows the proportions of BS pixels within that state."); // Shared color legend. const legend = container.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "18px") .style("margin-bottom", "20px"); for (const category of bsTotals) { const item = legend.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px") .style("font-size", "13px"); item.append("span") .style("display", "inline-block") .style("width", "14px") .style("height", "14px") .style("background", category.color); item.append("span") .style("color", "black") .text(category.label); } const grid = container.append("div") .style("display", "grid") .style( "grid-template-columns", "repeat(auto-fit, minmax(min(100%, 340px), 1fr))" ) .style("gap", "24px"); const pie = d3.pie() .sort(null) .value(d => d.count); const radius = 155; const arc = d3.arc() .innerRadius(0) .outerRadius(radius); const labelArc = d3.arc() .innerRadius(radius * 0.65) .outerRadius(radius * 0.65); for (const state of bsByState) { const card = grid.append("div") .style("text-align", "center") .style("min-width", "0"); card.append("h3") .style("color", "black") .style("margin", "0 0 4px") .style("font-size", "20px") .text(state.state); card.append("div") .style("color", "black") .style("font-size", "12px") .style("margin-bottom", "8px") .text( `${formatCount(state.total)} BS pixels · ` + `${formatCount(state.records)} perimeter records` ); if (state.total === 0) { card.append("p") .style("color", "black") .text("No BS pixels"); continue; } const svg = card.append("svg") .attr("viewBox", "0 0 360 360") .attr("role", "img") .attr("aria-label", `BS pixel distribution for ${state.state}`) .style("display", "block") .style("width", "100%") .style("max-width", "440px") .style("margin", "0 auto") .style("background", "white"); const group = svg.append("g") .attr("transform", "translate(180,180)"); const arcs = pie(state.slices); group.selectAll("path") .data(arcs) .join("path") .attr("d", arc) .attr("fill", d => d.data.color) .attr("stroke", "white") .attr("stroke-width", 2) .append("title") .text(d => `${state.state} · ${d.data.label}\n` + `${formatCount(d.data.count)} pixels\n` + `${formatPercent(d.data.proportion)} of the state's BS pixels` ); const labels = group.selectAll("text") .data(arcs.filter(d => d.data.count > 0)) .join("text") .attr("transform", d => `translate(${labelArc.centroid(d)})`) .attr("text-anchor", "middle") .attr("fill", d => d.data.text) .attr("font-size", 11) .style("pointer-events", "none"); labels.append("tspan") .attr("x", 0) .attr("y", "-1em") .attr("font-weight", "bold") .text(d => d.data.label); labels.append("tspan") .attr("x", 0) .attr("dy", "1.25em") .text(d => formatCount(d.data.count)); labels.append("tspan") .attr("x", 0) .attr("dy", "1.25em") .attr("font-weight", "bold") .text(d => formatPercent(d.data.proportion)); } return container.node(); }63:T1f72,{ const abbreviations = { "01": "AL", "02": "AK", "04": "AZ", "05": "AR", "06": "CA", "08": "CO", "09": "CT", "10": "DE", "11": "DC", "12": "FL", "13": "GA", "15": "HI", "16": "ID", "17": "IL", "18": "IN", "19": "IA", "20": "KS", "21": "KY", "22": "LA", "23": "ME", "24": "MD", "25": "MA", "26": "MI", "27": "MN", "28": "MS", "29": "MO", "30": "MT", "31": "NE", "32": "NV", "33": "NH", "34": "NJ", "35": "NM", "36": "NY", "37": "NC", "38": "ND", "39": "OH", "40": "OK", "41": "OR", "42": "PA", "44": "RI", "45": "SC", "46": "SD", "47": "TN", "48": "TX", "49": "UT", "50": "VT", "51": "VA", "53": "WA", "54": "WV", "55": "WI", "56": "WY" }; const states = topojson.feature( usStateMap, usStateMap.objects.states ).features.filter(d => abbreviations[String(d.id).padStart(2, "0")] ); // This map file is already projected, including Alaska/Hawaii insets. const path = d3.geoPath(); const featuresByCode = new Map(states.map(feature => [ abbreviations[String(feature.id).padStart(2, "0")], feature ])); const mapped = statePieMapData .filter(d => featuresByCode.has(d.state) && d.total > 0 && Number.isFinite(d.averageAcres) && d.averageAcres > 0 ) .map(d => { const feature = featuresByCode.get(d.state); return { ...d, name: feature.properties.name, center: path.centroid(feature) }; }); if (!mapped.length) { throw new Error( "No states have both positive BS pixel totals and positive average acreage." ); } const formatCount = d3.format(","); const formatAcres = d3.format(",.1f"); const formatPercent = d3.format(".1%"); const maxAverage = d3.max(mapped, d => d.averageAcres); // Square-root radius makes PIE AREA proportional to average acreage. const radius = d3.scaleSqrt() .domain([0, maxAverage]) .range([0, 38]); const pie = d3.pie() .sort(null) .value(d => d.count); const root = d3.create("div") .style("background", "white") .style("color", "black") .style("font-family", "system-ui, sans-serif") .style("padding", "16px"); root.append("h2") .style("color", "black") .style("margin", "0 0 6px") .text("BS pixel composition by state"); root.append("p") .style("color", "black") .style("margin", "0 0 16px") .style("font-size", "14px") .text( "Slices show BS pixel proportions. Pie area shows average acreage per perimeter record." ); // Shared BS color legend. const colorLegend = root.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "18px") .style("margin-bottom", "8px"); for (const category of bsTotals) { const item = colorLegend.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px") .style("font-size", "13px"); item.append("span") .style("display", "inline-block") .style("width", "14px") .style("height", "14px") .style("background", category.color); item.append("span").text(category.label); } const svg = root.append("svg") .attr("viewBox", "0 0 1020 760") .attr("role", "group") .attr("aria-label", "US map with state BS composition pie charts") .style("display", "block") .style("width", "100%") .style("height", "auto") .style("background", "white"); // Pie-size legend, using the same radius scale as the map. svg.append("text") .attr("x", 30) .attr("y", 20) .attr("fill", "black") .attr("font-size", 13) .attr("font-weight", "bold") .text("Average acres per perimeter"); const sizeValues = [ maxAverage / 4, maxAverage / 2, maxAverage ]; const sizeLegend = svg.append("g") .selectAll("g") .data(sizeValues) .join("g") .attr("transform", (d, i) => `translate(${85 + i * 150},0)`); sizeLegend.append("circle") .attr("cx", 0) .attr("cy", d => 105 - radius(d)) .attr("r", d => radius(d)) .attr("fill", "none") .attr("stroke", "black"); sizeLegend.append("text") .attr("x", 0) .attr("y", 122) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", 11) .text(d => formatAcres(d)); const map = svg.append("g") .attr("transform", "translate(20,135)"); map.selectAll("path.state") .data(states) .join("path") .attr("class", "state") .attr("d", path) .attr("fill", "#f5f5f5") .attr("stroke", "#777") .attr("stroke-width", 0.65) .append("title") .text(d => d.properties.name); // Details stay readable even for small pie slices. const detail = root.append("div") .style("color", "black") .style("font-size", "13px") .style("line-height", "1.6") .style("white-space", "pre-line") .style("min-height", "170px") .style("border-top", "1px solid #ddd") .style("padding-top", "12px") .attr("aria-live", "polite") .text("Hover over or select a state pie to see its counts and percentages."); function showDetails(d) { const lines = [ `${d.name} (${d.state})`, `Average acreage: ${formatAcres(d.averageAcres)} acres per perimeter`, `Total BS pixels: ${formatCount(d.total)} · Perimeter records: ${formatCount(d.records)}`, ...d.slices.map(s => `${s.label}: ${formatCount(s.count)} pixels (${formatPercent(s.proportion)})` ) ]; if (d.excludedAcres > 0) { lines.push( `${formatCount(d.excludedAcres)} records excluded from the acreage average because ACRES was missing or invalid.` ); } detail.text(lines.join("\n")); } // Draw larger pies first so smaller pies remain accessible. const pies = map.append("g") .selectAll("g") .data([...mapped].sort((a, b) => b.averageAcres - a.averageAcres)) .join("g") .attr("transform", d => `translate(${d.center})`) .attr("tabindex", 0) .attr("role", "button") .attr("aria-label", d => `Show BS pixel details for ${d.name}`) .style("cursor", "pointer") .on("mouseenter", (event, d) => showDetails(d)) .on("focus", (event, d) => showDetails(d)) .on("click", (event, d) => showDetails(d)) .on("keydown", (event, d) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); showDetails(d); } }); pies.each(function(state) { const group = d3.select(this); const r = radius(state.averageAcres); const arc = d3.arc().innerRadius(0).outerRadius(r); group.selectAll("path") .data(pie(state.slices)) .join("path") .attr("d", arc) .attr("fill", d => d.data.color) .attr("stroke", "white") .attr("stroke-width", 0.6) .append("title") .text(d => `${state.name} · ${d.data.label}\n` + `${formatCount(d.data.count)} pixels\n` + `${formatPercent(d.data.proportion)} of state BS pixels\n` + `Average acreage: ${formatAcres(state.averageAcres)}` ); group.append("circle") .attr("r", r) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.7) .style("pointer-events", "none"); group.append("text") .attr("y", -r - 5) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", 3) .attr("paint-order", "stroke") .style("pointer-events", "none") .text(state.state); }); const shown = new Set(mapped.map(d => d.state)); const omitted = statePieMapData.filter(d => !shown.has(d.state)); if (omitted.length) { root.append("p") .style("color", "black") .style("font-size", "12px") .text( `No pie drawn for: ${omitted.map(d => d.state).join(", ")}. ` + "A pie requires a mapped state, positive BS pixel total, and positive average acreage." ); } return root.node(); }64:T640,rasterLayers = [ { name: "Burn Severity Index", band: 0, categories: [1, 2, 3, 4], colors: ["#8b0000", "#c45100", "#fdb366", "#ffff00"], labels: { 1: "1 — Unburned", 2: "2 — Low", 3: "3 — Moderate", 4: "4 — High" }, note: "Regenerated vegetation (5) excluded." }, { name: "DEM", band: 1, colors: ["#08306b", "#ffffff", "#947044"], midpoint: true, note: "Low elevations: dark blue · Midpoint: white · High elevations: dark tan" }, { name: "Land Cover", band: 2, categories: [1, 2, 7, 11], colors: ["#9dd9f3", "#006400", "#a1d76a", "#9dd9f3"], labels: { 1: "Water", 2: "Forest", 7: "Shrub", 11: "Rangeland" }, note: "Water and Rangeland both use light blue." }, { name: "Hillshade", band: 3, colors: ["#111111", "#eeeeee"], note: "Higher values are shown brighter." }, { name: "Slope", band: 4, thresholds: [27, 30, 32, 35, 46, 51, 60], categories: [0, 1, 2, 3, 4, 5, 6, 7], colors: [ "#eeeeee", // Below 27° "#ffff00", // 27–<30° "#ffbf60", // 30–<32° "#ff8000", // 32–<35° "#e31a1c", // 35–<46° — includes 45° "#984ea3", // 46–<51° "#377eb8", // 51–<60° "#222222" // 60° and above ], labels: { 0: "<27°", 1: "27–<30°", 2: "30–<32°", 3: "32–<35°", 4: "35–<46°", 5: "46–<51°", 6: "51–<60°", 7: "≥60°" }, note: "Slope angle in degrees · 45° is red." } ]65:T4ab,viewof selectedRasterLayer = { const control = document.createElement("div"); control.value = 0; Object.assign(control.style, { display: "flex", flexWrap: "wrap", gap: "8px", padding: "8px 0", background: "white", color: "black" }); const buttons = rasterLayers.map((layer, index) => { const button = document.createElement("button"); button.type = "button"; button.textContent = layer.name; Object.assign(button.style, { padding: "8px 12px", border: "1px solid black", borderRadius: "4px", font: "13px system-ui, sans-serif", cursor: "pointer" }); button.onclick = () => { control.value = index; updateButtons(); control.dispatchEvent(new Event("input", {bubbles: true})); }; control.append(button); return button; }); function updateButtons() { buttons.forEach((button, index) => { const selected = index === control.value; button.style.background = selected ? "black" : "white"; button.style.color = selected ? "white" : "black"; button.setAttribute("aria-pressed", String(selected)); }); } updateButtons(); return control; }66:T9d3,{ const layer = rasterLayers[selectedRasterLayer]; const raster = mcfarlandRaster; const originalValues = raster.bands[layer.band]; const [xmin, ymin, xmax, ymax] = raster.bounds; // Assign slope values to display classes; preserve missing pixels. const values = layer.thresholds ? Float32Array.from(originalValues, value => Number.isFinite(value) ? d3.bisectRight(layer.thresholds, value) : NaN ) : originalValues; let color; if (layer.categories) { color = { type: "ordinal", domain: layer.categories, range: layer.colors, tickFormat: value => layer.labels[value] ?? String(value), legend: true, label: layer.name, unknown: "transparent" }; } else { const [minimum, maximum] = raster.domains[layer.band]; color = { type: "linear", domain: layer.midpoint ? [minimum, (minimum + maximum) / 2, maximum] : [minimum, maximum], range: layer.colors, clamp: true, legend: true, label: layer.name, unknown: "transparent" }; } const chart = Plot.plot({ title: `MCFARLAND — ${layer.name}`, subtitle: layer.note, caption: "30 m pixels · NAD83 / Conus Albers (EPSG:5070) · NoData shown white", width: Math.min(width, 850), aspectRatio: 1, marginLeft: 95, marginRight: 25, marginBottom: 55, marginTop: 25, style: { background: "white", color: "black", fontFamily: "system-ui, sans-serif", fontSize: "12px" }, x: { domain: [xmin, xmax], label: "Easting (m)", ticks: 4, tickFormat: ",.0f", nice: false }, y: { domain: [ymin, ymax], label: "Northing (m)", ticks: 5, tickFormat: ",.0f", nice: false }, color, marks: [ Plot.raster(values, { width: raster.width, height: raster.height, x1: xmin, x2: xmax, // Preserve the GeoTIFF's north-up orientation. y1: ymax, y2: ymin, fill: Plot.identity, fillOpacity: value => Number.isFinite(value) ? 1 : 0, imageRendering: "pixelated" }), Plot.frame({ stroke: "black", strokeWidth: 0.7 }) ] }); Object.assign(chart.style, { background: "white", color: "black" }); chart.querySelectorAll("h2, h3, figcaption").forEach(element => { element.style.color = "black"; }); return chart; }67:Ta41,// Cell 3 — DEM quartiles and slope's fixed 5-degree intervals prepareMigrationBins = function(raster, layer) { const values = raster.bands[layer.band]; if (!values || values.length !== raster.width * raster.height) { throw new Error("Raster dimensions do not match the selected band."); } const valid = value => Number.isFinite(value) && value !== -9999 && !(layer.band === 0 && value === 5) && !(layer.name === "Slope" && value < 0); let min = Infinity; let max = -Infinity; const sorted = layer.quartiles ? [] : null; for (const value of values) { if (!valid(value)) continue; if (value < min) min = value; if (value > max) max = value; if (sorted) sorted.push(value); } if (!Number.isFinite(min)) throw new Error("This layer has no valid pixels."); let thresholds = layer.thresholds; if (sorted) { sorted.sort((a, b) => a - b); const quantile = p => { const h = (sorted.length - 1) * p; const lo = Math.floor(h); return sorted[lo] + (sorted[Math.ceil(h)] - sorted[lo]) * (h - lo); }; thresholds = [0.25, 0.5, 0.75].map(quantile); } const numberOfBins = layer.keys ? layer.keys.length : thresholds ? thresholds.length + 1 : max === min ? 1 : 10; const step = (max - min) / numberOfBins; const format = value => value.toLocaleString("en-US", {maximumFractionDigits: 1}); const labels = layer.quartiles ? [ `<${format(thresholds[0])} m`, `${format(thresholds[0])}–<${format(thresholds[1])} m`, `${format(thresholds[1])}–<${format(thresholds[2])} m`, `≥${format(thresholds[2])} m` ] : layer.labels; const bins = Array.from({length: numberOfBins}, (_, index) => ({ index, count: 0, label: labels ? labels[index] : numberOfBins === 1 ? format(min) : `${format(min + index * step)}–${format(min + (index + 1) * step)}` })); const ids = new Int16Array(values.length).fill(-1); let total = 0; for (let i = 0; i < values.length; ++i) { const value = values[i]; if (!valid(value)) continue; let bin; if (layer.keys) { bin = layer.keys.indexOf(value); } else if (thresholds) { bin = 0; while (bin < thresholds.length && value >= thresholds[bin]) ++bin; } else { bin = step ? Math.min(numberOfBins - 1, Math.floor((value - min) / step)) : 0; } if (bin < 0 || bin >= numberOfBins) continue; ids[i] = bin; bins[bin].count++; total++; } return {values, ids, bins, total, min, max, categorical: !!layer.keys || !!layer.thresholds, quartiles: !!layer.quartiles}; } 68:Te3f,// Cell 4: WebGL engine migrationGL = function(canvas, W, H) { const gl = canvas.getContext("webgl", {alpha: true, antialias: false, depth: false}); if (!gl) throw new Error("WebGL is required for the pixel animation."); const shaders = []; function compile(type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader)); shaders.push(shader); return shader; } const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, ` precision highp float; attribute vec2 a_map; attribute vec2 a_bar; attribute vec3 a_color; attribute float a_delay; attribute float a_chartSample; uniform vec2 u_size; uniform mediump float u_progress; uniform float u_mapPoint; uniform float u_barPoint; varying mediump vec3 v_color; varying mediump float v_chartSample; void main() { float t = clamp((u_progress - a_delay * 0.22) / 0.78, 0.0, 1.0); t = t * t * (3.0 - 2.0 * t); vec2 p = mix(a_map, a_bar, t); p.y -= sin(t * 3.14159265) * (30.0 + a_delay * 40.0); gl_Position = vec4(p.x / u_size.x * 2.0 - 1.0, 1.0 - p.y / u_size.y * 2.0, 0.0, 1.0); gl_PointSize = mix(u_mapPoint, u_barPoint, t); v_color = a_color; v_chartSample = a_chartSample; } `)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, ` precision mediump float; uniform mediump float u_progress; varying mediump vec3 v_color; varying mediump float v_chartSample; void main() { float alpha = v_chartSample > 0.5 ? 1.0 : 0.85 * (1.0 - smoothstep(0.72, 1.0, u_progress)); gl_FragColor = vec4(v_color, alpha); } `)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program)); gl.useProgram(program); gl.viewport(0, 0, canvas.width, canvas.height); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); const uniform = name => gl.getUniformLocation(program, `u_${name}`); const size = uniform("size"), progress = uniform("progress"); const mapPoint = uniform("mapPoint"), barPoint = uniform("barPoint"); gl.uniform2f(size, W, H); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); let offset = 0; for (const [name, n] of [["map", 2], ["bar", 2], ["color", 3], ["delay", 1], ["chartSample", 1]]) { const location = gl.getAttribLocation(program, `a_${name}`); gl.enableVertexAttribArray(location); gl.vertexAttribPointer(location, n, gl.FLOAT, false, 36, offset * 4); offset += n; } const range = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); const clampPoint = n => Math.max(range[0], Math.min(range[1], n)); return { upload(vertices) { gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); }, draw(count, value, pointSize) { gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(progress, value); gl.uniform1f(mapPoint, clampPoint(pointSize)); gl.uniform1f(barPoint, clampPoint(Math.max(2, Math.round(2 * canvas.width / W)))); gl.drawArrays(gl.POINTS, 0, count); }, dispose() { gl.deleteBuffer(buffer); gl.deleteProgram(program); shaders.forEach(shader => gl.deleteShader(shader)); const extension = gl.getExtension("WEBGL_lose_context"); if (extension) extension.loseContext(); } }; } 69:Tdbc,// Cell 5: page elements and native radio buttons migrationUI = function(layers, width) { const root = document.createElement("div"); Object.assign(root.style, {color: "#111", font: "13px system-ui, sans-serif"}); function make(tag, text, parent = root) { const el = document.createElement(tag); if (text != null) el.textContent = text; parent.append(el); return el; } const heading = make("h2", "MCFARLAND · Pixels in motion"); Object.assign(heading.style, {margin: "0 0 6px", fontSize: "22px"}); const subtitle = make("p", "Move the raster pixels into a count chart, then send them home."); subtitle.style.margin = "0 0 14px"; const controls = make("div"); Object.assign(controls.style, {display: "flex", flexWrap: "wrap", gap: "8px 18px", marginBottom: "10px"}); const group = `migration-layer-${Math.random().toString(36).slice(2)}`; const radios = layers.map(layer => { const label = make("label", null, controls); Object.assign(label.style, {display: "inline-flex", alignItems: "center", gap: "4px", cursor: "pointer"}); const input = make("input", null, label); input.type = "radio"; input.name = group; input.value = layer.name; input.style.accentColor = "#2563eb"; make("span", layer.name, label); return input; }); const note = make("p"); Object.assign(note.style, {color: "#444", margin: "0 0 8px"}); const scroller = make("div"); scroller.style.overflowX = "auto"; const W = Math.max(800, Math.min(1200, width || 1000)); const H = 555, top = 65, bottom = 405; const leftWidth = W * 0.39; const right = {left: W * 0.49, right: W - 24}; const stage = make("div", null, scroller); Object.assign(stage.style, {position: "relative", width: `${W}px`, height: `${H}px`}); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", W); svg.setAttribute("height", H); Object.assign(svg.style, {position: "absolute", inset: "0"}); stage.append(svg); const canvas = make("canvas", null, stage); Object.assign(canvas.style, {position: "absolute", inset: "0", width: `${W}px`, height: `${H}px`, pointerEvents: "none"}); const ratio = Math.min(2, globalThis.devicePixelRatio || 1); canvas.width = Math.round(W * ratio); canvas.height = Math.round(H * ratio); const move = make("button", "Move Pixels", stage); move.type = "button"; Object.assign(move.style, {position: "absolute", left: `${(leftWidth + right.left) / 2}px`, top: `${(top + bottom) / 2}px`, transform: "translate(-50%, -50%)", zIndex: "2", font: "12px system-ui, sans-serif", color: "#111", background: "white", border: "1px solid #888", borderRadius: "4px", padding: "5px 7px", whiteSpace: "nowrap", cursor: "pointer"}); const legend = make("div"); Object.assign(legend.style, {display: "flex", flexWrap: "wrap", gap: "8px 18px"}); const details = make("details"); details.style.marginTop = "14px"; const summary = make("summary", "Exact pixel counts", details); summary.style.cursor = "pointer"; const tableBody = make("div", null, details); const caption = make("p", "The map shows every included raster pixel. The chart shows a sample of moving squares; bar heights and reported counts use every included pixel. NoData is excluded."); Object.assign(caption.style, {color: "#555", marginBottom: "0", fontSize: "12px"}); return {root, make, W, H, top, bottom, leftWidth, right, svg, canvas, ratio, move, radios, note, legend, tableBody}; } 6a:T820,// Cell 6: axes and map placement; bars have no advance outlines migrationAxes = function(d3, ui, raster, data) { const {W, top, bottom, leftWidth, right} = ui; const svg = d3.select(ui.svg); svg.selectAll("*").remove(); function text(x, y, value, size = 12) { return svg.append("text").attr("x", x).attr("y", y) .attr("fill", "#111").attr("font-size", size).text(value); } text(18, 28, "RASTER MAP").attr("font-weight", 650); text(right.left, 28, "PIXEL COUNT").attr("font-weight", 650); const scale = Math.min((leftWidth - 24) / raster.width, (bottom - top) / raster.height); const mapWidth = scale * raster.width; const mapHeight = scale * raster.height; const mapX = 18 + (leftWidth - 24 - mapWidth) / 2; const mapY = top + (bottom - top - mapHeight) / 2; text(mapX, bottom + 24, "North ↑ · 30 m pixels"); const x = d3.scaleBand().domain(data.bins.map(bin => bin.index)) .range([right.left, right.right]).padding(0.18); const y = d3.scaleLinear().domain([0, d3.max(data.bins, bin => bin.count) || 1]) .nice().range([bottom, top]); svg.append("g").attr("transform", `translate(${right.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"))) .call(group => group.selectAll("text").attr("fill", "#111")); svg.append("g").attr("transform", `translate(0,${bottom})`) .call(d3.axisBottom(x).tickSize(4).tickFormat(i => data.bins[i].label)) .call(group => group.selectAll("text").attr("transform", "rotate(-55)") .attr("text-anchor", "end").attr("dx", "-.5em").attr("dy", ".4em") .attr("fill", "#111")); const countLabels = svg.append("g").attr("opacity", 0); for (const bin of data.bins) { if (!bin.count) continue; countLabels.append("text") .attr("x", x(bin.index) + x.bandwidth() / 2) .attr("y", y(bin.count) - 7) .attr("fill", "#111").attr("font-size", 10) .attr("text-anchor", "middle") .text(data.bins.length <= 4 ? bin.count.toLocaleString("en-US") : d3.format(".3s")(bin.count)); } return {x, y, mapX, mapY, scale, countLabels}; } 6b:T9d7,// Cell 7: square chart pixels in aligned rows and columns migrationVertices = function(d3, raster, layer, data, layout, ui) { let color; if (data.categorical) { color = (value, bin) => layer.colors[bin]; } else { const domain = layer.colors.length === 3 ? [data.min, (data.min + data.max) / 2, data.max] : [data.min, data.max]; const scale = d3.scaleLinear().domain(domain).range(layer.colors).clamp(true); color = value => scale(value); } const {x, y, mapX, mapY, scale} = layout; const {bottom} = ui; const ratio = ui.canvas.width / ui.W; const squarePx = Math.max(2, Math.round(2 * ratio)); const pitchPx = Math.max(squarePx + 1, Math.round(3 * ratio)); const square = squarePx / ratio; const pitch = pitchPx / ratio; const seen = new Uint32Array(data.bins.length); const vertices = new Float32Array(data.total * 9); const rgbCache = new Map(); const grids = data.bins.map(bin => { const height = bottom - y(bin.count); const columns = Math.max(1, Math.floor((x.bandwidth() - square) / pitch) + 1); const rows = Math.max(1, Math.floor((height - square) / pitch) + 1); const target = Math.min(bin.count, columns * rows); const gridWidth = (columns - 1) * pitch + square; const firstX = x(bin.index) + (x.bandwidth() - gridWidth) / 2 + square / 2; return {columns, target, firstX}; }); let k = 0; for (let i = 0; i < data.ids.length; ++i) { const bin = data.ids[i]; if (bin < 0) continue; const rank = seen[bin]++; const grid = grids[bin]; const reached = Math.floor((rank + 1) * grid.target / data.bins[bin].count); const slot = Math.max(0, reached - 1); const sampled = reached > Math.floor(rank * grid.target / data.bins[bin].count); const hex = color(data.values[i], bin); let rgb = rgbCache.get(hex); if (!rgb) { const c = d3.rgb(hex); rgb = [c.r / 255, c.g / 255, c.b / 255]; rgbCache.set(hex, rgb); } const row = Math.floor(i / raster.width); vertices[k++] = mapX + ((i % raster.width) + 0.5) * scale; vertices[k++] = mapY + (row + 0.5) * scale; vertices[k++] = grid.firstX + (slot % grid.columns) * pitch; vertices[k++] = bottom - square / 2 - Math.floor(slot / grid.columns) * pitch; vertices[k++] = rgb[0]; vertices[k++] = rgb[1]; vertices[k++] = rgb[2]; vertices[k++] = row / Math.max(1, raster.height - 1); vertices[k++] = sampled ? 1 : 0; } return {vertices, mapPoint: Math.max(1, scale * ratio)}; } 6c:T573,// Cell 8: legend and exact-count table migrationDetails = function(ui, layer, data) { const {make, legend, tableBody} = ui; legend.replaceChildren(); const entries = data.categorical ? data.bins.map((bin, i) => [bin.label, layer.colors[i]]) : [[`Low: ${data.min.toFixed(1)}`, layer.colors[0]], ...(layer.colors.length === 3 ? [[`Midpoint: ${((data.min + data.max) / 2).toFixed(1)}`, layer.colors[1]]] : []), [`High: ${data.max.toFixed(1)}`, layer.colors[layer.colors.length - 1]]]; for (const [label, fill] of entries) { const item = make("span", null, legend); const swatch = make("span", null, item); Object.assign(swatch.style, {display: "inline-block", width: "12px", height: "12px", marginRight: "5px", background: fill, border: "1px solid #888", verticalAlign: "-2px"}); item.append(document.createTextNode(label)); } tableBody.replaceChildren(); const table = make("table", null, tableBody); table.style.borderCollapse = "collapse"; for (const [label, value] of [["Class / interval", "Pixels"], ...data.bins.map(bin => [bin.label, bin.count.toLocaleString("en-US")]), ["Total", data.total.toLocaleString("en-US")]]) { const row = make("tr", null, table); for (const text of [label, value]) { const cell = make("td", text, row); cell.style.padding = "4px 18px 4px 0"; } } } 6d:Tb05,// Cell 9: connect the small helpers createMigrationCopy = async function(raster, options = {}) { const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm"); const ui = migrationUI(migrationLayers, options.width); const graphics = migrationGL(ui.canvas, ui.W, ui.H); let count = 0, progress = 0, destination = 0, mapPoint = 1; let countLabels = null, timer = null, disposed = false; function stop() { if (timer) timer.stop(); timer = null; } function draw(value) { if (disposed) return; progress = value; graphics.draw(count, value, mapPoint); if (countLabels) countLabels.attr("opacity", value > 0.97 ? 1 : 0); } function animate(target) { stop(); if (matchMedia("(prefers-reduced-motion: reduce)").matches) { draw(target); return; } const from = progress; const duration = Math.max(350, Math.abs(target - from) * 3200); timer = d3.timer(elapsed => { const t = Math.min(1, elapsed / duration); draw(from + (target - from) * t); if (t === 1) stop(); }); } function selectLayer(index) { stop(); destination = 0; ui.move.setAttribute("aria-label", "Move pixels to the chart"); ui.radios.forEach((input, i) => input.checked = i === index); const layer = migrationLayers[index]; const data = prepareMigrationBins(raster, layer); count = data.total; ui.note.textContent = `${layer.name} · ${count.toLocaleString("en-US")} pixels` + (index === 0 ? " · Regenerated vegetation (5) excluded." : data.quartiles ? " · Elevation quartiles." : layer.name === "Slope" ? " · 5° intervals; last bin includes ≥60°." : data.categorical ? "" : " · Equal-width value bins; final bin includes the maximum."); const layout = migrationAxes(d3, ui, raster, data); const built = migrationVertices(d3, raster, layer, data, layout, ui); graphics.upload(built.vertices); mapPoint = built.mapPoint; countLabels = layout.countLabels; migrationDetails(ui, layer, data); draw(0); } ui.radios.forEach((input, i) => { input.onchange = () => { if (input.checked) selectLayer(i); }; }); ui.move.onclick = () => { destination = 1 - destination; ui.move.setAttribute("aria-label", destination ? "Move pixels back to the map" : "Move pixels to the chart"); animate(destination); }; function dispose() { if (disposed) return; disposed = true; stop(); graphics.dispose(); } ui.root.dispose = dispose; if (options.invalidation) options.invalidation.then(dispose); ui.canvas.addEventListener("webglcontextlost", event => { event.preventDefault(); stop(); if (!disposed) ui.note.textContent = "Graphics interrupted — rerun this cell."; }); selectLayer(0); return ui.root; } 6e:Te33,// Cell 11: charcoal page elements and native radio buttons migrationUICharcoal = function(layers, width) { const root = document.createElement("div"); Object.assign(root.style, {background: "#292c30", color: "#d7dbdf", colorScheme: "dark", font: "13px system-ui, sans-serif"}); function make(tag, text, parent = root) { const el = document.createElement(tag); if (text != null) el.textContent = text; parent.append(el); return el; } const heading = make("h2", "MCFARLAND · Pixels in motion"); Object.assign(heading.style, {margin: "0 0 6px", fontSize: "22px", color: "#e8ecef"}); const subtitle = make("p", "Move the raster pixels into a count chart, then send them home."); subtitle.style.margin = "0 0 14px"; const controls = make("div"); Object.assign(controls.style, {display: "flex", flexWrap: "wrap", gap: "8px 18px", marginBottom: "10px"}); const group = `migration-layer-${Math.random().toString(36).slice(2)}`; const radios = layers.map(layer => { const label = make("label", null, controls); Object.assign(label.style, {display: "inline-flex", alignItems: "center", gap: "4px", cursor: "pointer"}); const input = make("input", null, label); input.type = "radio"; input.name = group; input.value = layer.name; input.style.accentColor = "#2563eb"; make("span", layer.name, label); return input; }); const note = make("p"); Object.assign(note.style, {color: "#c5cbd1", margin: "0 0 8px"}); const scroller = make("div"); scroller.style.overflowX = "auto"; const W = Math.max(800, Math.min(1200, width || 1000)); const H = 555, top = 65, bottom = 405; const leftWidth = W * 0.39; const right = {left: W * 0.49, right: W - 24}; const stage = make("div", null, scroller); Object.assign(stage.style, {position: "relative", width: `${W}px`, height: `${H}px`}); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", W); svg.setAttribute("height", H); Object.assign(svg.style, {position: "absolute", inset: "0", color: "#c5cbd1"}); stage.append(svg); const canvas = make("canvas", null, stage); Object.assign(canvas.style, {position: "absolute", inset: "0", width: `${W}px`, height: `${H}px`, pointerEvents: "none"}); const ratio = Math.min(2, globalThis.devicePixelRatio || 1); canvas.width = Math.round(W * ratio); canvas.height = Math.round(H * ratio); const move = make("button", "Move Pixels", stage); move.type = "button"; Object.assign(move.style, {position: "absolute", left: `${(leftWidth + right.left) / 2}px`, top: `${(top + bottom) / 2}px`, transform: "translate(-50%, -50%)", zIndex: "2", font: "12px system-ui, sans-serif", color: "#e1e5e9", background: "#3b4046", border: "1px solid #9aa2aa", borderRadius: "4px", padding: "5px 7px", whiteSpace: "nowrap", cursor: "pointer"}); const legend = make("div"); Object.assign(legend.style, {display: "flex", flexWrap: "wrap", gap: "8px 18px"}); const details = make("details"); details.style.marginTop = "14px"; const summary = make("summary", "Exact pixel counts", details); summary.style.cursor = "pointer"; const tableBody = make("div", null, details); const caption = make("p", "The map shows every included raster pixel. The chart shows a sample of moving squares; bar heights and reported counts use every included pixel. NoData is excluded."); Object.assign(caption.style, {color: "#b7bec5", marginBottom: "0", fontSize: "12px"}); return {root, make, W, H, top, bottom, leftWidth, right, svg, canvas, ratio, move, radios, note, legend, tableBody}; } 6f:T8db,// Cell 12: light axes and map placement; bars have no advance outlines migrationAxesCharcoal = function(d3, ui, raster, data) { const {W, top, bottom, leftWidth, right} = ui; const svg = d3.select(ui.svg); svg.selectAll("*").remove(); function text(x, y, value, size = 12) { return svg.append("text").attr("x", x).attr("y", y) .attr("fill", "#d7dbdf").attr("font-size", size).text(value); } text(18, 28, "RASTER MAP").attr("font-weight", 650); text(right.left, 28, "PIXEL COUNT").attr("font-weight", 650); const scale = Math.min((leftWidth - 24) / raster.width, (bottom - top) / raster.height); const mapWidth = scale * raster.width; const mapHeight = scale * raster.height; const mapX = 18 + (leftWidth - 24 - mapWidth) / 2; const mapY = top + (bottom - top - mapHeight) / 2; text(mapX, bottom + 24, "North ↑ · 30 m pixels"); const x = d3.scaleBand().domain(data.bins.map(bin => bin.index)) .range([right.left, right.right]).padding(0.18); const y = d3.scaleLinear().domain([0, d3.max(data.bins, bin => bin.count) || 1]) .nice().range([bottom, top]); svg.append("g").attr("transform", `translate(${right.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"))) .call(group => { group.selectAll("path, line").attr("stroke", "#aeb6be"); group.selectAll("text").attr("fill", "#d7dbdf"); }); svg.append("g").attr("transform", `translate(0,${bottom})`) .call(d3.axisBottom(x).tickSize(4).tickFormat(i => data.bins[i].label)) .call(group => { group.selectAll("path, line").attr("stroke", "#aeb6be"); group.selectAll("text").attr("transform", "rotate(-55)") .attr("text-anchor", "end").attr("dx", "-.5em").attr("dy", ".4em") .attr("fill", "#d7dbdf"); }); const countLabels = svg.append("g").attr("opacity", 0); for (const bin of data.bins) { if (!bin.count) continue; countLabels.append("text") .attr("x", x(bin.index) + x.bandwidth() / 2) .attr("y", y(bin.count) - 7) .attr("fill", "#d7dbdf").attr("font-size", 10) .attr("text-anchor", "middle") .text(data.bins.length <= 4 ? bin.count.toLocaleString("en-US") : d3.format(".3s")(bin.count)); } return {x, y, mapX, mapY, scale, countLabels}; } 70:T57f,// Cell 13: legend and exact-count table migrationDetailsCharcoal = function(ui, layer, data) { const {make, legend, tableBody} = ui; legend.replaceChildren(); const entries = data.categorical ? data.bins.map((bin, i) => [bin.label, layer.colors[i]]) : [[`Low: ${data.min.toFixed(1)}`, layer.colors[0]], ...(layer.colors.length === 3 ? [[`Midpoint: ${((data.min + data.max) / 2).toFixed(1)}`, layer.colors[1]]] : []), [`High: ${data.max.toFixed(1)}`, layer.colors[layer.colors.length - 1]]]; for (const [label, fill] of entries) { const item = make("span", null, legend); const swatch = make("span", null, item); Object.assign(swatch.style, {display: "inline-block", width: "12px", height: "12px", marginRight: "5px", background: fill, border: "1px solid #b0b7bf", verticalAlign: "-2px"}); item.append(document.createTextNode(label)); } tableBody.replaceChildren(); const table = make("table", null, tableBody); table.style.borderCollapse = "collapse"; for (const [label, value] of [["Class / interval", "Pixels"], ...data.bins.map(bin => [bin.label, bin.count.toLocaleString("en-US")]), ["Total", data.total.toLocaleString("en-US")]]) { const row = make("tr", null, table); for (const text of [label, value]) { const cell = make("td", text, row); cell.style.padding = "4px 18px 4px 0"; } } } 71:Te45,// Cell 14: connect the small helpers createMigrationCopyCharcoal = async function(raster, options = {}) { const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm"); const ui = migrationUICharcoal(migrationLayers, options.width); const graphics = migrationGL(ui.canvas, ui.W, ui.H); let count = 0, progress = 0, destination = 0, mapPoint = 1; let countLabels = null, timer = null, disposed = false; function stop() { if (timer) timer.stop(); timer = null; } function draw(value) { if (disposed) return; progress = value; graphics.draw(count, value, mapPoint); if (countLabels) countLabels.attr("opacity", value > 0.97 ? 1 : 0); } function animate(target) { stop(); if (matchMedia("(prefers-reduced-motion: reduce)").matches) { draw(target); return; } const from = progress; const duration = Math.max(350, Math.abs(target - from) * 3200); timer = d3.timer(elapsed => { const t = Math.min(1, elapsed / duration); draw(from + (target - from) * t); if (t === 1) stop(); }); } function binsFor(layer) { if (layer.name !== "DEM") return prepareMigrationBins(raster, layer); const [min, max] = d3.extent(raster.bands[layer.band], value => Number.isFinite(value) && value !== -9999 ? value : undefined); if (!Number.isFinite(min) || !Number.isFinite(max)) { throw new Error("DEM has no valid pixels."); } const step = (max - min) / 5; const edges = Array.from({length: 6}, (_, i) => min + i * step); const format = d3.format(",.1f"); const labels = edges.slice(0, 5).map((low, i) => `${format(low)}–${i === 4 ? "" : "<"}${format(edges[i + 1])} m`); const data = prepareMigrationBins(raster, { ...layer, quartiles: false, thresholds: edges.slice(1, 5), labels }); data.categorical = false; return data; } function selectLayer(index) { stop(); destination = 0; ui.move.setAttribute("aria-label", "Move pixels to the chart"); ui.radios.forEach((input, i) => input.checked = i === index); const layer = migrationLayers[index]; const data = binsFor(layer); count = data.total; ui.note.textContent = `${layer.name} · ${count.toLocaleString("en-US")} pixels` + (index === 0 ? " · Regenerated vegetation (5) excluded." : layer.name === "DEM" ? " · Five equal-width elevation bins." : layer.name === "Slope" ? " · 5° intervals; last bin includes ≥60°." : data.categorical ? "" : " · Equal-width value bins; final bin includes the maximum."); const layout = migrationAxesCharcoal(d3, ui, raster, data); const built = migrationVertices(d3, raster, layer, data, layout, ui); graphics.upload(built.vertices); mapPoint = built.mapPoint; countLabels = layout.countLabels; migrationDetailsCharcoal(ui, layer, data); draw(0); } ui.radios.forEach((input, i) => { input.onchange = () => { if (input.checked) selectLayer(i); }; }); ui.move.onclick = () => { destination = 1 - destination; ui.move.setAttribute("aria-label", destination ? "Move pixels back to the map" : "Move pixels to the chart"); animate(destination); }; function dispose() { if (disposed) return; disposed = true; stop(); graphics.dispose(); } ui.root.dispose = dispose; if (options.invalidation) options.invalidation.then(dispose); ui.canvas.addEventListener("webglcontextlost", event => { event.preventDefault(); stop(); if (!disposed) ui.note.textContent = "Graphics interrupted — rerun this cell."; }); selectLayer(0); return ui.root; } 72:T6fd,// Cell 16: fixed BSI footprint, with an overview grid clipped to valid cells migrationFootprintTrace = function(ui, raster, layout) { const canvas = document.createElement("canvas"); canvas.width = ui.canvas.width; canvas.height = ui.canvas.height; Object.assign(canvas.style, {position: "absolute", inset: "0", width: `${ui.W}px`, height: `${ui.H}px`, pointerEvents: "none"}); ui.canvas.parentElement.insertBefore(canvas, ui.svg); const ctx = canvas.getContext("2d"); const image = ctx.createImageData(canvas.width, canvas.height); const pixels = image.data; const ratio = canvas.width / ui.W; const {mapX, mapY, scale} = layout; const x0 = Math.max(0, Math.floor(mapX * ratio)); const x1 = Math.min(canvas.width, Math.ceil((mapX + raster.width * scale) * ratio)); const y0 = Math.max(0, Math.floor(mapY * ratio)); const y1 = Math.min(canvas.height, Math.ceil((mapY + raster.height * scale) * ratio)); const bsi = raster.bands[0]; for (let py = y0; py < y1; ++py) { const sy = (py + 0.5) / ratio - mapY; const row = Math.floor(sy / scale); if (row < 0 || row >= raster.height) continue; for (let px = x0; px < x1; ++px) { const sx = (px + 0.5) / ratio - mapX; const col = Math.floor(sx / scale); if (col < 0 || col >= raster.width) continue; const value = bsi[row * raster.width + col]; if (!Number.isFinite(value) || value === -9999) continue; const line = sx % 6 < 0.8 || sy % 6 < 0.8; const color = line ? [62, 69, 76] : [113, 121, 129]; const offset = (py * canvas.width + px) * 4; pixels[offset] = color[0]; pixels[offset + 1] = color[1]; pixels[offset + 2] = color[2]; pixels[offset + 3] = 255; } } ctx.putImageData(image, 0, 0); return canvas; } 73:T45d,// Cell 17: exact source index for each visible square in the chart migrationChartHitTrace = function(ui, data, vertices) { const width = ui.canvas.width; const height = ui.canvas.height; const ratio = width / ui.W; const side = Math.max(2, Math.round(2 * ratio)); const hits = new Uint32Array(width * height); let ordinal = 0; for (let source = 0; source < data.ids.length; ++source) { if (data.ids[source] < 0) continue; const base = ordinal++ * 9; if (vertices[base + 8] < 0.5) continue; const left = Math.round(vertices[base + 2] * ratio - side / 2); const top = Math.round(vertices[base + 3] * ratio - side / 2); for (let dy = 0; dy < side; ++dy) { const py = top + dy; if (py < 0 || py >= height) continue; for (let dx = 0; dx < side; ++dx) { const px = left + dx; if (px >= 0 && px < width) hits[py * width + px] = source + 1; } } } return (x, y) => { const px = Math.floor(x * ratio), py = Math.floor(y * ratio); return px >= 0 && px < width && py >= 0 && py < height ? hits[py * width + px] - 1 : -1; }; } 74:T5c6,// Cell 18: source-cell coordinates and all five band values migrationPixelDataTrace = function(raster, proj4) { const albers = "+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs"; const cellWidth = (raster.bounds[2] - raster.bounds[0]) / raster.width; const cellHeight = (raster.bounds[3] - raster.bounds[1]) / raster.height; const valid = index => index >= 0 && index < raster.bands[0].length && Number.isFinite(raster.bands[0][index]) && raster.bands[0][index] !== -9999; const position = index => { const row = Math.floor(index / raster.width), col = index % raster.width; const east = raster.bounds[0] + (col + 0.5) * cellWidth; const north = raster.bounds[3] - (row + 0.5) * cellHeight; const [lon, lat] = proj4(albers, "EPSG:4326", [east, north]); return {row, col, lon, lat}; }; const describe = index => { const {row, col, lon, lat} = position(index); const names = ["BSI", "DEM (m)", "Land Cover", "Hillshade", "Slope (°)"]; const lines = [`Raster cell · row ${row + 1}, col ${col + 1}`, `Centroid · ${lat.toFixed(5)}°, ${lon.toFixed(5)}°`]; raster.bands.forEach((band, i) => { const value = band[index]; lines.push(`${names[i]} · ${Number.isFinite(value) && value !== -9999 ? value.toLocaleString("en-US", {maximumFractionDigits: 2}) : "NoData"}`); }); return lines.join("\n"); }; return {valid, position, describe}; } 75:Tff1,// Cell 19: hover details, chart click, overview locator, and exact-cell inset migrationInteractionsTrace = function(ui, raster, info) { const stage = ui.canvas.parentElement; const tooltip = ui.make("div", null, stage); Object.assign(tooltip.style, {position: "absolute", display: "none", zIndex: "4", pointerEvents: "none", whiteSpace: "pre-line", padding: "8px 10px", background: "#161a1e", color: "#ecf2f5", border: "1px solid #a8b2bc", borderRadius: "4px", boxShadow: "0 2px 12px #0008", lineHeight: "1.45"}); const marker = ui.make("div", null, stage); Object.assign(marker.style, {position: "absolute", display: "none", zIndex: "3", width: "14px", height: "14px", border: "2px solid #00f5ff", boxSizing: "border-box", transform: "translate(-50%, -50%)", boxShadow: "0 0 8px #00f5ff", pointerEvents: "none"}); const panel = ui.make("div"); ui.root.insertBefore(panel, ui.legend); Object.assign(panel.style, {display: "none", margin: "4px 0 12px", color: "#d7dbdf"}); const title = ui.make("div", "Source raster cells · cyan square marks the selected 30 m cell", panel); title.style.marginBottom = "5px"; const inset = ui.make("canvas", null, panel); const cell = 14, span = 11; inset.width = inset.height = cell * span; inset.style.imageRendering = "pixelated"; const ctx = inset.getContext("2d"); let layout = null, hit = null, progress = 0; function hideTip() { tooltip.style.display = "none"; } function point(event) { const box = stage.getBoundingClientRect(); return [event.clientX - box.left, event.clientY - box.top]; } function sourceAt(x, y) { if (!layout) return -1; const {mapX, mapY, scale} = layout; const col = Math.floor((x - mapX) / scale); const row = Math.floor((y - mapY) / scale); if (col >= 0 && col < raster.width && row >= 0 && row < raster.height) { const source = row * raster.width + col; if (info.valid(source)) return source; } return progress >= 0.995 && hit ? hit(x, y) : -1; } function move(event) { const [x, y] = point(event), source = sourceAt(x, y); if (source < 0) { hideTip(); return; } tooltip.textContent = info.describe(source); tooltip.style.display = "block"; tooltip.style.left = `${Math.min(ui.W - tooltip.offsetWidth - 4, x + 14)}px`; tooltip.style.top = `${Math.min(ui.H - tooltip.offsetHeight - 4, y + 14)}px`; } function select(event) { if (progress < 0.995 || !hit || !layout) return; const [x, y] = point(event), source = hit(x, y); if (!info.valid(source)) return; const row = Math.floor(source / raster.width), col = source % raster.width; marker.style.left = `${layout.mapX + (col + 0.5) * layout.scale}px`; marker.style.top = `${layout.mapY + (row + 0.5) * layout.scale}px`; marker.style.display = "block"; panel.style.display = "block"; for (let dy = -5; dy <= 5; ++dy) for (let dx = -5; dx <= 5; ++dx) { const r = row + dy, c = col + dx, px = (dx + 5) * cell, py = (dy + 5) * cell; const index = r * raster.width + c; ctx.fillStyle = r >= 0 && r < raster.height && c >= 0 && c < raster.width && info.valid(index) ? "#717981" : "#292c30"; ctx.fillRect(px, py, cell, cell); ctx.strokeStyle = "#404850"; ctx.lineWidth = 1; ctx.strokeRect(px + 0.5, py + 0.5, cell - 1, cell - 1); } ctx.strokeStyle = "#00f5ff"; ctx.lineWidth = 3; ctx.strokeRect(5 * cell + 1.5, 5 * cell + 1.5, cell - 3, cell - 3); } stage.addEventListener("pointermove", move); stage.addEventListener("pointerleave", hideTip); stage.addEventListener("click", select); return { setLayer(nextLayout, nextHit) { layout = nextLayout; hit = nextHit; hideTip(); marker.style.display = panel.style.display = "none"; }, setProgress(value) { progress = value; if (value < 0.995) hideTip(); }, dispose() { stage.removeEventListener("pointermove", move); stage.removeEventListener("pointerleave", hideTip); stage.removeEventListener("click", select); } }; } 76:Ted1,// Cell 21: new charcoal plot with footprint, hover, and source-cell selection createMigrationTrace = async function(raster, options = {}) { const [d3, {default: proj4}] = await Promise.all([ import("https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm"), import("https://cdn.jsdelivr.net/npm/proj4@2.12.1/+esm") ]); const ui = migrationUICharcoal(migrationLayers, options.width); const graphics = migrationGL(ui.canvas, ui.W, ui.H); const info = migrationPixelDataTrace(raster, proj4); const interactions = migrationInteractionsTrace(ui, raster, info); const explanation = ui.make("p", "Neutral squares show the BSI valid-cell footprint, including class 5. Hover over the map or a chart square for source values; click a chart square to locate its cell."); Object.assign(explanation.style, {color: "#b7bec5", fontSize: "12px", margin: "8px 0 0"}); let count = 0, progress = 0, destination = 0, mapPoint = 1; let countLabels = null, timer = null, disposed = false, footprint = null; function stop() { if (timer) timer.stop(); timer = null; } function draw(value) { if (disposed) return; progress = value; graphics.draw(count, value, mapPoint); interactions.setProgress(value); if (countLabels) countLabels.attr("opacity", value > 0.97 ? 1 : 0); } function animate(target) { stop(); if (matchMedia("(prefers-reduced-motion: reduce)").matches) { draw(target); return; } const from = progress; const duration = Math.max(350, Math.abs(target - from) * 3200); timer = d3.timer(elapsed => { const t = Math.min(1, elapsed / duration); draw(from + (target - from) * t); if (t === 1) stop(); }); } function selectLayer(index) { stop(); destination = 0; ui.move.setAttribute("aria-label", "Move pixels to the chart"); ui.radios.forEach((input, i) => input.checked = i === index); const layer = migrationLayers[index]; const data = migrationBinsTrace(d3, raster, layer); count = data.total; ui.note.textContent = `${layer.name} · ${count.toLocaleString("en-US")} pixels` + (index === 0 ? " · Regenerated vegetation (5) excluded from chart." : layer.name === "DEM" ? " · Five equal-width elevation bins." : layer.name === "Slope" ? " · 5° intervals; last bin includes ≥60°." : data.categorical ? "" : " · Equal-width value bins; final bin includes the maximum."); const layout = migrationAxesCharcoal(d3, ui, raster, data); if (!footprint) footprint = migrationFootprintTrace(ui, raster, layout); const built = migrationVertices(d3, raster, layer, data, layout, ui); graphics.upload(built.vertices); mapPoint = built.mapPoint; countLabels = layout.countLabels; interactions.setLayer(layout, migrationChartHitTrace(ui, data, built.vertices)); migrationDetailsCharcoal(ui, layer, data); draw(0); } ui.radios.forEach((input, i) => { input.onchange = () => { if (input.checked) selectLayer(i); }; }); ui.move.onclick = () => { destination = 1 - destination; ui.move.setAttribute("aria-label", destination ? "Move pixels back to the map" : "Move pixels to the chart"); animate(destination); }; function contextLost(event) { event.preventDefault(); stop(); if (!disposed) ui.note.textContent = "Graphics interrupted — rerun this cell."; } ui.canvas.addEventListener("webglcontextlost", contextLost); function dispose() { if (disposed) return; disposed = true; stop(); interactions.dispose(); ui.canvas.removeEventListener("webglcontextlost", contextLost); graphics.dispose(); } ui.root.dispose = dispose; if (options.invalidation) options.invalidation.then(dispose); selectLayer(0); return ui.root; } 77:Tbe0,// Cell 2 — sample actual raster pixels for a legible Plot.dodgeX beeswarm. severityElevationPixels = { const r = severityElevationSource; const severityOrder = [5, 1, 2, 3, 4]; const coverOrder = ["Forest", "Rangeland", "Water", "Shrub"]; const covers = { 2: {name: "Forest", color: "#2e9d57"}, 11: {name: "Rangeland", color: "#c9a46b"}, 1: {name: "Water", color: "#4aa8df"}, 7: {name: "Shrub", color: "#a1d76a"} }; const maxPerBS = 1500; // Increase for more dots; all 373 BS5 pixels are retained. const validElevation = e => Number.isFinite(e) && e !== r.noData; let min = Infinity, max = -Infinity; for (const e of r.elevation) { if (validElevation(e)) { min = Math.min(min, e); max = Math.max(max, e); } } if (!(max > min)) throw new Error("Band 2 needs a valid elevation range."); const indicesBySeverity = Object.fromEntries(severityOrder.map(s => [s, []])); const countsBySeverity = Object.fromEntries(severityOrder.map(s => [s, 0])); let validCount = 0; for (let i = 0; i < r.severity.length; ++i) { const s = r.severity[i], lc = r.landCover[i], e = r.elevation[i]; if (!indicesBySeverity[s] || !covers[lc] || !validElevation(e)) continue; indicesBySeverity[s].push(i); ++countsBySeverity[s]; ++validCount; } if (!validCount) throw new Error("No pixels have valid severity, elevation, and land cover."); // A seeded reservoir gives the same spatially unbiased selection on every run. const reservoir = (indices, limit, seed) => { const selected = indices.slice(0, limit); let state = seed >>> 0; for (let j = limit; j < indices.length; ++j) { state = (Math.imul(state, 1664525) + 1013904223) >>> 0; const k = Math.floor(state / 4294967296 * (j + 1)); if (k < limit) selected[k] = indices[j]; } return selected; }; const pixels = []; const sampledBySeverity = {}; for (const s of severityOrder) { const rare = [], common = []; for (const i of indicesBySeverity[s]) { const lc = r.landCover[i]; (lc === 1 || lc === 7 ? rare : common).push(i); } const selected = rare.concat(reservoir(common, Math.max(0, maxPerBS - rare.length), s * 9781)); sampledBySeverity[s] = selected.length; for (const i of selected) { const elevationMeters = r.elevation[i], landCoverCode = r.landCover[i]; pixels.push({ pixelIndex: i, bs: `BS${s}`, z: (elevationMeters - min) / (max - min), elevationMeters, landCoverCode, landCover: covers[landCoverCode].name, row: Math.floor(i / r.width), column: i % r.width }); } } // Put the rare land covers above common dots when marks overlap. const drawOrder = {Rangeland: 0, Forest: 1, Shrub: 2, Water: 3}; pixels.sort((a, b) => drawOrder[a.landCover] - drawOrder[b.landCover]); return {pixels, severityOrder: severityOrder.map(s => `BS${s}`), coverOrder, covers, countsBySeverity, sampledBySeverity, validCount, min, max, maxPerBS}; } 78:T90a,// Cell 3 — the same faceted Plot.dodgeX structure as the fire-record chart. severityElevationChart = { const data = severityElevationPixels; const background = "#ffffff"; const text = "#333333"; const lightGrey = "#dddddd"; const chart = Plot.plot({ title: "Burn severity and normalized elevation", subtitle: `${data.pixels.length.toLocaleString()} sampled raster pixels · ${data.validCount.toLocaleString()} valid pixels total · Colored by land cover`, width, height: 1400, marginLeft: 85, marginBottom: 60, style: { background, color: text, fontFamily: "system-ui, sans-serif", fontSize: "12px" }, fx: { domain: data.severityOrder, axis: null, padding: 0.15 }, y: { domain: [0, 1], axis: null }, color: { type: "ordinal", domain: data.coverOrder, range: data.coverOrder.map(name => Object.values(data.covers).find(cover => cover.name === name).color), legend: true, label: "Land cover" }, marks: [ Plot.gridY({ticks: 11, stroke: lightGrey, strokeOpacity: 0.7}), Plot.axisY({ label: "Normalized elevation (0–1)", ticks: 11, tickFormat: ".1f", fill: text, stroke: text }), Plot.axisFx({ anchor: "bottom", label: "Burn severity bin", tickFormat: d => d, tickSize: 6, fill: text, stroke: text }), Plot.dot( data.pixels, Plot.dodgeX( {anchor: "middle", padding: 0.5}, { fx: "bs", y: "z", fill: "landCover", r: 3, stroke: "#666666", strokeWidth: 0.35, fillOpacity: 0.85, title: d => `Pixel row ${d.row}, column ${d.column}\n${d.bs}\n${d.landCover} (${d.landCoverCode})\nElevation: ${d.elevationMeters.toFixed(2)} m\nNormalized elevation: ${d.z.toFixed(4)}`, tip: true } ) ) ] }); Object.assign(chart.style, { background, color: text, padding: "20px", borderRadius: "10px", boxSizing: "border-box" }); chart.querySelectorAll("h2, h3").forEach(heading => { heading.style.color = text; }); return chart; } 79:T5b9,// Cell 2 — Attachment registry incidentFiles = [ { geojson: FileAttachment("d342afec-08f5-4281-8012-b16b024b700f.geojson"), raster: FileAttachment("d342afec-08f5-4281-8012-b16b024b700f.tif") }, { geojson: FileAttachment("938686bb-0f52-47b2-b077-eb307941d939.geojson"), raster: FileAttachment("938686bb-0f52-47b2-b077-eb307941d939.tif") }, { geojson: FileAttachment("56c3e0ae-98ef-4433-863d-23a5dff3d0c2.geojson"), raster: FileAttachment("56c3e0ae-98ef-4433-863d-23a5dff3d0c2.tif") }, { geojson: FileAttachment("0afebc32-36ee-4fa8-aec5-419c9c6ba51d.geojson"), raster: FileAttachment("0afebc32-36ee-4fa8-aec5-419c9c6ba51d.tif") }, { geojson: FileAttachment("bd5901d9-c99a-45cb-b799-f1cad5f3ea4b.geojson"), raster: FileAttachment("bd5901d9-c99a-45cb-b799-f1cad5f3ea4b.tif") }, { geojson: FileAttachment("d87d9fb8-3e55-4cf8-bb70-f099c48ab590.geojson"), raster: FileAttachment("d87d9fb8-3e55-4cf8-bb70-f099c48ab590.tif") }, { geojson: FileAttachment("441fd48b-515b-49e8-984c-515ea5d0cd49.geojson"), raster: FileAttachment("441fd48b-515b-49e8-984c-515ea5d0cd49.tif") }, { geojson: FileAttachment("e196f860-9453-482c-a02c-fdf306aa083c.geojson"), raster: FileAttachment("e196f860-9453-482c-a02c-fdf306aa083c.tif") }, { geojson: FileAttachment("0e2a947f-0fb4-4a97-8d5e-888923504cbb.geojson"), raster: FileAttachment("0e2a947f-0fb4-4a97-8d5e-888923504cbb.tif") } ]7a:T45b,// Cell 5 — Selected raster mtbs = { const buffer = await incident.raster.arrayBuffer(); const image = await (await libraries.GeoTIFF.fromArrayBuffer(buffer)).getImage(); const keys = image.getGeoKeys(); const crs = keys.ProjectedCSTypeGeoKey ?? keys.GeographicTypeGeoKey; if (![5070, 4326].includes(crs)) { throw new Error(`Unsupported raster CRS: EPSG:${crs}`); } const [rx, ry] = image.getResolution(); if (image.getFileDirectory().ModelTransformation || !(rx > 0 && ry < 0)) { throw new Error("Expected a north-up raster without rotation."); } const values = await image.readRasters({samples: [0], interleave: true}); const noData = image.getGDALNoData(); const bounds = image.getBoundingBox(); return { crs, width: image.getWidth(), height: image.getHeight(), bounds, // Correct longitude/latitude display proportions at the map's mid-latitude. xAspect: crs === 4326 ? Math.cos((bounds[1] + bounds[3]) / 2 * Math.PI / 180) : 1, values: Float32Array.from(values, value => value !== noData && [1, 2, 3, 4].includes(value) ? value : NaN ) }; }7b:T5b7,// Cell 6 — Selected perimeters perimeters = { const geojson = incident.geojson; const declared = geojson.crs?.properties?.name || "CRS84"; const source = /5070$/.test(declared) ? 5070 : /4326$|CRS84$/i.test(declared) ? 4326 : null; if (!source) throw new Error(`Unsupported GeoJSON CRS: ${declared}`); const definitions = { 4326: "EPSG:4326", 5070: "+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs" }; const project = coordinates => typeof coordinates[0] === "number" ? source === mtbs.crs ? coordinates.slice(0, 2) : libraries.proj4(definitions[source], definitions[mtbs.crs], coordinates.slice(0, 2)) : coordinates.map(project); const features = geojson.features.map(feature => { const utc = feature.properties.UTC; const time = Date.parse(/(?:Z|[+-]\d{2}:?\d{2})$/i.test(utc) ? utc : `${utc}Z`); if (!Number.isFinite(time)) throw new Error(`Invalid UTC timestamp: ${utc}`); if (!["Polygon", "MultiPolygon"].includes(feature.geometry?.type)) { throw new Error("Expected Polygon or MultiPolygon perimeters."); } return { type: "Feature", properties: {...feature.properties, time}, geometry: {...feature.geometry, coordinates: project(feature.geometry.coordinates)} }; }); if (!features.length) throw new Error("No perimeters found."); return features.sort((a, b) => a.properties.time - b.properties.time); }7c:Tbf9,// Cell 10 — Pixel-center counts perimeterCounts = { const {width: w, height: h, bounds, values} = mtbs; const [west, south, east, north] = bounds; const dx = (east - west) / w, dy = (north - south) / h; const stride = w + 1; // Cumulative counts along each row: class 0 represents no-data/other. const sums = Array.from({length: 5}, () => new Uint32Array(h * stride)); for (let row = 0; row < h; ++row) { const offset = row * stride; for (let col = 0; col < w; ++col) { const v = values[row * w + col]; const kind = Number.isInteger(v) && v >= 1 && v <= 4 ? v : 0; for (let k = 0; k < 5; ++k) { sums[k][offset + col + 1] = sums[k][offset + col] + (kind === k); } } } return perimeters.map(feature => { const spans = Array.from({length: h}, () => []); const add = (row, left, right) => { const a = Math.max(0, Math.ceil((left - west) / dx - 0.5)); const b = Math.min(w, Math.floor((right - west) / dx - 0.5) + 1); if (a < b) spans[row].push([a, b]); }; const polygons = feature.geometry.type === "Polygon" ? [feature.geometry.coordinates] : feature.geometry.coordinates; for (const polygon of polygons) { const crossings = Array.from({length: h}, () => []); for (const ring of polygon) { for (let j = 0, k = ring.length - 1; j < ring.length; k = j++) { const [ax, ay] = ring[k], [bx, by] = ring[j]; const r0 = Math.max(0, Math.ceil((north - Math.max(ay, by)) / dy - 0.5)); const r1 = Math.min(h - 1, Math.floor((north - Math.min(ay, by)) / dy - 0.5)); for (let row = r0; row <= r1; ++row) { const y = north - (row + 0.5) * dy; if (ay === by) { if (y === ay) add(row, Math.min(ax, bx), Math.max(ax, bx)); } else { const x = ax + (y - ay) * (bx - ax) / (by - ay); if ((ay > y) !== (by > y)) crossings[row].push(x); if (y === ay || y === by) add(row, x, x); } } } } // Even/odd intersections handle the outer ring and its holes together. crossings.forEach((xs, row) => { xs.sort((a, b) => a - b); for (let j = 0; j + 1 < xs.length; j += 2) add(row, xs[j], xs[j + 1]); }); } const counts = [0, 0, 0, 0, 0]; spans.forEach((intervals, row) => { intervals.sort((a, b) => a[0] - b[0]); let end = 0; for (const [a, b] of intervals) { const start = Math.max(a, end); if (start < b) { for (let k = 0; k < 5; ++k) { counts[k] += sums[k][row * stride + b] - sums[k][row * stride + start]; } } end = Math.max(end, b); // Union overlapping polygon parts: count once. } }); const rows = [1, 2, 3, 4].map(severity => ({severity, count: counts[severity]})); return { rows, total: counts.slice(1).reduce((a, b) => a + b, 0), excludedCells: counts[0], timestamp: new Date(feature.properties.time).toISOString() }; }); }7d:T705,// Cell 11 — Acreage chart helper function acreageChart(activeIndex, mode, chartWidth) { const {Plot, d3} = libraries; const series = perimeters.map((feature, index) => { const value = feature.properties.Acres; return { index, date: new Date(feature.properties.time), acres: value == null || value === "" ? NaN : Number(value) }; }); const firstDate = series[0].date; const lastDate = series[series.length - 1].date; const sameDate = +firstDate === +lastDate; const shown = mode === "Animated" ? series.slice(0, activeIndex + 1) : series; const highlight = mode === "First" || mode === "Last"; const chart = Plot.plot({ title: "Acreage progression", width: chartWidth, height: 330, marginLeft: 62, marginRight: 24, marginTop: 24, marginBottom: 55, style: {background: "white"}, x: { type: "utc", domain: sameDate ? [new Date(+firstDate - 43200000), new Date(+lastDate + 43200000)] : [firstDate, lastDate], ticks: sameDate ? [firstDate] : [firstDate, lastDate], tickFormat: d3.utcFormat("%Y-%m-%d"), label: "Perimeter time (UTC)", inset: 8 }, y: { domain: [0, Math.max(1, d3.max(series, d => d.acres) ?? 0) * 1.05], label: "Acres", ticks: 3, tickFormat: d3.format(",.0f"), grid: true }, opacity: {domain: [0, 1], range: [0, 1]}, marks: [ Plot.line(shown, { x: "date", y: "acres", stroke: "#b84a00", strokeWidth: 1.8 }), Plot.dot(shown, { x: "date", y: "acres", r: 3.5, fill: "#b84a00", fillOpacity: d => highlight && d.index !== activeIndex ? 0.2 : 1, title: d => `${d.date.toISOString()}\n${d3.format(",.1f")(d.acres)} acres` }) ] }); chart.dataset.chart = "acreage"; return chart; }7e:T1084,// Cell 12 — Three-chart row helper function severityCharts(summary, availableWidth, maxCount, activeIndex, mode) { const {Plot, d3} = libraries; const {rows = [], total = 0, excludedCells = 0, timestamp} = summary ?? {}; const count = d3.format(",d"); const percent = d3.format(".1%"); const w = Math.min(availableWidth, 1200); const panelWidth = w < 900 ? w : (w - 48) / 3; const data = rows.map(d => ({...d, share: total ? d.count / total : 0})); const description = d => `Severity ${d.severity}: ${count(d.count)} cells (${percent(d.share)})`; const root = document.createElement("div"); Object.assign(root.style, {maxWidth: `${w}px`, font: "13px system-ui", color: "#222"}); const panels = document.createElement("div"); Object.assign(panels.style, { display: "grid", gap: "24px", alignItems: "start", gridTemplateColumns: w < 900 ? "1fr" : "repeat(3, minmax(0, 1fr))" }); if (mode === "All") { // Preserve the third-column position on wide screens; no empty rows on mobile. for (let i = 0; i < 2; ++i) { const blank = document.createElement("div"); blank.style.display = w < 900 ? "none" : "block"; panels.append(blank); } panels.append(acreageChart(null, mode, panelWidth)); root.append(panels); return root; } const bars = Plot.plot({ title: "Cell counts", width: panelWidth, height: 330, marginLeft: 60, marginTop: 30, style: {background: "white"}, x: {domain: [1, 2, 3, 4], label: "Severity (1 = least; 4 = most)"}, y: { domain: [0, Math.max(1, maxCount) * 1.15], label: "Raster cells", grid: true, tickFormat: d => Number.isInteger(d) ? count(d) : "" }, color: { type: "ordinal", domain: [1, 2, 3, 4], range: severityColors, legend: false }, marks: [ Plot.barY(data, {x: "severity", y: "count", fill: "severity", title: description}), Plot.ruleY([0]), Plot.text(data, {x: "severity", y: "count", text: d => count(d.count), dy: -10}) ] }); const piePanel = document.createElement("div"); const heading = document.createElement("h2"); heading.textContent = "Share of classified cells"; Object.assign(heading.style, {fontSize: "17px", margin: "0 0 8px"}); const svg = d3.create("svg") .attr("viewBox", "-150 -125 300 250") .attr("width", panelWidth).attr("height", 250) .attr("role", "img").attr("aria-label", "Severity proportions") .style("display", "block").style("max-width", "100%"); svg.append("title").text(total ? data.map(description).join("; ") : "No classified cells inside this perimeter"); if (total > 0) { const arcs = d3.pie().sort(null).value(d => d.count)(data); svg.selectAll("path").data(arcs.filter(d => d.value > 0)).join("path") .attr("d", d3.arc().innerRadius(0).outerRadius(110)) .attr("fill", d => severityColors[d.data.severity - 1]) .attr("stroke", "white").attr("stroke-width", 1) .append("title").text(d => description(d.data)); } else { svg.append("text").attr("text-anchor", "middle") .attr("fill", "#666").text("No classified cells"); } // Labels outside the pie keep even very small slices readable. const legend = document.createElement("div"); Object.assign(legend.style, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 12px" }); for (const d of data) { const item = document.createElement("div"); const swatch = document.createElement("span"); Object.assign(swatch.style, { display: "inline-block", width: "12px", height: "12px", marginRight: "6px", background: severityColors[d.severity - 1] }); item.append(swatch, `Class ${d.severity}: ${total ? percent(d.share) : "—"}`); legend.append(item); } piePanel.append(heading, svg.node(), legend); panels.append(bars, piePanel, acreageChart(activeIndex, mode, panelWidth)); const caption = document.createElement("p"); caption.textContent = `${timestamp.replace("T", " ").replace(".000Z", " UTC")} · ` + `${count(total)} classified cells; ${count(excludedCells)} no-data/other cells excluded. ` + "Percentages use classified cells only."; root.append(panels, caption); return root; }7f:T4ae,// ==================== CELL 3 (cell-03.ojs) ==================== bivarSource = { // Upload the TIFF in Observable's Files pane, keeping this exact filename. // GeoTIFF.js uses zero-based samples: [0, 1] = Band 1 and Band 2. const buffer = await FileAttachment("MCFARLAND_multiband_5070.tif").arrayBuffer(); const tiff = await bivarLibraries.GeoTIFF.fromArrayBuffer(buffer); const image = await tiff.getImage(); if (image.getSamplesPerPixel() < 2) throw new Error("Two bands are required."); if (image.getGeoKeys()?.ProjectedCSTypeGeoKey !== 5070) { throw new Error("Expected EPSG:5070 (NAD83 / Conus Albers)."); } const directory = image.getFileDirectory(); const transform = directory.ModelTransformation; const [dx, dy] = image.getResolution(); if ((transform && (transform[1] !== 0 || transform[4] !== 0)) || dx <= 0 || dy >= 0) { throw new Error("This renderer requires a north-up raster without rotation."); } const [severity, elevation] = await image.readRasters({samples: [0, 1]}); return { width: image.getWidth(), height: image.getHeight(), bounds: image.getBoundingBox(), dx, dy, noData: image.getGDALNoData(), severity, elevation }; }80:Ta24,// ==================== CELL 4 (cell-04.ojs) ==================== bivarRaster = { const source = bivarSource; const validElevation = value => Number.isFinite(value) && value !== source.noData; let min = Infinity, max = -Infinity, elevationCount = 0; // Normalize over ALL valid Band 2 pixels in this raster, independently of BS. for (const value of source.elevation) { if (!validElevation(value)) continue; min = Math.min(min, value); max = Math.max(max, value); ++elevationCount; } if (!elevationCount) throw new Error("Band 2 has no valid elevation pixels."); const span = max - min; if (!(span > 0)) throw new Error("Constant elevation cannot define Low/Medium/High."); const n = source.width * source.height; const z = new Float64Array(n).fill(NaN); const severity = new Uint8Array(n); // 0 = excluded; otherwise BS1–BS4 const classId = new Uint8Array(n); // 0 = excluded; otherwise 1–12 const counts = new Uint32Array(12); const excludedSeverity = new Map(); let validCount = 0, missingElevation = 0; for (let i = 0; i < n; ++i) { const s = source.severity[i], e = source.elevation[i]; // Preserve normalized elevation wherever it exists, including excluded BS. if (validElevation(e)) z[i] = Math.max(0, Math.min(1, (e - min) / span)); if (!Number.isInteger(s) || s < 1 || s > 4 || s === source.noData) { const key = !Number.isFinite(s) || s === source.noData ? "NoData" : String(s); excludedSeverity.set(key, (excludedSeverity.get(key) || 0) + 1); continue; } if (!validElevation(e)) { ++missingElevation; continue; } const level = Math.min(2, Math.floor(3 * z[i])); // 0=Lz, 1=Mz, 2=Hz const id = 4 * level + s; // unique categorical ID, NOT a weighted score severity[i] = s; classId[i] = id; ++counts[id - 1]; ++validCount; } const levels = ["Lz", "Mz", "Hz"]; const matrix = Array.from({length: 12}, (_, i) => { const level = Math.floor(i / 4), s = i % 4 + 1; return { id: i + 1, label: levels[level] + bivarOptions.severityLabels[s - 1], severity: s, level, z0: level / 3, z1: (level + 1) / 3, elevation0: min + span * level / 3, elevation1: min + span * (level + 1) / 3, pixels: counts[i], percent: validCount ? counts[i] / validCount * 100 : 0 }; }); if (!validCount) throw new Error("No pixels contain both BS1–BS4 and valid elevation."); return { ...source, severity, z, classId, counts, matrix, min, max, span, validCount, elevationCount, excludedSeverity, missingElevation, excludedCount: n - validCount }; } 81:T44a,// ==================== CELL 6 (cell-06.ojs) ==================== bivarPalette = { const {d3} = bivarLibraries; const c = bivarOptions.corners; const low = d3.interpolateLab(c.lowLow, c.lowHigh); const high = d3.interpolateLab(c.highLow, c.highHigh); // Severity is ordinal: four evenly spaced color positions, not ratio weights. const ramps = Array.from({length: 4}, (_, i) => d3.interpolateLab(low(i / 3), high(i / 3)) ); const color = (s, z) => ramps[s - 1](Math.max(0, Math.min(1, z))); // Three-level mode uses endpoints 0, .5, 1 for strong, readable row colors. // Continuous mode uses 256 display shades per severity; data retain full Z. const lookup = ramps.map((_, s) => Array.from({length: 256}, (_, j) => { const rgb = d3.rgb(color(s + 1, j / 255)); return [Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b), 255]; })); const bandLookup = ramps.map((_, s) => [0, .5, 1].map(z => { const rgb = d3.rgb(color(s + 1, z)); return [Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b), 255]; })); return {color, lookup, bandLookup}; }82:Tea3,// ==================== CELL 7 (cell-07.ojs) ==================== bivarLegend = function(mode) { const {d3} = bivarLibraries; const r = bivarRaster, palette = bivarPalette; const continuous = mode === "Continuous Z"; const root = document.createElement("div"); root.style.cssText = "max-width:510px;font:13px system-ui;color:#262626"; const title = document.createElement("div"); title.textContent = "Elevation × burn severity"; title.style.cssText = "font-weight:650;margin:0 0 6px"; root.append(title); const svg = d3.create("svg").attr("viewBox", "0 0 500 300") .attr("role", "img").attr("aria-label", "Bivariate color legend: elevation increases upward; severity increases rightward") .style("width", "100%").style("display", "block"); const x0 = 128, y0 = 12, w = 78, h = 186, steps = continuous ? 186 : 3; for (let s = 1; s <= 4; ++s) { for (let j = 0; j < steps; ++j) { const z = continuous ? j / (steps - 1) : j / 2; svg.append("rect").attr("x", x0 + (s - 1) * w) .attr("y", y0 + h - (j + 1) * h / steps) .attr("width", w).attr("height", h / steps + (continuous ? .2 : 0)) .attr("fill", palette.color(s, z)); } svg.append("text").attr("x", x0 + (s - .5) * w).attr("y", y0 + h + 21) .attr("text-anchor", "middle").text(`${bivarOptions.severityLabels[s - 1]} (BS${s})`); } svg.append("rect").attr("x", x0).attr("y", y0).attr("width", 4 * w) .attr("height", h).attr("fill", "none").attr("stroke", "#777"); for (let s = 1; s < 4; ++s) svg.append("path") .attr("d", `M${x0 + s * w},${y0}v${h}`).attr("stroke", "#ffffff88"); const fmt = d3.format(",.1f"); if (continuous) { for (const z of [0, .5, 1]) { svg.append("text").attr("x", x0 - 9).attr("y", y0 + (1 - z) * h + 4) .attr("text-anchor", "end").text(`Z ${z.toFixed(1)}`); } } else { for (let level = 0; level < 3; ++level) { const y = y0 + (2 - level) * h / 3; const name = ["Low (Lz)", "Medium (Mz)", "High (Hz)"][level]; svg.append("text").attr("x", x0 - 10).attr("y", y + h / 6 - 3) .attr("text-anchor", "end").text(name); svg.append("text").attr("x", x0 - 10).attr("y", y + h / 6 + 14) .attr("text-anchor", "end").attr("font-size", 11) .text(`Z ${["[0, ⅓)", "[⅓, ⅔)", "[⅔, 1]"][level]}`); if (level > 0) svg.append("path").attr("d", `M${x0},${y0 + h - level * h / 3}h${4 * w}`) .attr("stroke", "#ffffff88"); for (let s = 1; s <= 4; ++s) { const entry = r.matrix[level * 4 + s - 1]; const fill = palette.color(s, level / 2); const ink = d3.lab(fill).l < 55 ? "white" : "#202020"; svg.append("text").attr("x", x0 + (s - .5) * w).attr("y", y + h / 6 - 3) .attr("text-anchor", "middle").attr("fill", ink).attr("font-size", 11).text(entry.label); svg.append("text").attr("x", x0 + (s - .5) * w).attr("y", y + h / 6 + 14) .attr("text-anchor", "middle").attr("fill", ink).attr("font-size", 11) .text(d3.format(",")(entry.pixels)); } } } svg.append("text").attr("x", x0 + 2 * w).attr("y", y0 + h + 45) .attr("text-anchor", "middle").text("Burn severity increases →"); const caption = svg.append("text").attr("x", 0).attr("y", 270).attr("font-size", 12); caption.append("tspan").attr("x", 0).text(`Raster elevation: ${fmt(r.min)}–${fmt(r.max)} ${bivarOptions.elevationUnit}; Z = (elevation − min) / (max − min).`); caption.append("tspan").attr("x", 0).attr("dy", 18) .text(continuous ? "Color is continuous in elevation within each severity column." : "Equal elevation intervals; cell labels show pixel counts. Higher elevation ↑"); root.append(svg.node()); return root; } 83:Te81,// ==================== CELL 8 (cell-08.ojs) ==================== bivariateMap = { const r = bivarRaster, {d3} = bivarLibraries, palette = bivarPalette; const root = document.createElement("figure"); root.style.cssText = "margin:0;max-width:920px;font:13px system-ui;color:#262626"; const title = document.createElement("h3"); title.textContent = "MCFARLAND · burn severity × elevation"; title.style.cssText = "font:600 20px system-ui;margin:0 0 12px"; const canvas = document.createElement("canvas"); canvas.width = r.width; canvas.height = r.height; const [west, south, east, north] = r.bounds; canvas.style.cssText = `display:block;width:${Math.min(width, 920)}px;max-width:100%;height:auto;aspect-ratio:${(east-west)/(north-south)};image-rendering:pixelated;background:#eeefef;outline:1px solid #d4d4d4;touch-action:pan-y`; canvas.setAttribute("role", "img"); canvas.setAttribute("aria-label", "MCFARLAND bivariate raster. Native EPSG:5070 grid, north at top. Gray background denotes excluded pixels."); const context = canvas.getContext("2d"); const image = context.createImageData(r.width, r.height); for (let i = 0; i < r.severity.length; ++i) { const s = r.severity[i]; if (!s) continue; // RGBA remains transparent for excluded pixels. const rgb = bivarMode === "Continuous Z" ? palette.lookup[s - 1][Math.round(r.z[i] * 255)] : palette.bandLookup[s - 1][Math.min(2, Math.floor(3 * r.z[i]))]; image.data.set(rgb, 4 * i); } context.putImageData(image, 0, 0); const status = document.createElement("div"); status.style.cssText = "min-height:3em;padding:10px 0;font-variant-numeric:tabular-nums;line-height:1.45"; status.setAttribute("aria-live", "polite"); const prompt = "Hover over a pixel for severity, elevation, normalized Z, and matrix class."; status.textContent = prompt; const showPixel = event => { const box = canvas.getBoundingClientRect(); const col = Math.floor((event.clientX - box.left) / box.width * r.width); const row = Math.floor((event.clientY - box.top) / box.height * r.height); if (col < 0 || col >= r.width || row < 0 || row >= r.height) return; const i = row * r.width + col, s = r.severity[i]; const position = `row ${row}, column ${col}`; if (!s) { const rawS = bivarSource.severity[i]; status.textContent = `${position} · Excluded: source BS = ${rawS === r.noData ? "NoData" : rawS}; requires BS1–BS4 and valid elevation.`; return; } const item = r.matrix[r.classId[i] - 1]; const x = west + (col + .5) * r.dx, y = north + (row + .5) * r.dy; status.textContent = `${position} · BS${s} (${bivarOptions.severityLabels[s - 1]}) · elevation ${d3.format(",.2f")(r.elevation[i])} ${bivarOptions.elevationUnit} · Z ${r.z[i].toFixed(4)} · ${item.label} (ID ${item.id}) · EPSG:5070 center [${x.toFixed(0)}, ${y.toFixed(0)}]`; }; canvas.addEventListener("pointermove", showPixel); canvas.addEventListener("pointerleave", () => { status.textContent = prompt; }); const caption = document.createElement("figcaption"); caption.style.cssText = "line-height:1.5;color:#555;margin:0 0 12px"; const exclusions = [...r.excludedSeverity].map(([key, n]) => `${key}: ${d3.format(",")(n)}`).join("; "); caption.textContent = `${d3.format(",")(r.validCount)} mapped pixels · ${r.width} × ${r.height} native grid · ${r.dx} × ${Math.abs(r.dy)} m cells · EPSG:5070. Gray = excluded. Severity exclusions (${exclusions}); missing elevation among BS1–BS4: ${d3.format(",")(r.missingElevation)}. Elevation units assumed ${bivarOptions.elevationUnit}.`; root.append(title, canvas, status, caption, bivarLegend(bivarMode)); return root; }84:T476,orangeCyanSource = { // Upload the TIFF in Observable's Files pane, keeping this exact filename. // GeoTIFF.js uses zero-based samples: [0, 1] = Band 1 and Band 2. const buffer = await FileAttachment("MCFARLAND_multiband_5070.tif").arrayBuffer(); const tiff = await orangeCyanLibraries.GeoTIFF.fromArrayBuffer(buffer); const image = await tiff.getImage(); if (image.getSamplesPerPixel() < 2) throw new Error("Two bands are required."); if (image.getGeoKeys()?.ProjectedCSTypeGeoKey !== 5070) { throw new Error("Expected EPSG:5070 (NAD83 / Conus Albers)."); } const directory = image.getFileDirectory(); const transform = directory.ModelTransformation; const [dx, dy] = image.getResolution(); if ((transform && (transform[1] !== 0 || transform[4] !== 0)) || dx <= 0 || dy >= 0) { throw new Error("This renderer requires a north-up raster without rotation."); } const [severity, elevation] = await image.readRasters({samples: [0, 1]}); return { width: image.getWidth(), height: image.getHeight(), bounds: image.getBoundingBox(), dx, dy, noData: image.getGDALNoData(), severity, elevation }; }85:T633,orangeCyanPixels = { const source = orangeCyanSource; const validElevation = e => Number.isFinite(e) && e !== source.noData; let min = Infinity, max = -Infinity, elevationCount = 0; for (const e of source.elevation) { if (!validElevation(e)) continue; min = Math.min(min, e); max = Math.max(max, e); ++elevationCount; } if (!elevationCount) throw new Error("Band 2 has no valid elevation values."); const span = max - min; if (!(span > 0)) throw new Error("Elevation has no range for min–max normalization."); const n = source.width * source.height; const z = new Float64Array(n).fill(NaN); const severity = new Uint8Array(n); // 0 = excluded; 1–4 retain original BS const counts = new Uint32Array(4); const excludedSeverity = new Map(); let validCount = 0, missingElevation = 0; for (let i = 0; i < n; ++i) { const s = source.severity[i], e = source.elevation[i]; if (validElevation(e)) z[i] = Math.max(0, Math.min(1, (e - min) / span)); if (!Number.isInteger(s) || s < 1 || s > 4 || s === source.noData) { const key = !Number.isFinite(s) || s === source.noData ? "NoData" : String(s); excludedSeverity.set(key, (excludedSeverity.get(key) || 0) + 1); } else if (!validElevation(e)) ++missingElevation; else { severity[i] = s; ++counts[s - 1]; ++validCount; } } if (!validCount) throw new Error("No pixels have both BS1–BS4 and valid elevation."); return {...source, severity, z, min, max, span, counts, validCount, elevationCount, excludedSeverity, missingElevation, excludedCount: n - validCount}; }86:T62a,orangeCyanRaster = { const r = orangeCyanPixels; const p = Number(orangeCyanSettings.p); if (!Number.isFinite(p) || p < 0 || p > 1) throw new Error("p must be between 0 and 1."); const weights = [1, 2, 3, 4].map(s => Math.pow(s, p)); const values = new Float64Array(r.width * r.height).fill(NaN); const stats = weights.map((weight, j) => ({ severity: j + 1, label: orangeCyanOptions.severityLabels[j], weight, pixels: 0, sumZ: 0, sumValue: 0, minValue: Infinity, maxValue: -Infinity })); let valueMin = Infinity, valueMax = -Infinity; for (let i = 0; i < values.length; ++i) { const s = r.severity[i]; if (!s) continue; const value = r.z[i] * weights[s - 1]; values[i] = value; // full precision; zero is valid; NaN marks exclusion valueMin = Math.min(valueMin, value); valueMax = Math.max(valueMax, value); const row = stats[s - 1]; ++row.pixels; row.sumZ += r.z[i]; row.sumValue += value; row.minValue = Math.min(row.minValue, value); row.maxValue = Math.max(row.maxValue, value); } const summary = stats.map(row => ({ severity: row.severity, label: row.label, weight: row.weight, pixels: row.pixels, meanZ: row.pixels ? row.sumZ / row.pixels : NaN, meanValue: row.pixels ? row.sumValue / row.pixels : NaN, minValue: row.pixels ? row.minValue : NaN, maxValue: row.pixels ? row.maxValue : NaN })); return {...r, values, p, weights, summary, valueMin, valueMax, // Fixed theoretical domain, rather than rescaling by observed extrema. valueDomain: [0, weights[3]], noDataValue: NaN}; }87:T43c,orangeCyanPalette = { const {d3} = orangeCyanLibraries, grid = orangeCyanOptions.colorGrid; // Interpolate through all nine reference anchors in CIELAB. // Four BS positions sample this surface; each pixel retains its own Z. const rowRamps = grid.map(row => d3.piecewise(d3.interpolateLab, row)); const ramps = Array.from({length: 4}, (_, j) => d3.piecewise(d3.interpolateLab, rowRamps.map(row => row(j / 3)))); const color = (s, z) => ramps[s - 1](Math.max(0, Math.min(1, z))); const rgba = css => { const rgb = d3.rgb(css); return [Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b), 255]; }; // Display lookup only: the numeric raster never uses these shade indices. const shades = 1024; const lookup = ramps.map((_, j) => Array.from({length: shades}, (_, k) => rgba(color(j + 1, k / (shades - 1))))); const valueColor = t => d3.interpolateCividis(Math.max(0, Math.min(1, t))); const valueLookup = Array.from({length: shades}, (_, k) => rgba(valueColor(k / (shades - 1)))); return {color, lookup, valueColor, valueLookup, shades}; }88:T156f,orangeCyanLegend = function(colorBy) { const {d3} = orangeCyanLibraries, r = orangeCyanRaster, palette = orangeCyanPalette; const root = document.createElement("div"); root.style.cssText = "max-width:550px;font:13px system-ui;color:#262626"; root.value = 0; // 0 = all; 1–4 = the selected original severity band const targets = []; const controls = document.createElement("div"); controls.style.cssText = "display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0"; const reset = document.createElement("button"); reset.type = "button"; reset.textContent = "Show all"; const selection = document.createElement("span"); selection.setAttribute("aria-live", "polite"); controls.append(reset, selection); const refresh = () => { reset.disabled = root.value === 0; selection.textContent = root.value ? `Showing BS${root.value}` : "Showing all BS bands"; for (const {node, s} of targets) { node.setAttribute("aria-pressed", String(root.value === s)); node.style.opacity = !root.value || root.value === s ? "1" : "0.25"; const swatch = node.querySelector("[data-swatch]"); if (swatch) swatch.setAttribute("stroke", root.value === s ? "#111" : "none"); } }; const choose = s => { root.value = root.value === s ? 0 : s; refresh(); root.dispatchEvent(new Event("input", {bubbles: true})); }; reset.addEventListener("click", () => choose(0)); const makeInteractive = (node, s) => { node.setAttribute("data-bs", s); node.setAttribute("aria-label", `Filter map to BS${s}; activate again to show all`); if (node.tagName.toLowerCase() !== "button") { node.setAttribute("role", "button"); node.setAttribute("tabindex", "0"); node.addEventListener("keydown", event => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); choose(s); } }); } node.style.cursor = "pointer"; node.addEventListener("click", () => choose(s)); targets.push({node, s}); }; const title = document.createElement("div"); title.textContent = colorBy === "Numeric value" ? "Pixel value = Z × BSᵖ" : "Pixel colors: severity × normalized elevation"; title.style.fontWeight = "650"; const svg = d3.create("svg").attr("viewBox", "0 0 520 270") .attr("role", "group").style("width", "100%").style("display", "block"); const prefix = `bivar-${crypto.randomUUID()}`, defs = svg.append("defs"); const gradient = (id, color, vertical) => { const ramp = defs.append("linearGradient").attr("id", id) .attr("x1", "0%").attr("y1", vertical ? "100%" : "0%") .attr("x2", vertical ? "0%" : "100%").attr("y2", "0%"); for (let j = 0; j <= 128; ++j) ramp.append("stop") .attr("offset", `${j / 128 * 100}%`).attr("stop-color", color(j / 128)); return `url(#${id})`; }; if (colorBy === "Numeric value") { for (let s = 1; s <= 4; ++s) { const button = document.createElement("button"); button.type = "button"; button.textContent = `BS${s}`; makeInteractive(button, s); controls.append(button); } svg.attr("aria-label", "Numeric value gradient from zero to four raised to p"); svg.append("rect").attr("x", 60).attr("y", 30).attr("width", 400).attr("height", 40) .attr("fill", gradient(`${prefix}-value`, palette.valueColor, false)); const scale = d3.scaleLinear().domain(r.valueDomain).range([60, 460]); svg.append("g").attr("transform", "translate(0,70)") .call(d3.axisBottom(scale).ticks(5)); svg.append("text").attr("x", 60).attr("y", 125) .text(`p = ${r.p.toFixed(2)}; theoretical value range 0–${d3.format(".3f")(r.weights[3])}`); svg.append("text").attr("x", 60).attr("y", 150) .text("Same numeric value → same color."); } else { svg.attr("aria-label", "Four severity columns, normalized elevation increasing upward without elevation classes"); const x0 = 100, y0 = 12, w = 90, h = 172; for (let s = 1; s <= 4; ++s) { const band = svg.append("g"); makeInteractive(band.node(), s); band.append("rect").attr("data-swatch", "").attr("stroke-width", 3) .attr("vector-effect", "non-scaling-stroke") .attr("x", x0 + (s - 1) * w).attr("y", y0) .attr("width", w).attr("height", h) .attr("fill", gradient(`${prefix}-bs${s}`, z => palette.color(s, z), true)); band.append("text").attr("x", x0 + (s - .5) * w).attr("y", y0 + h + 21) .attr("text-anchor", "middle").text(`${orangeCyanOptions.severityLabels[s - 1]} (BS${s})`); // One hit target covers both the gradient band and its label. band.append("rect").attr("x", x0 + (s - 1) * w).attr("y", y0) .attr("width", w).attr("height", h + 28).attr("fill", "transparent"); } for (const z of [0, .25, .5, .75, 1]) svg.append("text") .attr("x", x0 - 10).attr("y", y0 + (1 - z) * h + 4) .attr("text-anchor", "end").text(`Z ${z.toFixed(2)}`); svg.append("rect").attr("x", x0).attr("y", y0).attr("width", 4 * w) .attr("height", h).attr("fill", "none").attr("stroke", "#777") .attr("pointer-events", "none"); svg.append("text").attr("x", x0 + 2 * w).attr("y", y0 + h + 44) .attr("text-anchor", "middle").text("Burn severity increases →"); svg.append("text").attr("x", 4).attr("y", 258) .text("Click a BS column to filter; click it again or Show all to reset."); } root.append(title, controls, svg.node()); refresh(); return root; } 89:T8b4,regressionPixels = { const GeoTIFF = await import("https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm"); const tiff = await GeoTIFF.fromArrayBuffer( await FileAttachment("MCFARLAND_multiband_5070.tif").arrayBuffer() ); const image = await tiff.getImage(); if (image.getSamplesPerPixel() !== 5) throw new Error("Expected five bands."); const [severity, elevation, cover, slope] = await image.readRasters({ samples: [0, 1, 2, 4], interleave: false }); const noData = Number(image.getGDALNoData()); const nPixels = image.getWidth() * image.getHeight(); const y = new Uint8Array(nPixels); const elevation100 = new Float32Array(nPixels); const slope10 = new Float32Array(nPixels); const rangeland = new Uint8Array(nPixels); const counts = {severity5: 0, rareCover: 0, missing: 0}; let n = 0, slopeSum = 0, minElevation = Infinity, maxElevation = -Infinity; const bySeverity = [0, 0, 0, 0, 0]; for (let i = 0; i < nPixels; ++i) { const bs = severity[i], e = elevation[i], lc = cover[i], s = slope[i]; if (![bs, e, lc, s].every(Number.isFinite) || bs === noData || e === noData || lc === noData || s === noData) { ++counts.missing; continue; } if (bs === 5) { ++counts.severity5; continue; } if (![1, 2, 3, 4].includes(bs)) { ++counts.missing; continue; } // Water (1) and Shrub (7) have only 16 and 1 usable pixels, respectively. if (lc !== 2 && lc !== 11) { ++counts.rareCover; continue; } y[n] = bs; elevation100[n] = (e - 1000) / 100; // 1 unit = 100 raw meters slope10[n] = (s - 20) / 10; // 1 unit = 10 degrees rangeland[n] = lc === 11 ? 1 : 0; // Forest (2) is the reference ++bySeverity[bs]; slopeSum += s; minElevation = Math.min(minElevation, e); maxElevation = Math.max(maxElevation, e); ++n; } if (!n || bySeverity.slice(1).some(c => c === 0)) { throw new Error("The filtered raster needs observations in all four severity classes."); } return { y: y.subarray(0, n), elevation100: elevation100.subarray(0, n), slope10: slope10.subarray(0, n), rangeland: rangeland.subarray(0, n), n, bySeverity, counts, meanSlope: slopeSum / n, minElevation, maxElevation }; }8a:T1200,// Cell 2: proportional-odds ordinal logistic regression, fitted by BFGS. // logit P(BS > k) = elevation effect + slope effect + cover effect - cutpoint[k]. ordinalRegression = { const d = regressionPixels, n = d.n, m = 6; const sigmoid = z => z >= 0 ? 1 / (1 + Math.exp(-z)) : Math.exp(z) / (1 + Math.exp(z)); const logSigmoid = z => z >= 0 ? -Math.log1p(Math.exp(-z)) : z - Math.log1p(Math.exp(z)); const logit = p => Math.log(p / (1 - p)); const dot = (a, b) => a.reduce((sum, v, i) => sum + v * b[i], 0); const identity = () => Array.from({length: m}, (_, i) => Array.from({length: m}, (_, j) => +(i === j))); function evaluate(t) { const gap12 = Math.exp(t[1]), gap23 = Math.exp(t[2]); const c1 = t[0], c2 = c1 + gap12, c3 = c2 + gap23; if (![c1, c2, c3].every(Number.isFinite)) { return {loss: Infinity, grad: Array(m).fill(NaN)}; } let loss = 0, g1 = 0, g2 = 0, g3 = 0; let ge = 0, gs = 0, gr = 0; for (let i = 0; i < n; ++i) { const eta = t[3] * d.elevation100[i] + t[4] * d.slope10[i] + t[5] * d.rangeland[i]; const y = d.y[i]; let de, dl = 0, du = 0; if (y === 1) { const z = c1 - eta, f = sigmoid(z); loss -= logSigmoid(z); de = 1 - f; du = -de; g1 += du; } else if (y === 4) { const z = c3 - eta, f = sigmoid(z); loss -= logSigmoid(-z); de = -f; dl = f; g3 += dl; } else { const lower = y === 2 ? c1 : c2; const upper = y === 2 ? c2 : c3; const fl = sigmoid(lower - eta), fu = sigmoid(upper - eta); const p = Math.max(fu - fl, 1e-300); loss -= Math.log(p); dl = fl * (1 - fl) / p; du = -fu * (1 - fu) / p; de = -dl - du; if (y === 2) { g1 += dl; g2 += du; } else { g2 += dl; g3 += du; } } ge += de * d.elevation100[i]; gs += de * d.slope10[i]; gr += de * d.rangeland[i]; } return { loss: loss / n, grad: [(g1 + g2 + g3) / n, gap12 * (g2 + g3) / n, gap23 * g3 / n, ge / n, gs / n, gr / n] }; } const p1 = d.bySeverity[1] / n; const p2 = (d.bySeverity[1] + d.bySeverity[2]) / n; const p3 = 1 - d.bySeverity[4] / n; const cuts = [p1, p2, p3].map(logit); let t = [cuts[0], Math.log(cuts[1] - cuts[0]), Math.log(cuts[2] - cuts[1]), 0, 0, 0]; let current = evaluate(t), H = identity(), converged = false, iterations = 0; for (; iterations < 100; ++iterations) { if (Math.max(...current.grad.map(Math.abs)) < 1e-7) { converged = true; break; } let direction = H.map(row => -dot(row, current.grad)); let directional = dot(direction, current.grad); if (directional >= -1e-14) { H = identity(); direction = current.grad.map(v => -v); directional = dot(direction, current.grad); } let alpha = 1, next, candidate; for (let backtrack = 0; backtrack < 30; ++backtrack) { candidate = t.map((v, j) => v + alpha * direction[j]); next = evaluate(candidate); if (Number.isFinite(next.loss) && next.loss <= current.loss + 1e-4 * alpha * directional) break; alpha /= 2; } if (!Number.isFinite(next.loss) || next.loss > current.loss + 1e-4 * alpha * directional) break; const step = candidate.map((v, j) => v - t[j]); const delta = next.grad.map((v, j) => v - current.grad[j]); const sy = dot(step, delta); if (sy > 1e-14) { const Hy = H.map(row => dot(row, delta)); const yHy = dot(delta, Hy); H = H.map((row, i) => row.map((h, j) => h + (1 + yHy / sy) * step[i] * step[j] / sy - (step[i] * Hy[j] + Hy[i] * step[j]) / sy)); } else H = identity(); t = candidate; current = next; if (iterations % 5 === 4) await new Promise(resolve => setTimeout(resolve, 0)); } if (!converged && Math.max(...current.grad.map(Math.abs)) >= 1e-5) { throw new Error("Ordinal regression did not converge; inspect the data and fit."); } const cutpoints = [t[0], t[0] + Math.exp(t[1]), t[0] + Math.exp(t[1]) + Math.exp(t[2])]; return { n, cutpoints, betaElevation100: t[3], betaSlope10: t[4], betaRangeland: t[5], oddsRatioElevation100: Math.exp(t[3]), oddsRatioSlope10: Math.exp(t[4]), oddsRatioRangeland: Math.exp(t[5]), referenceCover: "Forest (code 2)", otherCover: "Rangeland (code 11)", meanSlope: d.meanSlope, minElevation: d.minElevation, maxElevation: d.maxElevation, exclusions: d.counts, converged, iterations, negativeLogLikelihoodPerPixel: current.loss }; } 8b:Tb5f,severityProbabilityPlot = { const Plot = await import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17/+esm"); const fit = ordinalRegression, pixels = regressionPixels; const sigmoid = z => z >= 0 ? 1 / (1 + Math.exp(-z)) : Math.exp(z) / (1 + Math.exp(z)); // Terciles describe the data; their medians are the prediction scenarios. const observedSlopes = Array.from(pixels.slope10, v => v * 10 + 20) .sort((a, b) => a - b); const quantile = p => observedSlopes[Math.round((observedSlopes.length - 1) * p)]; const lowBoundary = quantile(1 / 3), highBoundary = quantile(2 / 3); const slopeScenarios = [ {name: `Low (${quantile(1 / 6).toFixed(1)}°)`, degrees: quantile(1 / 6)}, {name: `Medium (${quantile(1 / 2).toFixed(1)}°)`, degrees: quantile(1 / 2)}, {name: `High (${quantile(5 / 6).toFixed(1)}°)`, degrees: quantile(5 / 6)} ]; const rows = []; const start = Math.floor(fit.minElevation / 25) * 25; const end = Math.ceil(fit.maxElevation / 25) * 25; for (const scenario of slopeScenarios) { for (const [cover, isRangeland] of [["Forest", 0], ["Rangeland", 1]]) { for (let elevation = start; elevation <= end; elevation += 25) { const eta = fit.betaElevation100 * (elevation - 1000) / 100 + fit.betaSlope10 * (scenario.degrees - 20) / 10 + fit.betaRangeland * isRangeland; const [f1, f2, f3] = fit.cutpoints.map(c => sigmoid(c - eta)); const probabilities = [f1, f2 - f1, f3 - f2, 1 - f3]; probabilities.forEach((probability, j) => rows.push({ elevation, cover, slopeGroup: scenario.name, severity: `BS${j + 1}`, probability })); } } } return Plot.plot({ width: Math.min(width, 1000), height: 760, title: "Fitted burn-severity probabilities by elevation and slope", subtitle: `Solid Forest · dotted Rangeland · slope terciles split at ${lowBoundary.toFixed(1)}° and ${highBoundary.toFixed(1)}°`, marginLeft: 55, marginRight: 125, marginBottom: 50, x: {label: "Elevation (m)"}, y: {domain: [0, 1], grid: true, label: "Predicted probability", tickFormat: ".0%"}, fy: {axis: "right", label: "Slope scenario", domain: slopeScenarios.map(s => s.name)}, // Red → orange → yellow as severity increases. color: { type: "ordinal", domain: ["BS1", "BS2", "BS3", "BS4"], range: ["#d7301f", "#f46d43", "#fdae61", "#fdd835"], legend: true }, marks: [ Plot.ruleY([0]), Plot.line(rows.filter(d => d.cover === "Forest"), { x: "elevation", y: "probability", stroke: "severity", strokeWidth: 2.5, fy: "slopeGroup" }), Plot.line(rows.filter(d => d.cover === "Rangeland"), { x: "elevation", y: "probability", stroke: "severity", strokeWidth: 2.5, strokeDasharray: "1.5,4", strokeLinecap: "round", fy: "slopeGroup" }) ] }); } 8c:[{"id":"9296c76385dc91780efcf666020fb6fa61c95616a3fc5a6eaff4f2f24ccc52ee331b2b6dada5542dbcbc8d70972f77c0f825f0818d39edfcbe5b63984d173b3f","href":"https://static.observableusercontent.com/files/9296c76385dc91780efcf666020fb6fa61c95616a3fc5a6eaff4f2f24ccc52ee331b2b6dada5542dbcbc8d70972f77c0f825f0818d39edfcbe5b63984d173b3f","name":"56c3e0ae-98ef-4433-863d-23a5dff3d0c2.geojson","type":"application/octet-stream","lastModified":1792133154821,"size":17721474},{"id":"0b2884b4a476b576a42e59a60fe4459c2cfc6cdd513fa5a2e4ae5f71e8e24b3beffae661f4458dcf2cc3f7f46581febdaa4ed3c40e0ec4fa713ac62ee269673d","href":"https://static.observableusercontent.com/files/0b2884b4a476b576a42e59a60fe4459c2cfc6cdd513fa5a2e4ae5f71e8e24b3beffae661f4458dcf2cc3f7f46581febdaa4ed3c40e0ec4fa713ac62ee269673d","name":"938686bb-0f52-47b2-b077-eb307941d939.geojson","type":"application/octet-stream","lastModified":1792133154821,"size":13029939},{"id":"c7c1458b18698d9cf01cde98810fba7caabee6f0c8e647e904baaf4682a688279ecc19e46da209808614510d6c01972a2aecfefa98b831dc4e6894d78b65c50f","href":"https://static.observableusercontent.com/files/c7c1458b18698d9cf01cde98810fba7caabee6f0c8e647e904baaf4682a688279ecc19e46da209808614510d6c01972a2aecfefa98b831dc4e6894d78b65c50f","name":"0afebc32-36ee-4fa8-aec5-419c9c6ba51d.geojson","type":"application/octet-stream","lastModified":1792133154822,"size":9267369},{"id":"fd07d59596e056259b9cbe3328d3bb116d1585bf9c0abe07386add9b1b175ea71a7a6d81ceeace689f3ca4e7af69d13eb0e2b596fdf814334b3bcea24ff20bf2","href":"https://static.observableusercontent.com/files/fd07d59596e056259b9cbe3328d3bb116d1585bf9c0abe07386add9b1b175ea71a7a6d81ceeace689f3ca4e7af69d13eb0e2b596fdf814334b3bcea24ff20bf2","name":"441fd48b-515b-49e8-984c-515ea5d0cd49.geojson","type":"application/octet-stream","lastModified":1792133154822,"size":4072234},{"id":"cf7086b575028de31bce1cf32b76610af6dea7a26a4727bb5f73d7b123370077421b3b7d3673d9ea41f1bf5df8159414055813a75a6ba3b20ddce39a4d5abe49","href":"https://static.observableusercontent.com/files/cf7086b575028de31bce1cf32b76610af6dea7a26a4727bb5f73d7b123370077421b3b7d3673d9ea41f1bf5df8159414055813a75a6ba3b20ddce39a4d5abe49","name":"d87d9fb8-3e55-4cf8-bb70-f099c48ab590.geojson","type":"application/octet-stream","lastModified":1792133154822,"size":1849540},{"id":"b61af096e7802a9f8932b834f27498f8e5bf9daa2be0261402c803e710fe4abd5869152ab6fbe247b222db19b742e55cc6ddd9f632f86c380fafc000e3644ae7","href":"https://static.observableusercontent.com/files/b61af096e7802a9f8932b834f27498f8e5bf9daa2be0261402c803e710fe4abd5869152ab6fbe247b222db19b742e55cc6ddd9f632f86c380fafc000e3644ae7","name":"56c3e0ae-98ef-4433-863d-23a5dff3d0c2.tif","type":"image/tiff","lastModified":1792130151708,"size":1351996},{"id":"b79ee5e75356e0a9a7cc5d8a4e927f75c8cb49d502b69d224b5795436c42d846a27e3648d615cb9ab70696eaf592bba18f592cd21f43d4c04c504afbd568968d","href":"https://static.observableusercontent.com/files/b79ee5e75356e0a9a7cc5d8a4e927f75c8cb49d502b69d224b5795436c42d846a27e3648d615cb9ab70696eaf592bba18f592cd21f43d4c04c504afbd568968d","name":"938686bb-0f52-47b2-b077-eb307941d939.tif","type":"image/tiff","lastModified":1792130003909,"size":1219606},{"id":"83db3007eccbe02e9cf88bed3499302d83515d995f84d967fed1d36bca13c563c01c84cc3d240060f650cc10a66a981eb8b55fdf0dd3a836eef2e857d45b639c","href":"https://static.observableusercontent.com/files/83db3007eccbe02e9cf88bed3499302d83515d995f84d967fed1d36bca13c563c01c84cc3d240060f650cc10a66a981eb8b55fdf0dd3a836eef2e857d45b639c","name":"bd5901d9-c99a-45cb-b799-f1cad5f3ea4b.geojson","type":"application/octet-stream","lastModified":1792133154822,"size":1198806},{"id":"737688f2c623854b199aa378c58a0f8c2755cd0a449a15f990ac0b11cfec3fa7c567d2a3301822855f6a55baeb1f2dc708fc666aff0d834e6d26cdfe61de05c7","href":"https://static.observableusercontent.com/files/737688f2c623854b199aa378c58a0f8c2755cd0a449a15f990ac0b11cfec3fa7c567d2a3301822855f6a55baeb1f2dc708fc666aff0d834e6d26cdfe61de05c7","name":"0e2a947f-0fb4-4a97-8d5e-888923504cbb.geojson","type":"application/octet-stream","lastModified":1792133154823,"size":1185286},{"id":"7f88bf3e17cf0305ada72a636562a818e04167edf605e045880726b648d370cfb3c751aaa0a9e53cddfd7ca4f97f71807a37c116929b99ac300b5100bf30d28f","href":"https://static.observableusercontent.com/files/7f88bf3e17cf0305ada72a636562a818e04167edf605e045880726b648d370cfb3c751aaa0a9e53cddfd7ca4f97f71807a37c116929b99ac300b5100bf30d28f","name":"d342afec-08f5-4281-8012-b16b024b700f.geojson","type":"application/octet-stream","lastModified":1792133154823,"size":1038480},{"id":"52d99bde1b0050da08e7843dd12802a6b7372b17e3a67a05a56c52190bff56fd364b9bb4c81df9387ad7c1e7eff186ed7dab04dd2c71886d9c574b84cb574039","href":"https://static.observableusercontent.com/files/52d99bde1b0050da08e7843dd12802a6b7372b17e3a67a05a56c52190bff56fd364b9bb4c81df9387ad7c1e7eff186ed7dab04dd2c71886d9c574b84cb574039","name":"0afebc32-36ee-4fa8-aec5-419c9c6ba51d.tif","type":"image/tiff","lastModified":1792130378479,"size":921374},{"id":"8488be60a29b3cf8afcfa1cccbbe1c66c8248a11a4285eb8b519ca23437f4a6eb9308d4e1017b6b6913ea6d27faa102d4909aa383e1ba8bd1fcf8ddc70ab77bb","href":"https://static.observableusercontent.com/files/8488be60a29b3cf8afcfa1cccbbe1c66c8248a11a4285eb8b519ca23437f4a6eb9308d4e1017b6b6913ea6d27faa102d4909aa383e1ba8bd1fcf8ddc70ab77bb","name":"441fd48b-515b-49e8-984c-515ea5d0cd49.tif","type":"image/tiff","lastModified":1792130925113,"size":649867},{"id":"046cb81d2a35e25df8179c7da4645360c7f919dad3020956484dde99a5270bd710c18073e305e9c90d3eb89332335f708f060b2d2ed1a3d0ed26dcfd35135a9f","href":"https://static.observableusercontent.com/files/046cb81d2a35e25df8179c7da4645360c7f919dad3020956484dde99a5270bd710c18073e305e9c90d3eb89332335f708f060b2d2ed1a3d0ed26dcfd35135a9f","name":"e196f860-9453-482c-a02c-fdf306aa083c.geojson","type":"application/octet-stream","lastModified":1792133154823,"size":586080},{"id":"f1b2677bc27bacd797b4303b3b1f2b501ffe469a653212e7005e74a8df38c80bbc2550f7d96bbe66465a458fd9b699347d1c875221530eb6684ff7d24cad9da5","href":"https://static.observableusercontent.com/files/f1b2677bc27bacd797b4303b3b1f2b501ffe469a653212e7005e74a8df38c80bbc2550f7d96bbe66465a458fd9b699347d1c875221530eb6684ff7d24cad9da5","name":"d87d9fb8-3e55-4cf8-bb70-f099c48ab590.tif","type":"image/tiff","lastModified":1792130752857,"size":542694},{"id":"6ae90fdb9cfbad1e5056821dfb2840080d68b4fc7957687f47b2a56837100b584c461de56f8383fb07eb323afe24b537c41ac1ad356fd230ea6427b595893147","href":"https://static.observableusercontent.com/files/6ae90fdb9cfbad1e5056821dfb2840080d68b4fc7957687f47b2a56837100b584c461de56f8383fb07eb323afe24b537c41ac1ad356fd230ea6427b595893147","name":"bd5901d9-c99a-45cb-b799-f1cad5f3ea4b.tif","type":"image/tiff","lastModified":1792130673095,"size":263482},{"id":"33c3eb59a3cef878fe16abbf56c360c668214b99edd8d8539050666d1647cef6d9dcfd0fe908480c7911edff4bad03525264e9a795a1dd3ba9b66b820c042ea7","href":"https://static.observableusercontent.com/files/33c3eb59a3cef878fe16abbf56c360c668214b99edd8d8539050666d1647cef6d9dcfd0fe908480c7911edff4bad03525264e9a795a1dd3ba9b66b820c042ea7","name":"0e2a947f-0fb4-4a97-8d5e-888923504cbb.tif","type":"image/tiff","lastModified":1792131175614,"size":59199},{"id":"217e73e3059cf90812ea686dd142d56a8c6134268625acdde6e85c8b00886bd1449f0dca9f54aba199ecf3dd6ee672f738a8de3990132c026d248be9f2c25935","href":"https://static.observableusercontent.com/files/217e73e3059cf90812ea686dd142d56a8c6134268625acdde6e85c8b00886bd1449f0dca9f54aba199ecf3dd6ee672f738a8de3990132c026d248be9f2c25935","name":"e196f860-9453-482c-a02c-fdf306aa083c.tif","type":"image/tiff","lastModified":1792131107694,"size":41194},{"id":"6eabcea4d43973a140896208ab9c862b731411154e1c4e3bb2aeb56ba892b5bfba6c43e06e1006d2902d3a043bdb709b95ebbaec39c472ee7886239027ed0c8d","href":"https://static.observableusercontent.com/files/6eabcea4d43973a140896208ab9c862b731411154e1c4e3bb2aeb56ba892b5bfba6c43e06e1006d2902d3a043bdb709b95ebbaec39c472ee7886239027ed0c8d","name":"d342afec-08f5-4281-8012-b16b024b700f.tif","type":"image/tiff","lastModified":1792122265232,"size":25116},{"id":"7f95bb9fd3f93c05a7c561c589bcedf1718bc11d16deb1df36e6071a55e70cfd89e3082572134735149c602350e4a88ce955a0597b6d2427b7dfd297a1082da6","href":"https://static.observableusercontent.com/files/7f95bb9fd3f93c05a7c561c589bcedf1718bc11d16deb1df36e6071a55e70cfd89e3082572134735149c602350e4a88ce955a0597b6d2427b7dfd297a1082da6","name":"boulder2700_footer.jpg","type":"image/jpeg","lastModified":1792412353315,"size":124323},{"id":"14a655209d1b046fd9450eb55240293579db07e08f8b11be46c1284d88e590b4e0c42cf7d5dd392c45e7eed97331eb2caf69cf86b96632cce2833d4b859be3b9","href":"https://static.observableusercontent.com/files/14a655209d1b046fd9450eb55240293579db07e08f8b11be46c1284d88e590b4e0c42cf7d5dd392c45e7eed97331eb2caf69cf86b96632cce2833d4b859be3b9","name":"boulder2700_vertical.jpeg","type":"image/jpeg","lastModified":1792412438076,"size":99045},{"id":"420c141756925017118b02ba6530736f39dfd1aba4a5a2b5456fa739d01ed6409d108a711f6b439f5cd3ef47c918c88c53810b2611136945819d69bd1a1e2051","href":"https://static.observableusercontent.com/files/420c141756925017118b02ba6530736f39dfd1aba4a5a2b5456fa739d01ed6409d108a711f6b439f5cd3ef47c918c88c53810b2611136945819d69bd1a1e2051","name":"header.jpg","type":"image/jpeg","lastModified":1792412408554,"size":137335},{"id":"74bf0f91b14bf74478d427fa1ee44b3e5aa65bade0527fa8965d3dd806341070363279522efc62151d87052e8da34f774cef9fc05cff7c6726d2a9090b77124f","href":"https://static.observableusercontent.com/files/74bf0f91b14bf74478d427fa1ee44b3e5aa65bade0527fa8965d3dd806341070363279522efc62151d87052e8da34f774cef9fc05cff7c6726d2a9090b77124f","name":"MTBS_perimeter_rastercell_counts.csv","type":"text/csv","lastModified":1792490791554,"size":237450},{"id":"31ba5d0022ea761b3b683355f9acfd90451bbc12ca07528150cf1365957f9d6c8f50cc8c74649593f7f5c706a6b9a8da037c79acd4bed4a42573663867c42edd","href":"https://static.observableusercontent.com/files/31ba5d0022ea761b3b683355f9acfd90451bbc12ca07528150cf1365957f9d6c8f50cc8c74649593f7f5c706a6b9a8da037c79acd4bed4a42573663867c42edd","name":"MCFARLAND_multiband_5070.tif","type":"image/tiff","lastModified":1792500819985,"size":6546715},{"id":"bcde699d59daa31d787630b47cee38a92d65324ddc9878af5355134473a56c699d18ffd1b957884ce333033b1810bd741a4e0b422b7f3669db22a40aa9b2e0ed","href":"https://static.observableusercontent.com/files/bcde699d59daa31d787630b47cee38a92d65324ddc9878af5355134473a56c699d18ffd1b957884ce333033b1810bd741a4e0b422b7f3669db22a40aa9b2e0ed","name":"MCFARLAND_BSI_5070.tif","type":"image/tiff","lastModified":1792493701056,"size":1361740},{"id":"49a3dc7075ae86d41394d70916035b3e5f34a328590cbd36986732db0e564726e08f4e781ffedc8aa9c9b644dd00131e1a59202a5de6fca9ba87026fdaada697","href":"https://static.observableusercontent.com/files/49a3dc7075ae86d41394d70916035b3e5f34a328590cbd36986732db0e564726e08f4e781ffedc8aa9c9b644dd00131e1a59202a5de6fca9ba87026fdaada697","name":"MCFARLAND_DEM_5070_masked.tif","type":"image/tiff","lastModified":1792499281775,"size":5428515},{"id":"74dbca1706706cfe7c343e3891a79c9898ce14714505b8c3e590f74738f92dcdc5ad948c5b28edbf89c470e26a16e1275461608a0e2d6a53442539e985d1f5ba","href":"https://static.observableusercontent.com/files/74dbca1706706cfe7c343e3891a79c9898ce14714505b8c3e590f74738f92dcdc5ad948c5b28edbf89c470e26a16e1275461608a0e2d6a53442539e985d1f5ba","name":"MCFARLAND_slope_5070_masked.tif","type":"image/tiff","lastModified":1792499461538,"size":5428516},{"id":"bf975f029bf18842dcae459a5444e2d388a72caffbc4b6fa9215d326f31685ec63e56599fe1465b763f47698fd60debbc36ad5f6475e46751bb8c15ceda81aa7","href":"https://static.observableusercontent.com/files/bf975f029bf18842dcae459a5444e2d388a72caffbc4b6fa9215d326f31685ec63e56599fe1465b763f47698fd60debbc36ad5f6475e46751bb8c15ceda81aa7","name":"MCFARLAND_hillshade_5070_masked.tif","type":"image/tiff","lastModified":1792499866651,"size":5428515},{"id":"dad3f5fa56458c59c7df220a91b512e34028455605017264346655582b86d9f0ae18d84220f811bf2c483f82c5d3025fb271d9a1b3a2d34f0b27880657d556fb","href":"https://static.observableusercontent.com/files/dad3f5fa56458c59c7df220a91b512e34028455605017264346655582b86d9f0ae18d84220f811bf2c483f82c5d3025fb271d9a1b3a2d34f0b27880657d556fb","name":"MCFARLAND_LC_5070_masked.tif","type":"image/tiff","lastModified":1792499965143,"size":5428489}] 49:{"id":"e7159c4db8e9dbb0","slug":"csci-444-project-3-raster-data","title":"Wildfire Burn Severity","thumbnail":"daeb9bdb001c946f9c363ff9897dba4bd3b2e2c2fd5ab92e073b99ce5749852a","access_level":"public","create_time":"$D2026-10-16T03:28:49.973Z","update_time":"$D2026-10-28T12:47:27.889Z","view_time":null,"first_public_time":"$D2026-10-28T12:47:32.327Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1317,"publish_version":1317,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ebe4fb56285b831","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Wildfire Burn Severity","cells":[{"id":39,"value":"

\n\n# Wildfire Burn Severity\n\n

\n\n![header](${await FileAttachment(\"header.jpg\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"![vert](${await FileAttachment(\"boulder2700_vertical.jpeg\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"

\n\n# Data Sources\n\n
\n\n## NIROPS Wildfire Perimeters\nTimestamped perimeter polygons drawn from NIROPS thermal imagery taken during flyovers of large wildfires.\n- **Variables:** Incident identifiers, Timestamps, Dates, Acres\n- **Source:** [Mendeley](https://data.mendeley.com/datasets/95rj5d379g/1)\n- **CRS:** 4326\n- **Resolution:** _varies, approximately between 3m-30m_\n\n
\n\n## Monitoring Trends in Burn Severity (MTBS)\nSatellite-based burn severity classification of large wildfires (1k+ acres) for ecological impact.\n- **Variables:** Burn Severity Index (0=null, 1=unburned, 2=lowburn, 3=moderate, 4=high, 5=regen)\n- **Source:** [MTBS](https://www.mtbs.gov/)\n- **CRS:** 5070\n- **Resolution:** 30m","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"

\n\n# Visualizations\n\n

\n\n# Conclusion\n\n\n\n

\n\n# Appendix\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"## Draft Visuals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"### Chart 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"raw = FileAttachment(\"MTBS_perimeter_rastercell_counts.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"fires = {\n if (!raw.columns.includes(\"ACRES\")) {\n throw new Error(`Missing ACRES column. Found: ${raw.columns.join(\", \")}`);\n }\n\n const rows = raw\n .map(d => {\n const value = String(d.ACRES ?? \"\").trim().replace(/,/g, \"\");\n return {...d, ACRES: value === \"\" ? NaN : Number(value)};\n })\n .filter(d => Number.isFinite(d.ACRES) && d.ACRES >= 0);\n\n if (!rows.length) throw new Error(\"No valid ACRES values found.\");\n return rows;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Plot.plot({\n title: \"Fire size distribution\",\n subtitle: \"100-acre bins\",\n width,\n height: 420,\n marginLeft: 70,\n x: {\n label: \"ACRES\",\n zero: true,\n tickFormat: \",\"\n },\n y: {\n label: \"Fire count\",\n grid: true,\n tickFormat: d => Number.isInteger(d) ? d.toLocaleString() : \"\"\n },\n marks: [\n Plot.rectY(\n fires,\n Plot.binX(\n {y: \"count\"},\n {\n x: \"ACRES\",\n interval: 100,\n fill: \"steelblue\",\n inset: 0,\n tip: true\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"firesByYear = {\n const yearColumn = \"YEAR\";\n\n if (fires.length && !(yearColumn in fires[0])) {\n throw new Error(\n `Column \"${yearColumn}\" not found. Available columns: ${\n Object.keys(fires[0]).join(\", \")\n }`\n );\n }\n\n const records = fires\n .map(d => ({\n ...d,\n year: Number(d[yearColumn]),\n state: String(d.FIRE_ID ?? \"\")\n .trim()\n .slice(0, 2)\n .toUpperCase() || \"Unknown\"\n }))\n .filter(d =>\n Number.isInteger(d.year) &&\n d.year >= 2020 &&\n d.year <= 2024 &&\n d.ACRES > 0\n );\n\n if (!records.length) {\n throw new Error(\n \"No records with positive ACRES found for 2020–2024. Check the year column.\"\n );\n }\n\n return records;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"With the sheer amount of wildfire records not being able to fit within the bins at the low acreage values, in the final chart we put the y-axis on as log scale for the super-high-acreage wildfire incidents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"Ultimately this chart would probably better serve a BSI raster cell breakdown by year, because trying to differentiate the point color symbology by state is encoding something that is not ordinal. So let's end this first visual as a simple calendar showing the total acreage burned by day and colored by how much that value differs form the month's average. We will re-use this design later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Just realized that trying to measure it as an anomaly for a month will dim the summer months and highlight the one-off fires in the winter months, so let's just use a simple color gradient to signal a high number of fires in a day.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"### Chart 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"westernStates = {\n const us = await d3.json(\n \"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\"\n );\n\n const westernFips = new Set([\n \"04\", // Arizona\n \"06\", // California\n \"08\", // Colorado\n \"16\", // Idaho\n \"30\", // Montana\n \"32\", // Nevada\n \"35\", // New Mexico\n \"41\", // Oregon\n \"49\", // Utah\n \"53\", // Washington\n \"56\" // Wyoming\n ]);\n\n return {\n type: \"FeatureCollection\",\n features: topojson.feature(us, us.objects.states)\n .features\n .filter(d => westernFips.has(String(d.id).padStart(2, \"0\")))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$5e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$5f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$61","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"bsByState = {\n if (!raw.length || !(\"FIRE_ID\" in raw[0])) {\n throw new Error(\"The CSV must contain FIRE_ID.\");\n }\n\n const classes = bsTotals.map(({label, column, color, text}) => ({\n label, column, color, text\n }));\n\n const groups = d3.group(raw, row => {\n const state = String(row.FIRE_ID ?? \"\")\n .trim()\n .slice(0, 2)\n .toUpperCase();\n\n return /^[A-Z]{2}$/.test(state) ? state : \"Unknown\";\n });\n\n return Array.from(groups, ([state, rows]) => {\n const slices = classes.map(category => ({\n ...category,\n count: d3.sum(rows, row =>\n Number(\n String(row[category.column])\n .trim()\n .replace(/,/g, \"\")\n )\n )\n }));\n\n const total = d3.sum(slices, d => d.count);\n\n return {\n state,\n total,\n records: rows.length,\n slices: slices.map(d => ({\n ...d,\n proportion: total > 0 ? d.count / total : 0\n }))\n };\n }).sort((a, b) => d3.ascending(a.state, b.state));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$62","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"usStateMap = d3.json(\n \"https://cdn.jsdelivr.net/npm/us-atlas@3/states-albers-10m.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"statePieMapData = {\n const stateCode = row => {\n const code = String(row.FIRE_ID ?? \"\")\n .trim()\n .slice(0, 2)\n .toUpperCase();\n\n return /^[A-Z]{2}$/.test(code) ? code : \"Unknown\";\n };\n\n const acreageByState = d3.rollup(\n raw,\n rows => {\n const values = rows\n .map(row => {\n const value = String(row.ACRES ?? \"\")\n .trim()\n .replace(/,/g, \"\");\n\n return value === \"\" ? NaN : Number(value);\n })\n .filter(value => Number.isFinite(value) && value >= 0);\n\n return {\n averageAcres: d3.mean(values),\n acreageRecords: values.length,\n excludedAcres: rows.length - values.length\n };\n },\n stateCode\n );\n\n return bsByState.map(state => ({\n ...state,\n ...acreageByState.get(state.state)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$63","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"For the final map we can obviously exclude the eastern 2/3rds of the states.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"### Chart 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"Let's plot our first raster map in Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"GeoTIFF = await import(\n \"https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"mcfarlandRaster = {\n const buffer = await FileAttachment(\n \"MCFARLAND_multiband_5070.tif\"\n ).arrayBuffer();\n\n const tiff = await GeoTIFF.fromArrayBuffer(buffer);\n const image = await tiff.getImage();\n\n if (image.getSamplesPerPixel() !== 5) {\n throw new Error(\"Expected a raster containing five bands.\");\n }\n\n const samples = await image.readRasters();\n const noData = image.getGDALNoData();\n\n const bands = Array.from({length: 5}, (_, bandIndex) =>\n Float32Array.from(samples[bandIndex], value => {\n if (!Number.isFinite(value) || value === noData) return NaN;\n\n // Exclude regenerated vegetation from the BSI band only.\n if (bandIndex === 0 && value === 5) return NaN;\n\n return value;\n })\n );\n\n return {\n width: image.getWidth(),\n height: image.getHeight(),\n bounds: image.getBoundingBox(),\n bands,\n domains: bands.map(values => d3.extent(values))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$64","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$65","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$66","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"Magnifique, our first raster plot!\nI want to visualize the burn severity raster cells as a proportional breakdown of the fire perimeter space they occupy, and I think it would be so cool to translate that concept with D3. It required a lot of AI assistance to get the animation right, but the point I wanted to make is how each cell is encoding a value of a specific spot on earth in the same way that any other type of record from a survey sample is encoded in a bar chart. I hope that by creating an animation that \"sucks\" the color off the map and plots it as a bar chart, will help the viewer understand better how to interpret what a raster cell is representing in the context of spatial statistics (which we will hopefully run a regression on BSI and Elevation at the conclusion).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"migrationRaster = {\n const GeoTIFF = await import(\"https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm\");\n const buffer = await FileAttachment(\"MCFARLAND_multiband_5070.tif\").arrayBuffer();\n const tiff = await GeoTIFF.fromArrayBuffer(buffer);\n const image = await tiff.getImage();\n if (image.getSamplesPerPixel() !== 5) throw new Error(\"Expected five raster bands.\");\n const samples = await image.readRasters();\n const noData = image.getGDALNoData();\n return {\n width: image.getWidth(),\n height: image.getHeight(),\n bounds: image.getBoundingBox(),\n bands: Array.from({length: 5}, (_, band) =>\n Float32Array.from(samples[band], value =>\n !Number.isFinite(value) || value === noData ? NaN : value\n )\n )\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"migrationLayers = [\n {\n name: \"BSI\", band: 0,\n keys: [1, 2, 3, 4],\n labels: [\"1 · Unburned\", \"2 · Low\", \"3 · Moderate\", \"4 · High\"],\n colors: [\"#8b0000\", \"#c45100\", \"#fdb366\", \"#ffff00\"]\n },\n {name: \"DEM\", band: 1, quartiles: true, colors: [\"#08306b\", \"#ffffff\", \"#947044\"]},\n {\n name: \"Slope\", band: 4,\n thresholds: Array.from({length: 12}, (_, i) => (i + 1) * 5),\n labels: [\n ...Array.from({length: 12}, (_, i) => `${i * 5}–<${(i + 1) * 5}°`),\n \"≥60°\"\n ],\n colors: [\n \"#f5f0fa\", \"#e9dcf3\", \"#d9c6eb\", \"#c9ade2\", \"#b893d7\",\n \"#a579cb\", \"#9061bc\", \"#7c4bad\", \"#69379c\", \"#572789\",\n \"#461c75\", \"#35145f\", \"#250d49\"\n ]\n },\n {name: \"Hillshade\", band: 3, colors: [\"#111111\", \"#eeeeee\"]},\n {\n name: \"Land Cover\", band: 2,\n keys: [1, 2, 7, 11],\n labels: [\"Water\", \"Forest\", \"Shrub\", \"Rangeland\"],\n colors: [\"#9dd9f3\", \"#006400\", \"#a1d76a\", \"#c9a46b\"]\n }\n]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$67","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$68","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$69","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$6a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$6b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$6c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$6d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"// Cell 10: display\nmigrationCopy = createMigrationCopy(migrationRaster, {width, invalidation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$6e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$6f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$70","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$71","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"Let's update some styling of the plot to match the nice charcoal/orange color theme we got started on earlier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"// Cell 15: display\nmigrationCopyCharcoal = createMigrationCopyCharcoal(migrationRaster, {width, invalidation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"Really cool, I think an even better touch would be being able to click on a raster pixel in the bar chart, and seeing where on the original map grid it came from.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$72","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$73","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$74","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"// Cell 20: keep the charcoal version's five equal-width DEM bins\nmigrationBinsTrace = function(d3, raster, layer) {\n if (layer.name !== \"DEM\") return prepareMigrationBins(raster, layer);\n const [min, max] = d3.extent(raster.bands[layer.band], value =>\n Number.isFinite(value) && value !== -9999 ? value : undefined);\n if (!Number.isFinite(min) || !Number.isFinite(max)) {\n throw new Error(\"DEM has no valid pixels.\");\n }\n const step = (max - min) / 5;\n const edges = Array.from({length: 6}, (_, i) => min + i * step);\n const format = d3.format(\",.1f\");\n const labels = edges.slice(0, 5).map((low, i) =>\n `${format(low)}–${i === 4 ? \"\" : \"<\"}${format(edges[i + 1])} m`);\n const data = prepareMigrationBins(raster, {\n ...layer, quartiles: false, thresholds: edges.slice(1, 5), labels\n });\n data.categorical = false;\n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$76","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"Some tweaking on the final rendering of pixel box grids in the bar charts, and it definitely looks a lot more put together than before.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"// Cell 1 — attach MCFARLAND_multiband_5070.tif to the notebook first.\nseverityElevationSource = {\n const [GeoTIFF, d3] = await Promise.all([\n import(\"https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm\"),\n import(\"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\")\n ]);\n const buffer = await FileAttachment(\"MCFARLAND_multiband_5070.tif\").arrayBuffer();\n const tiff = await GeoTIFF.fromArrayBuffer(buffer);\n const image = await tiff.getImage();\n if (image.getSamplesPerPixel() < 3) {\n throw new Error(\"Expected at least three bands: severity, elevation, land cover.\");\n }\n // GeoTIFF.js sample numbers are zero based.\n const [severity, elevation, landCover] = await image.readRasters({samples: [0, 1, 2]});\n return {\n d3, severity, elevation, landCover,\n width: image.getWidth(), height: image.getHeight(),\n noData: image.getGDALNoData()\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$77","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$78","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"I wanted to see if the penguin plots we used earlier for the fire records would be more useful in this context, but I think this looks truly dreadful. This type of plot seems to be much better suited where the points are denser towards the lower y-axis values (looks more like a fire than, well, this...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Nevertheless this is a pretty clear indication that the McFarland fire burned with higher intensity at higher elevations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### perimeter animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// Cell 1 — Libraries\nlibraries = {\n const [Plot, GeoTIFF, {default: proj4}, d3] = await Promise.all([\n import(\"https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17/+esm\"),\n import(\"https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm\"),\n import(\"https://cdn.jsdelivr.net/npm/proj4@2.12.1/+esm\"),\n import(\"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\")\n ]);\n return {Plot, GeoTIFF, proj4, d3};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$79","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// Cell 3 — Incident names\nincidents = {\n const items = await Promise.all(incidentFiles.map(async files => {\n const geojson = await files.geojson.json();\n const id = files.geojson.name.replace(/\\.geojson$/i, \"\");\n const name = geojson.features\n .map(f => f.properties?.[\"Inc Name\"])\n .find(name => typeof name === \"string\" && name.trim())?.trim() || id;\n return {id, name, geojson, raster: files.raster};\n }));\n return items.map(item => ({\n ...item,\n label: items.filter(d => d.name === item.name).length > 1\n ? `${item.name} (${item.id})` : item.name\n })).sort((a, b) => a.label.localeCompare(b.label));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"// Cell 4 — Incident menu\nviewof incident = Inputs.select(incidents, {\n label: \"Fire incident\",\n format: d => d.label,\n value: incidents.find(d => d.id === \"938686bb-0f52-47b2-b077-eb307941d939\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$7a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$7b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// Cell 7 — Map bounds\nmapBounds = {\n const [[x0, y0], [x1, y1]] = libraries.d3.geoPath().bounds({\n type: \"FeatureCollection\", features: perimeters\n });\n const [west, south, east, north] = mtbs.bounds;\n return [Math.min(west, x0), Math.min(south, y0),\n Math.max(east, x1), Math.max(north, y1)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// Cell 8 — Severity colors\nseverityColors = [0.5, 2 / 3, 5 / 6, 1].map(libraries.d3.interpolateInferno)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// Cell 9 — Perimeter buttons\nviewof perimeterMode = Inputs.radio([\"All\", \"First\", \"Last\", \"Animated\"], {\n label: \"Perimeters\", value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$7c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$7d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$7e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"#### bivariate raster","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"// ==================== CELL 1 (cell-01.ojs) ====================\n// Paste this entire file into one Observable notebook JavaScript cell.\nbivarLibraries = {\n const [GeoTIFF, d3] = await Promise.all([\n import(\"https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm\"),\n import(\"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\")\n ]);\n return {GeoTIFF, d3};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"// ==================== CELL 2 (cell-02.ojs) ====================\nbivarOptions = ({\n // Band 2 has no embedded vertical-unit label. These DEM units are assumed m.\n elevationUnit: \"m\",\n severityLabels: [\"Nbs\", \"Lbs\", \"Mbs\", \"Hbs\"],\n corners: {\n lowLow: \"#f4f1eb\", // LzNbs: pale neutral\n highLow: \"#3b83bd\", // HzNbs: blue (high elevation, BS1)\n lowHigh: \"#e8873b\", // LzHbs: orange (low elevation, BS4)\n highHigh: \"#494746\" // HzHbs: dark mixed neutral\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$7f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"// ==================== CELL 5 (cell-05.ojs) ====================\nviewof bivarMode = Inputs.radio([\"Low / Medium / High\", \"Continuous Z\"], {\n label: \"Elevation coloring\", value: \"Low / Medium / High\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"$81","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$82","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$83","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"// ==================== CELL 9 (cell-09.ojs) ====================\n// Optional table. The same 12-class summary is available in continuous mode.\nbivariateMatrixTable = Inputs.table(\n [...bivarRaster.matrix].sort((a, b) => b.level - a.level || a.severity - b.severity),\n {\n columns: [\"label\", \"id\", \"severity\", \"z0\", \"z1\", \"elevation0\", \"elevation1\", \"pixels\", \"percent\"],\n header: {\n label: \"Matrix class\", id: \"Class ID\", severity: \"BS\", z0: \"Z from\", z1: \"Z to\",\n elevation0: \"Elevation from\", elevation1: \"Elevation to\", pixels: \"Pixels\", percent: \"% mapped\"\n },\n format: {\n z0: x => x.toFixed(3), z1: x => x.toFixed(3),\n elevation0: x => x.toFixed(2), elevation1: x => x.toFixed(2),\n pixels: bivarLibraries.d3.format(\",\"), percent: x => x.toFixed(2)\n },\n rows: 12\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"orangeCyanLibraries = {\n const [GeoTIFF, d3] = await Promise.all([\n import(\"https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm\"),\n import(\"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\")\n ]);\n return {GeoTIFF, d3};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"orangeCyanOptions = ({\n // Band 2 has no embedded vertical-unit label. These DEM units are assumed m.\n elevationUnit: \"m\",\n severityLabels: [\"Nbs\", \"Lbs\", \"Mbs\", \"Hbs\"],\n paletteName: \"Orange–Cyan (sampled reference)\",\n // Colors sampled from the supplied image, not an official hex specification.\n // Rows: normalized elevation Z = 0, 0.5, 1 (LOW to HIGH).\n // Columns: severity color positions = 0, 0.5, 1 (LOW to HIGH).\n // These are interpolation anchors, not elevation classes.\n colorGrid: [\n [\"#e8e8e8\", \"#e9be4b\", \"#ef802e\"], // low Z: gray → gold → orange\n [\"#5dc6dc\", \"#968c8d\", \"#8e4a19\"], // mid Z: cyan → gray → brown\n [\"#40a1d6\", \"#306897\", \"#33132b\"] // high Z: blue → navy → purple\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$84","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$85","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof orangeCyanSettings = Inputs.form({\n p: Inputs.range([0, 1], {\n label: \"Severity exponent p\", step: 0.05, value: 0.5\n }),\n colorBy: Inputs.radio([\"BS × Z colors\", \"Numeric value\"], {\n label: \"Map color\", value: \"BS × Z colors\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$86","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$87","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$88","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"orangeCyanValueSummary = Inputs.table(orangeCyanRaster.summary, {\n columns: [\"severity\", \"label\", \"weight\", \"pixels\", \"meanZ\", \"meanValue\", \"minValue\", \"maxValue\"],\n header: {severity: \"BS\", label: \"Label\", weight: \"BS^p multiplier\", pixels: \"Pixels\",\n meanZ: \"Mean Z\", meanValue: \"Mean value\", minValue: \"Min value\", maxValue: \"Max value\"},\n format: {\n pixels: orangeCyanLibraries.d3.format(\",\"),\n weight: x => x.toFixed(4), meanZ: x => x.toFixed(4),\n meanValue: x => x.toFixed(6), minValue: x => x.toFixed(6), maxValue: x => x.toFixed(6)\n }, rows: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"#### regression analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$89","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$8a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$8b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W8c","stdlib":"2"}} 44:null