29:null 2a:["$","title",null,{"children":"Flow characteristics of Colombia River Watersheds | Stellios Bonadurer | Observable"}] 2f:T6ae,### Introduction The inspiration for this project began as a curiosity of the numeric differences between metrics of a river system. My initial thoughts came from wanting to compare smaller, upstream tributaries to each other as well as to their eventual rivers. My hypothesis is that: **smaller tributaries experience more variability in their flow rates both day to day and seasonally**. This is somewhat of an obvious hypothesis, my main interest is to create an interesting way to visualize these differences. Part of my motivation is an interest in familiarizing myself with accessing gauge/watershed data. There are many ways to compare flow rates, and it's important to recognize the volume differences at play. We cannot meaningfully compare 1000 cfs swings from the mighty Colombia River to our own Clark Fork River. The metric we will focus our investigation is known as flashiness. ## Richards–Baker Flashiness Index (RBI) ${tex.block` RBI = \frac{ \sum_{t=2}^{n} \left|Q_t-Q_{t-1}\right| }{ \sum_{t=1}^{n} Q_t } `} where ${tex`Q_t`} is the mean discharge on day ${tex`t`}. The numerator measures the total day-to-day change in flow, while the denominator scales this change by the total flow during the study period. Only observations on consecutive calendar days are compared. - A **lower RBI** indicates relatively stable flow. - A **higher RBI** indicates more rapid or frequent changes in flow. Because RBI is normalized by total discharge, it can be compared across gauges with different flow volumes. ### Other metrics The graphic provided contains a number of other metrics which are easily understood, a thorough definition on how those are calculated follows the graphic. 30:T6fe,viewof usgsApiKey = { const form = html` `; const input = form.querySelector("input"); const status = form.querySelector(".status"); // Observable reads the current value from form.value. form.value = ""; form.addEventListener("submit", event => { event.preventDefault(); form.value = input.value.trim(); status.textContent = form.value ? "API key applied" : "Public limit"; status.style.color = form.value ? "#287a36" : "#666"; // Trigger Observable only when Apply key is clicked, // not after every character typed. form.dispatchEvent( new Event("input", { bubbles: true }) ); }); return form; }31:T18c9,finalSelectedGaugeTable = { const metricsById = new Map( finalGaugeMetrics.map(gauge => [ gauge.gaugeId, gauge ]) ); const selected = [ { id: masterGaugeId, name: metricsById.get(masterGaugeId)?.gaugeName ?? masterGaugeId, role: "Master" }, ...upstreamGaugeRows .filter(gauge => finalSelectedGaugeIds.has(gauge.id) && gauge.id !== masterGaugeId ) .map(gauge => ({ ...gauge, role: "Selected" })) ]; const columns = [ ["Role", "role"], ["Gauge", "name"], ["USGS ID", "id"], ["Area (km²)", "drainageAreaKm2"], ["Flashiness", "flashiness"], ["Mean flow (ft³/s)", "meanFlowCfs"], ["Annual delta (ft³/s)", "averageAnnualDeltaCfs"], ["Relative delta (%)", "relativeAnnualDeltaPct"], ["Peak (ft³/s)", "averageAnnualPeakCfs"], ["Minimum (ft³/s)", "averageAnnualMinimumCfs"], ["Flow/area (ft³/s/km²)", "meanDischargePerArea"] ]; let sortKey = "name"; let sortAscending = true; const getValue = (gauge, key) => { const metrics = metricsById.get(gauge.id); if (key === "role") return gauge.role; if (key === "name") return gauge.name; if (key === "id") return gauge.id; return metrics?.[key]; }; const wrapper = document.createElement("div"); wrapper.style.cssText = ` overflow-x: auto; overflow-y: auto; max-height: 380px; border: 1px solid #ddd; `; const table = document.createElement("table"); table.style.cssText = "width:100%; border-collapse:collapse; " + "font:12px sans-serif; white-space:nowrap"; const header = table.createTHead().insertRow(); // Shade column { const cell = document.createElement("th"); cell.textContent = "Shade"; cell.style.cssText = "padding:7px; text-align:left; " + "border-bottom:1px solid #999"; header.append(cell); } // Sortable columns for (const [label, key] of columns) { const cell = document.createElement("th"); cell.style.cssText = "padding:7px; text-align:left; " + "border-bottom:1px solid #999; " + "cursor:pointer; user-select:none"; const updateLabel = () => { cell.textContent = label + (sortKey === key ? sortAscending ? " ▲" : " ▼" : ""); }; updateLabel(); cell.addEventListener("click", () => { if (sortKey === key) { sortAscending = !sortAscending; } else { sortKey = key; sortAscending = true; } // Update all header arrows for (let i = 0; i < columns.length; i++) { const [headerLabel, headerKey] = columns[i]; const headerCell = header.cells[i + 1]; headerCell.textContent = headerLabel + (sortKey === headerKey ? sortAscending ? " ▲" : " ▼" : ""); } renderRows(); }); header.append(cell); } // Remove/action column { const cell = document.createElement("th"); cell.style.cssText = "padding:7px; text-align:left; " + "border-bottom:1px solid #999"; header.append(cell); } const body = table.createTBody(); const renderRows = () => { body.replaceChildren(); const master = selected.filter( gauge => gauge.role === "Master" ); const others = selected .filter(gauge => gauge.role !== "Master") .slice() .sort((a, b) => { const aValue = getValue(a, sortKey); const bValue = getValue(b, sortKey); // Put missing values at the bottom if (aValue == null && bValue == null) return 0; if (aValue == null) return 1; if (bValue == null) return -1; let result; if ( typeof aValue === "number" && typeof bValue === "number" ) { result = aValue - bValue; } else { result = String(aValue).localeCompare( String(bValue), undefined, { numeric: true, sensitivity: "base" } ); } return sortAscending ? result : -result; }); // Keep the outlet/master gauge fixed at the top const sorted = [...master, ...others]; for (const gauge of sorted) { const metrics = metricsById.get(gauge.id); const row = body.insertRow(); const swatchCell = row.insertCell(); swatchCell.style.padding = "7px"; const swatch = document.createElement("span"); swatch.style.cssText = "display:block; width:20px; height:14px; " + "border:1px solid #555"; swatch.style.background = finalMetricColor.color( metrics?.[finalShadeMetric] ); swatchCell.append(swatch); for (const [, key] of columns) { const cell = row.insertCell(); cell.style.cssText = "padding:7px; border-bottom:1px solid #ddd"; const value = getValue(gauge, key); cell.textContent = typeof value === "number" && Number.isFinite(value) ? value.toLocaleString(undefined, { maximumFractionDigits: key === "flashiness" || key === "meanDischargePerArea" ? 3 : 1 }) : value ?? "—"; } const actionCell = row.insertCell(); actionCell.style.padding = "7px"; const button = document.createElement("button"); button.type = "button"; button.textContent = "Remove"; button.addEventListener("click", () => { const updated = new Set(finalSelectedGaugeIds); updated.delete(gauge.id); mutable finalSelectedGaugeIds = updated; }); if (gauge.role === "Master") { actionCell.textContent = "Fixed outlet"; } else { actionCell.append(button); } } if (selected.length === 0) { const row = body.insertRow(); const cell = row.insertCell(); cell.colSpan = columns.length + 2; cell.textContent = "No gauges selected yet."; cell.style.padding = "10px 7px"; } }; renderRows(); wrapper.append(table); return wrapper; }32:T638,removeIncompleteGauges = { const button = document.createElement("button"); button.type = "button"; button.textContent = "Remove gauges without metrics"; button.style.cssText = ` padding: 6px 10px; border: 1px solid #999; border-radius: 4px; background: white; cursor: pointer; font: 12px sans-serif; `; const metricsById = new Map( finalGaugeMetrics.map(gauge => [ gauge.gaugeId, gauge ]) ); const requiredMetrics = [ "drainageAreaKm2", "flashiness", "meanFlowCfs", "averageAnnualDeltaCfs", "relativeAnnualDeltaPct", "averageAnnualPeakCfs", "averageAnnualMinimumCfs", "meanDischargePerArea" ]; function hasCompleteMetrics(gaugeId) { const metrics = metricsById.get(gaugeId); if (!metrics) return false; return requiredMetrics.every(key => typeof metrics[key] === "number" && Number.isFinite(metrics[key]) ); } const removableIds = [...finalSelectedGaugeIds].filter( id => id !== masterGaugeId && !hasCompleteMetrics(id) ); button.textContent = removableIds.length > 0 ? `Remove ${removableIds.length} gauges without metrics` : "All selected gauges have metrics"; button.disabled = removableIds.length === 0; button.style.opacity = removableIds.length === 0 ? "0.5" : "1"; button.addEventListener("click", () => { const updated = new Set(finalSelectedGaugeIds); for (const id of removableIds) { updated.delete(id); } mutable finalSelectedGaugeIds = updated; }); return button; }33:T753,finalColorLegend = { const labels = new Map([ ["relativeAnnualDeltaPct", "Relative annual flow delta (%)"], ["flashiness", "Flashiness (RBI)"], ["meanFlowCfs", "Mean flow (ft³/s)"], ["averageAnnualDeltaCfs", "Average annual flow delta (ft³/s)"], ["averageAnnualPeakCfs", "Average annual peak flow (ft³/s)"], ["averageAnnualMinimumCfs", "Average annual minimum flow (ft³/s)"], ["meanDischargePerArea", "Mean discharge per area (ft³/s/km²)"] ]); if (!finalMetricColor.domain) { return html`

Load flow data to display the color legend.

`; } const [minimum, maximum] = finalMetricColor.domain; const gradient = Array.from( {length: 51}, (_, i) => { const fraction = i / 50; const value = minimum + fraction * (maximum - minimum); return ( `${finalMetricColor.color(value)} ` + `${Math.round(fraction * 100)}%` ); } ).join(", "); const format = value => value.toLocaleString(undefined, { maximumFractionDigits: finalShadeMetric === "flashiness" || finalShadeMetric === "meanDischargePerArea" ? 3 : 1 }); return html`

${labels.get(finalShadeMetric)}

${format(minimum)} ${format((minimum + maximum) / 2)} ${format(maximum)}

`; }34:T48d3,improvedDashboardMap5 = { const sourceSvg = finalDashboardMap.tagName?.toLowerCase() === "svg" ? finalDashboardMap : finalDashboardMap.querySelector("svg"); const svg = sourceSvg.cloneNode(true); const plotWidth = Number(svg.getAttribute("width")) || width; const plotHeight = Number(svg.getAttribute("height")) || 850; // Display settings. svg.style.display = "block"; svg.style.width = "100%"; svg.style.height = "auto"; svg.style.touchAction = "none"; const container = document.createElement("div"); container.style.cssText = ` position: relative; width: 100%; overflow: hidden; background: white; `; // Styling constants. const cityDotRadius = 3; const cityLabelFontSize = 16; const cityLabelOutlineWidth = 4; const selectedGaugeRadius = 4; const availableGaugeRadius = 2.5; /* * Move the original Plot layers into a single group. * D3 zoom transforms this group. */ const zoomLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); const originalLayers = [...svg.children].filter( child => child.tagName.toLowerCase() === "g" ); for (const layer of originalLayers) { zoomLayer.append(layer); } // These are used to adjust watershed outlines during zooming. const masterBoundaryPaths = [ ...(originalLayers[0]?.querySelectorAll("path") ?? []) ]; const selectedBoundaryPaths = [ ...(originalLayers[1]?.querySelectorAll("path") ?? []) ]; /* * River layer */ const prominentRivers = { type: "FeatureCollection", features: columbiaRivers.features.filter( feature => Number(feature.properties.ORD_STRA) >= 6 || Number(feature.properties.DIS_AV_CMS) >= 100 ) }; const riverPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ // Complete filtered river network. Plot.geo(columbiaRivers, { fill: "none", stroke: "#63a6cb", strokeOpacity: 0.65, strokeWidth: 0.75 }), // Larger rivers are drawn again with a stronger style. Plot.geo(prominentRivers, { fill: "none", stroke: "#2476a4", strokeOpacity: 0.95, strokeWidth: 1.6 }) ] }); const riverLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); riverLayer.setAttribute("aria-label", "rivers"); // Copy the Plot groups instead of only copying their paths. // This preserves Plot's inherited styling. for (const group of riverPlot.querySelectorAll( 'g[aria-label="geo"]' )) { riverLayer.append(group.cloneNode(true)); } // Rivers appear above watershed fills and below boundaries. zoomLayer.insertBefore( riverLayer, originalLayers[2] ?? null ); /* * City layer */ const keyCities = [ { name: "Missoula", longitude: -113.994, latitude: 46.8721 }, { name: "Spokane", longitude: -117.426, latitude: 47.6588 }, { name: "Boise", longitude: -116.2023, latitude: 43.615 }, { name: "Portland", longitude: -122.6765, latitude: 45.5231 }, { name: "Seattle", longitude: -122.3321, latitude: 47.6062 } ]; // Build city markers with the same dimensions and projection // used by the main map. const cityPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ Plot.dot(keyCities, { x: "longitude", y: "latitude", r: cityDotRadius, fill: "#222", stroke: "white", strokeWidth: 1 }), Plot.text(keyCities, { x: "longitude", y: "latitude", text: "name", dx: 7, dy: -7, textAnchor: "start", fontSize: cityLabelFontSize, fontWeight: 600, fill: "#222", stroke: "white", strokeWidth: cityLabelOutlineWidth, paintOrder: "stroke" }) ] }); const cityLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); cityLayer.setAttribute("aria-label", "cities"); cityLayer.style.pointerEvents = "none"; for (const group of cityPlot.querySelectorAll( 'g[aria-label="dot"], g[aria-label="text"]' )) { cityLayer.append(group.cloneNode(true)); } // Save references so the city markers can be resized // inversely to the zoom scale. const cityDots = [ ...cityLayer.querySelectorAll( 'g[aria-label="dot"] circle' ) ]; const cityTextLayer = cityLayer.querySelector( 'g[aria-label="text"]' ); const cityLabels = [ ...(cityTextLayer?.querySelectorAll("text") ?? []) ]; /* * Plot implements dx and dy as a translation on the text * group. Save that translation so the label offset can also * be held constant during zooming. */ const cityTextTransform = cityTextLayer?.getAttribute("transform") ?? ""; const cityTranslationMatch = cityTextTransform.match( /translate$\s*([-\d.]+)(?:[,\s]+)([-\d.]+)\s*$/ ); const cityTextDx = Number(cityTranslationMatch?.[1]) || 0; const cityTextDy = Number(cityTranslationMatch?.[2]) || 0; for (const circle of cityDots) { circle.setAttribute( "vector-effect", "non-scaling-stroke" ); } // Cities appear above rivers and below gauge markers. zoomLayer.insertBefore( cityLayer, originalLayers[2] ?? null ); /* * Available-gauge layer * * These orange markers are displayed only when the map is * in gauge-selection mode. */ const availableGaugeLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); availableGaugeLayer.setAttribute( "aria-label", "available gauges" ); availableGaugeLayer.style.pointerEvents = "none"; for (const gauge of mapGaugeTargets) { const circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); circle.setAttribute("cx", gauge.x); circle.setAttribute("cy", gauge.y); circle.setAttribute("r", availableGaugeRadius); circle.setAttribute("fill", "#f28e2b"); circle.setAttribute("fill-opacity", "0.75"); circle.setAttribute( "vector-effect", "non-scaling-stroke" ); circle.setAttribute( "data-gauge-name", gauge.name ?? gauge.id ); circle.style.pointerEvents = "all"; circle.style.cursor = "pointer"; availableGaugeLayer.append(circle); } const firstGaugeLayer = zoomLayer.querySelector( ':scope > g[aria-label="dot"]' ); zoomLayer.insertBefore( availableGaugeLayer, firstGaugeLayer ); // Add the completed zoom layer back to the SVG. svg.append(zoomLayer); /* * Prevent paths from becoming excessively thick as the map * is enlarged. */ for (const path of zoomLayer.querySelectorAll("path")) { path.setAttribute( "vector-effect", "non-scaling-stroke" ); } /* * Locate the existing selected and master gauge markers. */ const gaugeLayers = [ ...zoomLayer.querySelectorAll( ':scope > g[aria-label="dot"]' ) ]; const gaugeCircles = gaugeLayers.flatMap(layer => [...layer.querySelectorAll("circle")] ); const gaugeSymbols = gaugeLayers .flatMap(layer => [ ...layer.querySelectorAll("path") ]) .map(element => ({ element, // Save the original Plot transform so it can be combined // with an inverse zoom scale. originalTransform: element.getAttribute("transform") ?? "" })); for (const circle of gaugeCircles) { circle.setAttribute( "vector-effect", "non-scaling-stroke" ); } for (const {element} of gaugeSymbols) { element.setAttribute( "vector-effect", "non-scaling-stroke" ); } /* * Gauge tooltip */ const tooltip = document.createElement("div"); tooltip.style.cssText = ` position: absolute; z-index: 4; display: none; pointer-events: none; padding: 6px 9px; max-width: 280px; border: 1px solid #777; border-radius: 4px; background: rgba(255, 255, 255, 0.96); color: #222; font: 12px sans-serif; line-height: 1.35; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18); `; function positionTooltip(event) { const bounds = container.getBoundingClientRect(); let left = event.clientX - bounds.left + 12; let top = event.clientY - bounds.top + 12; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; const tipBounds = tooltip.getBoundingClientRect(); // Keep the tooltip within the right side of the map. if (tipBounds.right > bounds.right - 8) { left = event.clientX - bounds.left - tipBounds.width - 12; tooltip.style.left = `${left}px`; } // Keep the tooltip within the bottom of the map. if (tipBounds.bottom > bounds.bottom - 8) { top = event.clientY - bounds.top - tipBounds.height - 12; tooltip.style.top = `${top}px`; } } availableGaugeLayer.addEventListener( "pointerover", event => { const circle = event.target.closest("circle"); if (!circle) return; tooltip.textContent = circle.getAttribute("data-gauge-name"); tooltip.style.display = "block"; positionTooltip(event); } ); availableGaugeLayer.addEventListener( "pointermove", event => { if (event.target.closest("circle")) { positionTooltip(event); } } ); availableGaugeLayer.addEventListener( "pointerout", event => { if (event.target.closest("circle")) { tooltip.style.display = "none"; } } ); const gaugeMarkers = [ ...gaugeCircles, ...gaugeSymbols.map(d => d.element) ]; for (const marker of gaugeMarkers) { const nativeTitle = marker.querySelector("title"); const label = nativeTitle?.textContent?.trim() || marker.getAttribute("aria-label") || "Gauge"; // Remove the browser's native tooltip. nativeTitle?.remove(); marker.style.pointerEvents = "all"; marker.style.cursor = "pointer"; marker.addEventListener( "pointerenter", event => { tooltip.textContent = label; tooltip.style.display = "block"; positionTooltip(event); } ); marker.addEventListener( "pointermove", positionTooltip ); marker.addEventListener( "pointerleave", () => { tooltip.style.display = "none"; } ); } /* * Zoom behavior */ const svgSelection = d3.select(svg); // Preserve the selected interaction mode when Observable // redraws this cell. let zoomEnabled = window.__columbiaGaugeSelectMode !== true; function updateZoomAppearance(transform) { // Apply the geographic zoom to all map layers. zoomLayer.setAttribute( "transform", transform.toString() ); const k = transform.k; /* * Keep city dots and labels at a constant physical size. * Their geographic positions still move with zoomLayer. */ for (const circle of cityDots) { circle.setAttribute( "r", cityDotRadius / k ); } if (cityTextLayer) { cityTextLayer.setAttribute( "transform", `translate(${cityTextDx / k}, ${ cityTextDy / k })` ); } for (const label of cityLabels) { label.setAttribute( "font-size", cityLabelFontSize / k ); label.setAttribute( "stroke-width", cityLabelOutlineWidth / k ); } /* * Adjust watershed outlines gradually rather than scaling * them directly with the map. */ for (const path of masterBoundaryPaths) { path.setAttribute( "stroke-width", Math.max( 0.65, 2 / Math.sqrt(k) ) ); } for (const path of selectedBoundaryPaths) { path.setAttribute( "stroke-width", Math.max( 0.45, 1.2 / Math.sqrt(k) ) ); } /* * Keep gauge markers at a constant physical size. */ for (const circle of gaugeCircles) { circle.setAttribute( "r", selectedGaugeRadius / k ); } for ( const circle of availableGaugeLayer.children ) { circle.setAttribute( "r", availableGaugeRadius / k ); } for (const { element, originalTransform } of gaugeSymbols) { element.setAttribute( "transform", `${originalTransform} scale(${1 / k})` ); } } const zoom = d3 .zoom() .scaleExtent([1, 12]) .extent([ [0, 0], [plotWidth, plotHeight] ]) .translateExtent([ [0, 0], [plotWidth, plotHeight] ]) .filter( event => zoomEnabled && (!event.ctrlKey || event.type === "wheel") && !event.button ) .on("zoom", event => { // Save the transform so it survives Observable redraws. window.__columbiaDashboardZoom = event.transform; updateZoomAppearance(event.transform); }); svgSelection.call(zoom); /* * Gauge-selection behavior */ svgSelection.on( "click.select-gauge", event => { // Clicking selects gauges only when zoom mode is off. if (zoomEnabled) return; const [clickX, clickY] = d3.pointer(event, svg); const transform = d3.zoomTransform(svg); let nearest = null; let nearestDistance = Infinity; for (const gauge of mapGaugeTargets) { // Convert the gauge's original map position into its // current zoomed position. const [x, y] = transform.apply([ gauge.x, gauge.y ]); const distance = Math.hypot( clickX - x, clickY - y ); if (distance < nearestDistance) { nearest = gauge; nearestDistance = distance; } } /* * Convert a 15-screen-pixel hit radius into SVG * coordinates. This keeps selection equally usable when * the SVG is displayed at different physical widths. */ const displayedWidth = svg.getBoundingClientRect().width; const hitRadius = displayedWidth > 0 ? (15 * plotWidth) / displayedWidth : 15; if ( !nearest || nearestDistance > hitRadius ) { return; } const updated = new Set( finalSelectedGaugeIds ); if (updated.has(nearest.id)) { updated.delete(nearest.id); } else { updated.add(nearest.id); } mutable finalSelectedGaugeIds = updated; } ); /* * Cursor behavior */ svgSelection .on("mousedown.cursor", () => { if (zoomEnabled) { svg.style.cursor = "grabbing"; } }) .on( "mouseup.cursor mouseleave.cursor", () => { svg.style.cursor = zoomEnabled ? "grab" : "crosshair"; } ); /* * Map controls */ const controls = document.createElement("div"); controls.style.cssText = ` position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 5px; align-items: center; padding: 5px; border: 1px solid #aaa; border-radius: 4px; background: rgba(255, 255, 255, 0.92); font: 12px sans-serif; `; const zoomToggle = document.createElement("button"); const zoomIn = document.createElement("button"); const zoomOut = document.createElement("button"); const reset = document.createElement("button"); for (const button of [ zoomToggle, zoomIn, zoomOut, reset ]) { button.type = "button"; button.style.cssText = ` min-width: 30px; min-height: 27px; border: 1px solid #999; border-radius: 3px; background: white; cursor: pointer; `; } zoomIn.textContent = "+"; zoomOut.textContent = "−"; reset.textContent = "Reset"; zoomIn.title = "Zoom in"; zoomOut.title = "Zoom out"; reset.title = "Reset map view"; function updateZoomControls() { zoomToggle.textContent = zoomEnabled ? "Zoom: on" : "Select gauges"; zoomToggle.title = zoomEnabled ? "Switch to gauge-selection mode" : "Switch to pan and zoom mode"; zoomToggle.style.background = zoomEnabled ? "#e6f2ff" : "#fff0dc"; // Available gauges are shown only in selection mode. availableGaugeLayer.style.display = zoomEnabled ? "none" : ""; zoomIn.disabled = !zoomEnabled; zoomOut.disabled = !zoomEnabled; zoomIn.style.opacity = zoomEnabled ? "1" : "0.45"; zoomOut.style.opacity = zoomEnabled ? "1" : "0.45"; svg.style.cursor = zoomEnabled ? "grab" : "crosshair"; } zoomToggle.addEventListener( "click", () => { zoomEnabled = !zoomEnabled; window.__columbiaGaugeSelectMode = !zoomEnabled; updateZoomControls(); } ); zoomIn.addEventListener( "click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1.5); } ); zoomOut.addEventListener( "click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1 / 1.5); } ); reset.addEventListener( "click", () => { svgSelection .transition() .duration(300) .call( zoom.transform, d3.zoomIdentity ); } ); controls.append( zoomToggle, zoomIn, zoomOut, reset ); container.append( controls, tooltip, svg ); updateZoomControls(); /* * Restore the previous zoom level after an Observable * dependency causes this cell to rerun. */ svgSelection.call( zoom.transform, window.__columbiaDashboardZoom ?? d3.zoomIdentity ); return container; }35:T9ec,

Master gauge

City

Continental Divide

State boundary

Rivers & Creeks
thin = regular, thick = prominent

No watershed data

36:T71a,finalGaugeScatterplot = { const selectedIds = new Set([ masterGaugeId, ...finalSelectedGaugeIds ]); const data = finalGaugeMetrics .filter(gauge => selectedIds.has(gauge.gaugeId) && Number.isFinite(gauge.drainageAreaKm2) && Number.isFinite(gauge[finalShadeMetric]) && gauge.drainageAreaKm2 < 60000 ); const metricLabels = { flashiness: "Flashiness", meanFlowCfs: "Mean flow (ft³/s)", averageAnnualDeltaCfs: "Annual delta (ft³/s)", relativeAnnualDeltaPct: "Relative delta (%)", averageAnnualPeakCfs: "Peak flow (ft³/s)", averageAnnualMinimumCfs: "Minimum flow (ft³/s)", meanDischargePerArea: "Flow / area (ft³/s/km²)" }; const yLabel = metricLabels[finalShadeMetric] ?? finalShadeMetric; return Plot.plot({ width, height: 500, title: `${yLabel} vs. Drainage Area, Selected Watersheds under 60,000 km²`, marginLeft: 75, marginBottom: 55, x: { label: "Drainage area (km²)", grid: true // type: "log" }, y: { label: yLabel, grid: true }, marks: [ Plot.dot(data, { x: "drainageAreaKm2", y: finalShadeMetric, r: 3, fill: "black", // To color points using the current shading metric instead: // fill: d => // finalMetricColor.color( // d[finalShadeMetric] // ), stroke: "white", strokeWidth: 1, tip: true, title: d => `${d.gaugeName ?? d.gaugeId} USGS ID: ${d.gaugeId} Area: ${d.drainageAreaKm2.toLocaleString(undefined, { maximumFractionDigits: 1 })} km² ${yLabel}: ${d[finalShadeMetric].toLocaleString(undefined, { maximumFractionDigits: 3 })}` }) ] }); }37:T742,finalFlashinessAreaScatterplot = { const selectedIds = new Set([ masterGaugeId, ...finalSelectedGaugeIds ]); const metricLabels = { flashiness: "Flashiness", meanFlowCfs: "Mean flow (ft³/s)", averageAnnualDeltaCfs: "Annual delta (ft³/s)", relativeAnnualDeltaPct: "Relative delta (%)", averageAnnualPeakCfs: "Peak flow (ft³/s)", averageAnnualMinimumCfs: "Minimum flow (ft³/s)", meanDischargePerArea: "Flow / area (ft³/s/km²)" }; const xLabel = metricLabels[finalShadeMetric] ?? finalShadeMetric; const data = finalGaugeMetrics .filter(gauge => selectedIds.has(gauge.gaugeId) && Number.isFinite(gauge[finalShadeMetric]) && Number.isFinite(gauge.drainageAreaKm2) && gauge.drainageAreaKm2 > 0 && gauge.drainageAreaKm2 < 60000 ); return Plot.plot({ width, height: 500, title: `Drainage Area vs. ${xLabel}, Selected Watersheds under 60,000 km²`, marginLeft: 75, marginBottom: 55, x: { label: xLabel, grid: false }, y: { label: "Drainage area (km²)", // type: "log", grid: false }, marks: [ Plot.dot(data, { x: finalShadeMetric, y: "drainageAreaKm2", r: 3, fill: "black", // To color points using the current selected metric: // fill: d => // finalMetricColor.color( // d[finalShadeMetric] // ), stroke: "white", strokeWidth: 1, tip: true, title: d => `${d.gaugeName ?? d.gaugeId} USGS ID: ${d.gaugeId} ${xLabel}: ${d[finalShadeMetric].toLocaleString(undefined, { maximumFractionDigits: 3 })} Area: ${d.drainageAreaKm2.toLocaleString(undefined, { maximumFractionDigits: 1 })} km²` }) ] }); }38:T69a,## Notes/Challenges * NLDI builds the watershed from mapped surface-water routes. White gaps occur where streams end in closed basins or seep into groundwater rather than continuing along a mapped surface route, as happens in parts of eastern Idaho. * Gauge data is US only and does not include the Canadian portion of the watershed * The obvious issue of dams. This can be particularly noticed when you select the Grand Coulee dam, which shows a high amount of flashiness. That particular gauge is downstream of the dam, so the flashiness can be accounted for by dam releases. There are numerous dams across the Colombia River watershed and so the effect on this data is significant. * The continental divide doesn't map 1:1 to the watershed boundary which one would assume would be the case. My initial guess is spatial resolution differences for the differing data sources (however this may be discounted by the fact they each have unique features of roughly the same scale.) It could also be differing methodologies. * In order to make the map more readable I would like to have an LoD system for rendering the rivers so that smaller/less prominent creeks don't render at min zoom. * Because we use API calls to get each river's data, it is not feasible to for example load all gauges then filter ones we do not have data for due to rate limiting. * The issue of selecting a gauge, then not having data: The master list of gauges can be filtered by 'has data' but this does not mean it is sufficient for our calculations. We would have to pull all gauge flow data, compute metrics, then populate a list of viable gauges. For the scope of this assignment that is too much. For example:39:T5ae,### Data sources We use both api calls for loading specific data, as well as uploaded river maps for rendering the graphic. API calls save us from having to store all this data locally, or pre-compute metrics and store them, however expose us to being rate limited - thus there is a discrete button to load selected gauge data. (In my experience USGS is pretty generous with their rate-limits, however having this whole page being ruined by 429 taught me to be conservative.) - **Gauges and watersheds:** [USGS Network Linked Data Index (NLDI)](https://api.water.usgs.gov/docs/nldi/) supplies gauge locations, river-network links, and upstream watershed polygons derived from NHDPlusV2. - **Streamflow:** [USGS daily values](https://waterservices.usgs.gov/docs/dv-service/daily-values-service-details/) supply daily mean discharge. We calculate flashiness and the other flow metrics from these observations. - **Rivers:** [HydroRIVERS v1](https://www.hydrosheds.org/products/hydrorivers) supplies the river lines; we clipped its North American dataset to the Columbia basin for display. - **U.S. state boundaries:** [us-atlas](https://www.npmjs.com/package/us-atlas) supplies the state-boundary TopoJSON. - **Other map context:** [Canadian province]( "https://raw.githubusercontent.com/codeforgermany/click_that_hood/main/public/data/canada.geojson") boundaries and the Continental Divide are separate GeoJSON layers. - **City Locations:** Google Maps3a:Te28, ## Metric Calculations Explained All flow metrics use **USGS daily mean discharge**, measured in cubic feet per second (ft³/s), from the ten most recent complete calendar years. Metrics are first calculated separately for each calendar year and then averaged across the valid years. A year is included only when it contains at least **90% of its expected daily observations**. ### Flashiness Flashiness uses the **Richards–Baker Flashiness Index (RBI)**. **Flashiness = total absolute day-to-day flow change ÷ total daily flow** Only observations from consecutive calendar days are compared. - A lower value indicates relatively stable flow. - A higher value indicates more rapid or frequent changes in flow. - Flashiness measures the speed and frequency of changes, not simply the total range of flow. The reported value is the mean of the valid annual flashiness values. ### Mean flow **Mean flow = sum of daily mean flows ÷ number of daily observations** This measures the typical discharge passing through the gauge. It is reported in ft³/s. Because larger watersheds generally collect more water, mean flow is strongly influenced by contributing watershed area. ### Average annual flow delta For each year: **Annual flow delta = annual maximum daily flow − annual minimum daily flow** The reported value is the mean of the valid annual flow deltas, in ft³/s. This measures the typical absolute difference between high and low flow during a year. Because it is an absolute volume, it is generally larger for larger rivers and watersheds. ### Relative annual flow delta For each year: **Relative annual delta (%) = 100 × annual flow delta ÷ annual mean flow** The reported value is the mean of the valid annual percentages. This expresses the annual flow range relative to the gauge's normal flow and makes differently sized rivers easier to compare. A value may exceed 100% when the annual range is greater than the annual mean flow. ### Average annual peak flow For each year, the largest daily mean discharge is selected. The reported peak-flow metric is the mean of these annual maximum values. This represents a typical annual high-flow extreme and is less sensitive to a single exceptional flood than the highest observation from the entire ten-year period. Peak flow is reported in ft³/s. ### Average annual minimum flow For each year, the smallest daily mean discharge is selected. The reported minimum-flow metric is the mean of these annual minimum values. This represents a typical annual low-flow condition and is less sensitive to one exceptional drought than the lowest observation from the entire ten-year period. Minimum flow is reported in ft³/s. ### Drainage area Drainage area is calculated from the gauge's contributing-watershed polygon and reported in square kilometers (km²). Each selected gauge represents a different outlet, so each gauge has its own upstream drainage area. ### Mean discharge per unit area **Mean discharge per area = mean flow ÷ drainage area** This metric is reported in **ft³/s per km²**. Normalizing discharge by drainage area reduces the influence of watershed size. It allows the map to compare the amount of flow produced per unit of contributing land rather than comparing only total river volume. ### Interpretation The metrics describe different aspects of the flow regime: Raw flow metrics such as mean, peak, minimum, and annual delta are influenced by watershed size. Flashiness, relative annual delta, and discharge per area are generally more suitable for comparison among differently sized watersheds. 3b:T7d8,// finalMetricColor = { // const values = finalGaugeMetrics // .map(gauge => gauge[finalShadeMetric]) // .filter(Number.isFinite); // if (values.length === 0) { // return { // domain: null, // //color: () => "#d9d9d9" // //default color if no values // color: () =>"#f4a6c1" // }; // } // const maximum = Math.max(...values); // const upperBound = maximum > 0 // ? maximum * 1.05 // : 1; // // const scale = d3 // // .scaleSequential(d3.interpolateYlGnBu) // // .domain([0, upperBound]) // // .clamp(true); // const scale = d3 // .scaleSequential( // t => d3.interpolateRgb("#eeeeee", "#707070")(t) // ) // .domain([0, upperBound]) // .clamp(true); // return { // domain: [0, upperBound], // color(value) { // return Number.isFinite(value) // ? scale(value) // //change fallback to alt color: // : "#f4a6c1"; // //: "#d9d9d9"; // } // }; // } finalMetricColor = { const values = finalGaugeMetrics .map(gauge => gauge[finalShadeMetric]) .filter(Number.isFinite); // Fallback when there are no valid values if (values.length === 0) { return { domain: null, color: () => "#f4a6c1" }; } const maximum = Math.max(...values); const upperBound = maximum > 0 ? maximum * 1.05 : 1; const scale = d3 .scaleSequential(t => { // Perceptually controlled sequential palette: // keep hue/chroma roughly constant while lightness // decreases linearly as the data value increases. const lightness = 95 - t * 55; return d3 .hcl( 45, // hue 45, // chroma lightness // perceptual lightness ) .formatHex(); }) .domain([0, upperBound]) .clamp(true); return { domain: [0, upperBound], color(value) { return Number.isFinite(value) ? scale(value) : "#f4a6c1"; } }; }3c:T153a,finalDailyFlowData = { if (!finalMetricRequest) return []; const allRecords = []; for (const gauge of finalMetricRequest.gauges) { const cacheKey = `${gauge.id}:` + `${finalMetricRequest.startYear}-` + `${finalMetricRequest.endYear}`; /* * Reuse successfully loaded data. This also means a failed * new request cannot remove data already in the cache. */ if (finalFlowCache.has(cacheKey)) { allRecords.push( ...finalFlowCache.get(cacheKey) ); continue; } /* * Avoid immediately repeating a request that recently * failed or received a 429 response. */ const previousFailure = finalFlowFailures.get(cacheKey); if ( previousFailure?.retryAt > Date.now() ) { continue; } try { const records = []; /* * Gauge IDs in this notebook normally already begin with * "USGS-". Add the prefix only when it is missing. */ const siteId = gauge.id.startsWith("USGS-") ? gauge.id : `USGS-${gauge.id}`; /* * Statistic 00003 is the daily mean. This prevents daily * minimum or maximum discharge values from being mixed * into the calculations. */ let url = `https://api.waterdata.usgs.gov/ogcapi/v1/collections/daily/items` + `?f=json` + `&monitoring_location_id=${encodeURIComponent(siteId)}` + `¶meter_code=00060` + `&statistic_id=00003` + `&time=${finalMetricRequest.startYear}-01-01` + `/${finalMetricRequest.endYear}-12-31` + `&limit=50000`; /* * Continue until the API no longer provides a next-page * link. Ten years of one daily value usually fits into * one page, but pagination is retained for safety. */ while (url) { const response = await usgsFetch(url); if (!response.ok) { const error = new Error( `USGS request failed for ${gauge.name}: ` + `${response.status} ${response.statusText}` ); error.status = response.status; /* * Retry-After can contain either a number of seconds * or an HTTP date. */ const retryAfterHeader = response.headers.get("retry-after"); let retryDelayMs = response.status === 429 ? 60_000 : 30_000; if (retryAfterHeader !== null) { const retryAfterSeconds = Number(retryAfterHeader); if ( Number.isFinite(retryAfterSeconds) ) { retryDelayMs = retryAfterSeconds * 1000; } else { const retryDate = Date.parse(retryAfterHeader); if (Number.isFinite(retryDate)) { retryDelayMs = Math.max( 0, retryDate - Date.now() ); } } } error.retryAt = Date.now() + retryDelayMs; throw error; } const page = await response.json(); for ( const feature of page.features ?? [] ) { const properties = feature.properties ?? {}; const date = String(properties.time ?? "") .slice(0, 10); const dischargeCfs = Number(properties.value); const year = Number(date.slice(0, 4)); // Ignore malformed or missing observations. if ( !date || !Number.isFinite(year) || !Number.isFinite(dischargeCfs) ) { continue; } records.push({ gaugeId: gauge.id, gaugeName: gauge.name, gaugeType: gauge.type, date, year, dischargeCfs }); } const nextLink = (page.links ?? []).find( link => link.rel === "next" ); url = nextLink?.href ? new URL( nextLink.href, url ).href : null; } /* * Commit only after every page loads successfully. * Partial results are never placed in the cache. */ finalFlowCache.set( cacheKey, records ); finalFlowFailures.delete(cacheKey); allRecords.push(...records); if (records.length === 0) { console.warn( `USGS returned no daily mean flow records for ` + `${gauge.name} (${siteId}).` ); } } catch (error) { finalFlowFailures.set( cacheKey, { gaugeId: gauge.id, gaugeName: gauge.name, status: error.status ?? null, message: error.message, retryAt: error.retryAt ?? Date.now() + 30_000, failedAt: new Date().toISOString() } ); console.warn( `Could not load new flow data for ` + `${gauge.name}. Previously cached data ` + `was preserved.`, error ); /* * Do not rethrow the error. Other cached gauges should * remain available to downstream cells. */ } } return allRecords; }3d:Tc38,finalFlowMetrics = { if (!finalMetricRequest) return []; const dayMs = 24 * 60 * 60 * 1000; const average = values => { const valid = values.filter(Number.isFinite); return valid.length ? valid.reduce((sum, value) => sum + value, 0) / valid.length : null; }; return finalMetricRequest.gauges.map(gauge => { // Keep one daily mean value per date. const byDate = new Map(); for (const record of finalDailyFlowData) { if (record.gaugeId === gauge.id) { byDate.set(record.date, record); } } const byYear = new Map(); for (const record of byDate.values()) { if (!byYear.has(record.year)) { byYear.set(record.year, []); } byYear.get(record.year).push(record); } const annualMetrics = []; for ( let year = finalMetricRequest.startYear; year <= finalMetricRequest.endYear; year++ ) { const records = (byYear.get(year) ?? []) .sort((a, b) => a.date.localeCompare(b.date)); const expectedDays = (Date.UTC(year + 1, 0, 1) - Date.UTC(year, 0, 1)) / dayMs; const coverage = records.length / expectedDays; if (coverage < 0.75) continue; const flows = records.map(d => d.dischargeCfs); const totalFlow = flows.reduce( (sum, value) => sum + value, 0 ); const meanFlowCfs = totalFlow / flows.length; const minimumFlowCfs = Math.min(...flows); const peakFlowCfs = Math.max(...flows); const flowDeltaCfs = peakFlowCfs - minimumFlowCfs; let absoluteChanges = 0; for (let i = 1; i < records.length; i++) { const daysApart = (Date.parse(records[i].date) - Date.parse(records[i - 1].date)) / dayMs; if (daysApart === 1) { absoluteChanges += Math.abs( records[i].dischargeCfs - records[i - 1].dischargeCfs ); } } annualMetrics.push({ year, coverage, observations: records.length, flashiness: totalFlow > 0 ? absoluteChanges / totalFlow : null, meanFlowCfs, flowDeltaCfs, relativeDeltaPct: meanFlowCfs > 0 ? 100 * flowDeltaCfs / meanFlowCfs : null, peakFlowCfs, minimumFlowCfs }); } return { gaugeId: gauge.id, gaugeName: gauge.name, gaugeType: gauge.type, flashiness: average( annualMetrics.map(d => d.flashiness) ), meanFlowCfs: average( annualMetrics.map(d => d.meanFlowCfs) ), averageAnnualDeltaCfs: average( annualMetrics.map(d => d.flowDeltaCfs) ), relativeAnnualDeltaPct: average( annualMetrics.map(d => d.relativeDeltaPct) ), averageAnnualPeakCfs: average( annualMetrics.map(d => d.peakFlowCfs) ), averageAnnualMinimumCfs: average( annualMetrics.map(d => d.minimumFlowCfs) ), yearsUsed: annualMetrics.length, annualMetrics }; }); }3e:T41a,finalSelectedWatersheds = { if (!finalMetricRequest) { return { type: "FeatureCollection", features: [] }; } const features = []; for (const gauge of finalMetricRequest.gauges) { if (gauge.type === "Master") continue; if (!finalBasinCache.has(gauge.id)) { const url = "https://api.water.usgs.gov/nldi/linked-data/" + `nwissite/${encodeURIComponent(gauge.id)}/basin?f=json`; const response = await fetch(url); if (!response.ok) { throw new Error( `Watershed request failed for ${gauge.name}: ` + response.status ); } const data = await response.json(); finalBasinCache.set(gauge.id, data.features ?? []); } for (const feature of finalBasinCache.get(gauge.id)) { features.push({ ...feature, properties: { ...feature.properties, gaugeId: gauge.id, gaugeName: gauge.name } }); } } return { type: "FeatureCollection", features }; }3f:T815,finalGaugeMetrics = { const earthRadiusKm = 6371.0088; function ringAreaKm2(ring) { if (!ring || ring.length < 3) return 0; let sum = 0; for (let i = 0; i < ring.length; i++) { const [lon1, lat1] = ring[i]; const [lon2, lat2] = ring[(i + 1) % ring.length]; sum += ((lon2 - lon1) * Math.PI / 180) * ( 2 + Math.sin(lat1 * Math.PI / 180) + Math.sin(lat2 * Math.PI / 180) ); } return Math.abs( sum * earthRadiusKm ** 2 / 2 ); } function polygonAreaKm2(rings) { if (!rings?.length) return 0; const exterior = ringAreaKm2(rings[0]); const holes = rings.slice(1).reduce( (sum, ring) => sum + ringAreaKm2(ring), 0 ); return Math.max(0, exterior - holes); } function featureAreaKm2(feature) { const geometry = feature.geometry; if (geometry?.type === "Polygon") { return polygonAreaKm2(geometry.coordinates); } if (geometry?.type === "MultiPolygon") { return geometry.coordinates.reduce( (sum, polygon) => sum + polygonAreaKm2(polygon), 0 ); } return 0; } const areaByGaugeId = new Map(); areaByGaugeId.set( masterGaugeId, masterWatershed.features.reduce( (sum, feature) => sum + featureAreaKm2(feature), 0 ) ); for (const feature of finalSelectedWatersheds.features) { const gaugeId = feature.properties.gaugeId; areaByGaugeId.set( gaugeId, (areaByGaugeId.get(gaugeId) ?? 0) + featureAreaKm2(feature) ); } return finalFlowMetrics.map(gauge => { const drainageAreaKm2 = areaByGaugeId.get(gauge.gaugeId) ?? null; return { ...gauge, drainageAreaKm2, // Units: cubic feet per second per square kilometer. meanDischargePerArea: Number.isFinite(gauge.meanFlowCfs) && Number.isFinite(drainageAreaKm2) && drainageAreaKm2 > 0 ? gauge.meanFlowCfs / drainageAreaKm2 : null }; }); }40:T434,//Filter gauges that we have flow data for finalFlowSiteIds = { const upstreamIds = new Set( upstreamGaugeRows.map(gauge => gauge.id) ); const flowIds = new Set(); const parameters = new URLSearchParams({ f: "json", parameter_code: "00060", statistic_id: "00003", computation_period_identifier: "Daily", hydrologic_unit_code: "17", limit: "10000" }); let url = "https://api.waterdata.usgs.gov/ogcapi/v0/" + `collections/time-series-metadata/items?${parameters}`; while (url) { const response = await fetch(url); if (!response.ok) { throw new Error( `Flow-site lookup failed: ${response.status}` ); } const data = await response.json(); for (const feature of data.features ?? []) { const id = feature.properties.monitoring_location_id; if (upstreamIds.has(id)) { flowIds.add(id); } } const next = data.links?.find( link => link.rel === "next" )?.href; url = next ? new URL(next, url).href : null; } return flowIds; }41:T6d9,geojsonAreaKm2 = { const earthRadiusKm = 6371.0088; function ringArea(ring) { if (!ring || ring.length < 3) return 0; let sum = 0; for (let i = 0; i < ring.length; i++) { const [lon1, lat1] = ring[i]; const [lon2, lat2] = ring[(i + 1) % ring.length]; sum += ((lon2 - lon1) * Math.PI / 180) * ( 2 + Math.sin(lat1 * Math.PI / 180) + Math.sin(lat2 * Math.PI / 180) ); } return Math.abs( sum * earthRadiusKm ** 2 / 2 ); } function polygonArea(coordinates) { if (!coordinates?.length) return 0; const exterior = ringArea(coordinates[0]); const holes = coordinates .slice(1) .reduce( (sum, ring) => sum + ringArea(ring), 0 ); return Math.max(0, exterior - holes); } function geometryArea(geometry) { if (!geometry) return 0; if (geometry.type === "Polygon") { return polygonArea(geometry.coordinates); } if (geometry.type === "MultiPolygon") { return geometry.coordinates.reduce( (sum, polygon) => sum + polygonArea(polygon), 0 ); } if (geometry.type === "GeometryCollection") { return geometry.geometries.reduce( (sum, item) => sum + geometryArea(item), 0 ); } return 0; } function calculate(object) { if (!object) return 0; if (object.type === "FeatureCollection") { return object.features.reduce( (sum, feature) => sum + geometryArea(feature.geometry), 0 ); } if (object.type === "Feature") { return geometryArea(object.geometry); } return geometryArea(object); } return calculate; }42:Td9f,gaugePresets = ({ regionalComparison: { label: "Preset 1", ids: [ "USGS-13341140", "USGS-12355347", "USGS-12352500", "USGS-13306336", "USGS-12340000", "USGS-13213000", "USGS-12354500", "USGS-13337099", "USGS-13342500", "USGS-12388700", "USGS-12363500", "USGS-12355342", "USGS-12445500", "USGS-13316500", "USGS-13337000", "USGS-12358500", "USGS-12447383", "USGS-12448500", "USGS-13310199", "USGS-13237920", "USGS-12332000", "USGS-12355500", "USGS-13060385", "USGS-13340600", "USGS-12446150", "USGS-13302005", "USGS-13306370", "USGS-13247500", "USGS-12334510", "USGS-12362500", "USGS-13302500", "USGS-13307000", "USGS-13336500", "USGS-13186000", "USGS-13338500", "USGS-12417650", "USGS-12414500", "USGS-12365700", "USGS-12370000", "USGS-13342340", "USGS-13297330", "USGS-12446400", "USGS-12366000" ], }, preset2: { label: "Preset 2", ids: [ "USGS-13335050", "USGS-13176195", "USGS-13341140", "USGS-12355347", "USGS-12352500", "USGS-13306336", "USGS-12335100", "USGS-12340000", "USGS-13210045", "USGS-13213000", "USGS-13185000", "USGS-12321500", "USGS-12433200", "USGS-12324200", "USGS-12354500", "USGS-12331800", "USGS-13337099", "USGS-13342500", "USGS-12413860", "USGS-12472800", "USGS-12450700", "USGS-12465000", "USGS-12467000", "USGS-13176305", "USGS-13176400", "USGS-12302055", "USGS-12388700", "USGS-12363500", "USGS-12372000", "USGS-12331500", "USGS-13333000", "USGS-12505450", "USGS-12355342", "USGS-12458000", "USGS-14038530", "USGS-12445500", "USGS-12404900", "USGS-12401500", "USGS-12310100", "USGS-12308000", "USGS-480608115242901", "USGS-13169800", "USGS-13316500", "USGS-13337000", "USGS-12323850", "USGS-12358500", "USGS-12452890", "USGS-13233300", "USGS-12447383", "USGS-12449500", "USGS-12448500", "USGS-12449950", "USGS-13310199", "USGS-14044000", "USGS-13237920", "USGS-12332000", "USGS-14013700", "USGS-12323670", "USGS-13331500", "USGS-12306500", "USGS-12355500", "USGS-12335500", "USGS-12338300", "USGS-13340600", "USGS-12413000", "USGS-14046000", "USGS-12446150", "USGS-12439500", "USGS-12392300", "USGS-13302005", "USGS-13351000", "USGS-13306370", "USGS-13247500", "USGS-13250000", "USGS-12396500", "USGS-12334510", "USGS-12362500", "USGS-13302500", "USGS-13307000", "USGS-13336500", "USGS-13186000", "USGS-13338500", "USGS-13177845", "USGS-13334300", "USGS-12417650", "USGS-12414500", "USGS-12354000", "USGS-12451000", "USGS-12365700", "USGS-12370000", "USGS-13342340", "USGS-13297330", "USGS-12506000", "USGS-13344500", "USGS-14033500", "USGS-14012000", "USGS-12459000", "USGS-12342500", "USGS-12446400", "USGS-12366000", "USGS-12510500", "USGS-12484500" ] } })43:T5ee,//It's important that we sort this in order of heirarchy so we can plot them starting bottom up and overlaying will work properly. orderedSelectedWatersheds = { const earthRadiusKm = 6371.0088; const radians = degrees => degrees * Math.PI / 180; function ringArea(ring) { let total = 0; for (let i = 0; i < ring.length - 1; i++) { const [lon1, lat1] = ring[i]; const [lon2, lat2] = ring[i + 1]; total += radians(lon2 - lon1) * (2 + Math.sin(radians(lat1)) + Math.sin(radians(lat2))); } return Math.abs(total * earthRadiusKm ** 2 / 2); } function polygonArea(coordinates) { const outerArea = ringArea(coordinates[0]); const holeArea = coordinates .slice(1) .reduce((sum, ring) => sum + ringArea(ring), 0); return outerArea - holeArea; } function geometryArea(geometry) { if (geometry.type === "Polygon") { return polygonArea(geometry.coordinates); } if (geometry.type === "MultiPolygon") { return geometry.coordinates.reduce( (sum, polygon) => sum + polygonArea(polygon), 0 ); } return 0; } return { type: "FeatureCollection", features: selectedGaugeWatersheds.features .map(feature => ({ ...feature, properties: { ...feature.properties, basinAreaKm2: geometryArea(feature.geometry) } })) .sort( (a, b) => b.properties.basinAreaKm2 - a.properties.basinAreaKm2 ) }; }44:Ta58,hierarchyMap = { const [masterLongitude, masterLatitude] = masterGaugeFeature.geometry.coordinates; const masterPoint = [{ id: masterGaugeId, name: masterGaugeFeature.properties.name ?? "Master gauge", longitude: masterLongitude, latitude: masterLatitude }]; const relevantStates = { type: "FeatureCollection", features: usStates.features.filter(feature => [ "Washington", "Oregon", "Idaho", "Montana", "Wyoming", "Nevada", "Utah" ].includes(feature.properties.name) ) }; return Plot.plot({ width, height: 700, margin: 30, projection: { type: "mercator", domain: masterWatershed }, color: { domain: selectedWatershedColorScale.domain, range: selectedWatershedColorScale.range, legend: false }, marks: [ // Persistent master watershed Plot.geo(masterWatershed, { fill: "#d9e8f2", stroke: "#234f70", strokeWidth: 2 }), // Selected watersheds: largest first, smallest last Plot.geo(orderedSelectedWatersheds, { fill: feature => feature.properties.gaugeName, fillOpacity: 0.75, stroke: "#333", strokeWidth: 1, title: feature => `${feature.properties.gaugeName}\n` + `${feature.properties.gaugeId}\n` + `${feature.properties.basinAreaKm2.toLocaleString(undefined, { maximumFractionDigits: 0 })} km²` }), // Selected gauge locations Plot.dot(selectedGauges, { x: "longitude", y: "latitude", fill: "name", stroke: "white", strokeWidth: 1.5, r: 5, title: gauge => `${gauge.name}\n${gauge.id}` }), // Master gauge location Plot.dot(masterPoint, { x: "longitude", y: "latitude", fill: "#d62728", stroke: "white", strokeWidth: 2, r: 8, symbol: "star", title: gauge => `Master: ${gauge.name}\n${gauge.id}` }), // State borders drawn last so they remain visible Plot.geo(relevantStates, { fillOpacity: 0, stroke: "#666", strokeWidth: 0.8 }), // Plot.geo(canadianProvinces, { // fillOpacity: 0, // stroke: "#666", // strokeWidth: 0.8 // }), Plot.geo(continentalDivide, { fill: "none", stroke: "#7b3294", strokeWidth: 2.5, strokeDasharray: "7,5", title: "Continental Divide" }), Plot.frame({stroke: "#999"}) ] }); }45:Tde1,

${hierarchyMap}

Map symbols

Master watershed ★ Master gauge Selected gauge State or province boundary Continental Divide

Selected gauges

${legendGaugeRows.map(row => html` `)}

Color	Gauge	Location	Hierarchy
	${row.name} ${row.id}	${row.latitude.toFixed(3)}, ${row.longitude.toFixed(3)}	${row.hierarchy}

Hierarchy 1 is the largest and most downstream selected watershed. Smaller upstream watersheds are drawn above it.

`46:Tbda,finalDashboardMap = { const metricsById = new Map( finalGaugeMetrics.map(gauge => [ gauge.gaugeId, gauge ]) ); const metricValue = gaugeId => metricsById.get(gaugeId)?.[finalShadeMetric]; const selectedPolygons = finalSelectedWatersheds.features .slice() .sort((a, b) => (metricsById.get(b.properties.gaugeId) ?.drainageAreaKm2 ?? 0) - (metricsById.get(a.properties.gaugeId) ?.drainageAreaKm2 ?? 0) ); const requestedIds = new Set( finalMetricRequest?.gauges .filter(gauge => gauge.type === "Selected") .map(gauge => gauge.id) ?? [] ); const selectedPoints = upstreamGaugeRows.filter( gauge => requestedIds.has(gauge.id) ); return Plot.plot({ //width, //height: 850, width: 1200, height: 1000, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, color: { type: "identity" }, marks: [ Plot.geo(masterWatershed, { fill: finalMetricColor.color( metricValue(masterGaugeId) ), fillOpacity: 0.78, stroke: "#234f70", strokeWidth: 2 }), // Larger watersheds first; smaller upstream ones on top. Plot.geo(selectedPolygons, { fill: feature => finalMetricColor.color( metricValue( feature.properties.gaugeId ) ), fillOpacity: 0.9, stroke: "#243746", strokeWidth: 1.2, title: feature => `${feature.properties.gaugeName}\n` + `${finalShadeMetric}: ` + `${ Number.isFinite( metricValue( feature.properties.gaugeId ) ) ? metricValue( feature.properties.gaugeId ).toFixed(3) : "No valid data" }` }), Plot.geo(usStates, { fill: "none", stroke: "#666", strokeWidth: 0.8 }), Plot.geo(canadianProvinces, { fill: "none", stroke: "#666", strokeWidth: 0.8 }), Plot.geo(continentalDivide, { fill: "none", stroke: "#7b3294", strokeWidth: 2, strokeDasharray: "7,5" }), Plot.dot(selectedPoints, { x: "longitude", y: "latitude", r: 5, fill: gauge => finalMetricColor.color( metricValue(gauge.id) ), stroke: "white", strokeWidth: 1.5, title: gauge => gauge.name }), Plot.dot([masterGaugeFeature], { x: feature => feature.geometry.coordinates[0], y: feature => feature.geometry.coordinates[1], symbol: "star", r: 10, fill: "#d62728", stroke: "white", strokeWidth: 1.5, title: () => "Master gauge" }), // Plot.frame({ // //stroke: "#999" // }) ] }); }47:Tf6a,improvedDashboardMap = { const svg = finalDashboardMap.cloneNode(true); const plotWidth = Number(svg.getAttribute("width")) || width; const plotHeight = Number(svg.getAttribute("height")) || 850; // Put the rendered map layers inside one transformable group. const zoomLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); for (const child of [...svg.children]) { if (child.tagName.toLowerCase() === "g") { zoomLayer.append(child); } } // Render rivers with exactly the same projection and dimensions // as the existing map. const prominentRivers = { type: "FeatureCollection", features: majorRivers.features.filter( feature => Number(feature.properties.scalerank) <= 2 ) }; const riverPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ // Larger tributaries. Plot.geo(majorRivers, { fill: "none", stroke: "#5aa6d6", strokeOpacity: 0.75, strokeWidth: 0.9 }), // Most prominent rivers, including the Columbia. Plot.geo(prominentRivers, { fill: "none", stroke: "#2676a8", strokeOpacity: 0.95, strokeWidth: 1.8 }) ] }); const riverLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); riverLayer.setAttribute("aria-label", "major rivers"); for ( const group of riverPlot.querySelectorAll('g[aria-label="geo"]') ) { riverLayer.append(group.cloneNode(true)); } // Place rivers above watershed fills but below boundaries // and gauge points. zoomLayer.insertBefore( riverLayer, zoomLayer.children[2] ?? null ); svg.append(zoomLayer); svg.style.display = "block"; svg.style.maxWidth = "100%"; svg.style.height = "auto"; svg.style.cursor = "grab"; svg.style.touchAction = "none"; const svgSelection = d3.select(svg); const zoom = d3 .zoom() .scaleExtent([1, 12]) .extent([ [0, 0], [plotWidth, plotHeight] ]) .translateExtent([ [0, 0], [plotWidth, plotHeight] ]) .on("zoom", event => { zoomLayer.setAttribute( "transform", event.transform ); }); svgSelection.call(zoom); svgSelection .on("mousedown.cursor", () => { svg.style.cursor = "grabbing"; }) .on("mouseup.cursor mouseleave.cursor", () => { svg.style.cursor = "grab"; }); const container = document.createElement("div"); container.style.cssText = "position:relative; overflow:hidden; width:100%;"; const controls = document.createElement("div"); controls.style.cssText = "position:absolute; z-index:2; top:14px; right:14px;" + "display:flex; gap:5px; padding:5px;" + "background:rgba(255,255,255,0.9);" + "border:1px solid #aaa; border-radius:4px;"; const zoomIn = document.createElement("button"); zoomIn.type = "button"; zoomIn.textContent = "+"; zoomIn.title = "Zoom in"; const zoomOut = document.createElement("button"); zoomOut.type = "button"; zoomOut.textContent = "−"; zoomOut.title = "Zoom out"; const reset = document.createElement("button"); reset.type = "button"; reset.textContent = "Reset"; reset.title = "Reset map view"; zoomIn.addEventListener("click", () => { svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1.5); }); zoomOut.addEventListener("click", () => { svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1 / 1.5); }); reset.addEventListener("click", () => { svgSelection .transition() .duration(300) .call(zoom.transform, d3.zoomIdentity); }); controls.append(zoomIn, zoomOut, reset); container.append(controls, svg); return container; }48:T456,// majorRivers = fetch( // "https://cdn.jsdelivr.net/gh/nvkelso/" + // "natural-earth-vector@master/geojson/" + // "ne_10m_rivers_lake_centerlines_scale_rank.geojson" // ).then(async response => { // if (!response.ok) { // throw new Error( // `River request failed: ${response.status}` // ); // } // const data = await response.json(); // return { // type: "FeatureCollection", // // Lower scalerank means a more prominent river. // features: data.features.filter(feature => // Number(feature.properties.scalerank) <= 10 // ) // }; // }) majorRivers = fetch( "https://cdn.jsdelivr.net/gh/nvkelso/" + "natural-earth-vector@master/geojson/" + "ne_10m_rivers_lake_centerlines_scale_rank.geojson" ).then(async response => { if (!response.ok) { throw new Error( `River request failed: ${response.status}` ); } const data = await response.json(); return { type: "FeatureCollection", // Retain every river supplied by this dataset. features: data.features.filter( feature => feature.geometry != null ) }; })49:T2a47,improvedDashboardMap2 = { // Clone only the SVG so the original map remains untouched. const sourceSvg = finalDashboardMap.tagName?.toLowerCase() === "svg" ? finalDashboardMap : finalDashboardMap.querySelector("svg"); const svg = sourceSvg.cloneNode(true); const plotWidth = Number(svg.getAttribute("width")) || width; const plotHeight = Number(svg.getAttribute("height")) || 850; svg.style.display = "block"; svg.style.width = "100%"; svg.style.height = "auto"; svg.style.touchAction = "none"; const container = document.createElement("div"); container.style.cssText = ` position: relative; width: 100%; overflow: hidden; background: white; `; /* * Move all existing Plot layers into one group. * Transforming this group pans and zooms the map. */ const zoomLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); const originalLayers = [...svg.children].filter( child => child.tagName.toLowerCase() === "g" ); for (const layer of originalLayers) { zoomLayer.append(layer); } /* * The first two Plot.geo layers in finalDashboardMap are: * 0: master watershed * 1: selected watersheds */ const masterBoundaryPaths = [ ...(originalLayers[0]?.querySelectorAll("path") ?? []) ]; const selectedBoundaryPaths = [ ...(originalLayers[1]?.querySelectorAll("path") ?? []) ]; /* * Create river layers with the same projection as the map. */ const prominentRivers = { type: "FeatureCollection", features: majorRivers.features.filter( feature => Number(feature.properties.scalerank) <= 5 ) }; const riverPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ Plot.geo(majorRivers, { fill: "none", //stroke: "#5aa6d6", stroke: "#d65a5a", strokeOpacity: 0.72, strokeWidth: 0.8 }), Plot.geo(prominentRivers, { fill: "none", //stroke: "#2676a8", stroke: "#d65a5a", strokeOpacity: 0.95, strokeWidth: 1.6 }) ] }); const riverLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); riverLayer.setAttribute( "aria-label", "major rivers" ); // Clone complete groups so fill:none and stroke styles survive. for ( const group of riverPlot.querySelectorAll('g[aria-label="geo"]') ) { riverLayer.append(group.cloneNode(true)); } /* * Insert rivers above watershed fills but below the * state/province boundaries and gauge points. */ zoomLayer.insertBefore( riverLayer, originalLayers[2] ?? null ); svg.append(zoomLayer); /* * Keep line widths from growing automatically with zoom. */ for ( const path of zoomLayer.querySelectorAll("path") ) { path.setAttribute( "vector-effect", "non-scaling-stroke" ); } /* * Locate Plot's gauge-marker layers. */ const gaugeLayers = [ ...zoomLayer.querySelectorAll( ':scope > g[aria-label="dot"]' ) ]; const gaugeCircles = [ ...gaugeLayers.flatMap(layer => [...layer.querySelectorAll("circle")] ) ].map(circle => ({ element: circle, // Force selected gauges to remain physically small. radius: 4 })); const gaugeSymbols = [ ...gaugeLayers.flatMap(layer => [...layer.querySelectorAll("path")] ) ].map(path => ({ element: path, originalTransform: path.getAttribute("transform") ?? "" })); for (const {element} of gaugeCircles) { element.setAttribute( "vector-effect", "non-scaling-stroke" ); } for (const {element} of gaugeSymbols) { element.setAttribute( "vector-effect", "non-scaling-stroke" ); } /* * Custom tooltip. */ const tooltip = document.createElement("div"); tooltip.style.cssText = ` position: absolute; z-index: 4; display: none; pointer-events: none; padding: 6px 9px; max-width: 280px; border: 1px solid #777; border-radius: 4px; background: rgba(255, 255, 255, 0.96); color: #222; font: 12px sans-serif; line-height: 1.35; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18); `; const gaugeMarkers = [ ...gaugeCircles.map(d => d.element), ...gaugeSymbols.map(d => d.element) ]; for (const marker of gaugeMarkers) { const nativeTitle = marker.querySelector("title"); const label = nativeTitle?.textContent?.trim() || marker.getAttribute("aria-label") || "Gauge"; // Avoid displaying the native and custom tooltips together. nativeTitle?.remove(); marker.style.pointerEvents = "all"; marker.style.cursor = "pointer"; marker.addEventListener( "pointerenter", event => { tooltip.textContent = label; tooltip.style.display = "block"; positionTooltip(event); } ); marker.addEventListener( "pointermove", positionTooltip ); marker.addEventListener( "pointerleave", () => { tooltip.style.display = "none"; } ); } function positionTooltip(event) { const bounds = container.getBoundingClientRect(); let left = event.clientX - bounds.left + 12; let top = event.clientY - bounds.top + 12; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; const tooltipBounds = tooltip.getBoundingClientRect(); if ( tooltipBounds.right > bounds.right - 8 ) { left = event.clientX - bounds.left - tooltipBounds.width - 12; tooltip.style.left = `${left}px`; } if ( tooltipBounds.bottom > bounds.bottom - 8 ) { top = event.clientY - bounds.top - tooltipBounds.height - 12; tooltip.style.top = `${top}px`; } } /* * Zoom behavior. */ const svgSelection = d3.select(svg); let zoomEnabled = true; function updateZoomAppearance(transform) { zoomLayer.setAttribute( "transform", transform ); const zoomLevel = transform.k; /* * Watershed borders become thinner as the user * zooms in. */ const masterWidth = Math.max( 0.65, 2 / Math.sqrt(zoomLevel) ); const selectedWidth = Math.max( 0.45, 1.2 / Math.sqrt(zoomLevel) ); for (const path of masterBoundaryPaths) { path.setAttribute( "stroke-width", masterWidth ); } for (const path of selectedBoundaryPaths) { path.setAttribute( "stroke-width", selectedWidth ); } /* * Circles remain four screen pixels in radius. * Their map coordinates still move with the zoom. */ for ( const {element, radius} of gaugeCircles ) { element.setAttribute( "r", radius / zoomLevel ); } /* * Keep non-circular symbols, such as the master * gauge star, at their original physical size. */ for ( const { element, originalTransform } of gaugeSymbols ) { element.setAttribute( "transform", `${originalTransform} scale(${1 / zoomLevel})` ); } } const zoom = d3 .zoom() .scaleExtent([1, 12]) .extent([ [0, 0], [plotWidth, plotHeight] ]) .translateExtent([ [0, 0], [plotWidth, plotHeight] ]) .filter(event => { if (!zoomEnabled) return false; // Keep normal left-button dragging and wheel zoom. return ( (!event.ctrlKey || event.type === "wheel") && !event.button ); }) .on("zoom", event => { updateZoomAppearance(event.transform); }); svgSelection.call(zoom); svgSelection .on("mousedown.cursor", () => { if (zoomEnabled) { svg.style.cursor = "grabbing"; } }) .on( "mouseup.cursor mouseleave.cursor", () => { svg.style.cursor = zoomEnabled ? "grab" : "default"; } ); /* * Map controls. */ const controls = document.createElement("div"); controls.style.cssText = ` position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 5px; align-items: center; padding: 5px; border: 1px solid #aaa; border-radius: 4px; background: rgba(255, 255, 255, 0.92); font: 12px sans-serif; `; const zoomToggle = document.createElement("button"); const zoomIn = document.createElement("button"); const zoomOut = document.createElement("button"); const reset = document.createElement("button"); for (const button of [ zoomToggle, zoomIn, zoomOut, reset ]) { button.type = "button"; button.style.cssText = ` min-width: 30px; min-height: 27px; border: 1px solid #999; border-radius: 3px; background: white; cursor: pointer; `; } zoomToggle.textContent = "Zoom: on"; zoomToggle.title = "Enable or disable wheel and drag zooming"; zoomIn.textContent = "+"; zoomIn.title = "Zoom in"; zoomOut.textContent = "−"; zoomOut.title = "Zoom out"; reset.textContent = "Reset"; reset.title = "Reset map view"; function updateZoomControls() { zoomToggle.textContent = zoomEnabled ? "Zoom: on" : "Zoom: off"; zoomToggle.style.background = zoomEnabled ? "#e6f2ff" : "white"; zoomIn.disabled = !zoomEnabled; zoomOut.disabled = !zoomEnabled; zoomIn.style.opacity = zoomEnabled ? "1" : "0.45"; zoomOut.style.opacity = zoomEnabled ? "1" : "0.45"; svg.style.cursor = zoomEnabled ? "grab" : "default"; } zoomToggle.addEventListener( "click", () => { zoomEnabled = !zoomEnabled; updateZoomControls(); } ); zoomIn.addEventListener("click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1.5); }); zoomOut.addEventListener("click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1 / 1.5); }); reset.addEventListener("click", () => { svgSelection .transition() .duration(300) .call( zoom.transform, d3.zoomIdentity ); }); controls.append( zoomToggle, zoomIn, zoomOut, reset ); container.append( controls, tooltip, svg ); updateZoomControls(); updateZoomAppearance(d3.zoomIdentity); return container; }4a:T3298,improvedDashboardMap3 = { // Clone only the SVG so the original map remains untouched. const sourceSvg = finalDashboardMap.tagName?.toLowerCase() === "svg" ? finalDashboardMap : finalDashboardMap.querySelector("svg"); const svg = sourceSvg.cloneNode(true); const plotWidth = Number(svg.getAttribute("width")) || width; const plotHeight = Number(svg.getAttribute("height")) || 850; svg.style.display = "block"; svg.style.width = "100%"; svg.style.height = "auto"; svg.style.touchAction = "none"; const container = document.createElement("div"); container.style.cssText = ` position: relative; width: 100%; overflow: hidden; background: white; `; /* * Move all existing Plot layers into one group. * Transforming this group pans and zooms the map. */ const zoomLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); const originalLayers = [...svg.children].filter( child => child.tagName.toLowerCase() === "g" ); for (const layer of originalLayers) { zoomLayer.append(layer); } /* * The first two Plot.geo layers in finalDashboardMap are: * 0: master watershed * 1: selected watersheds */ const masterBoundaryPaths = [ ...(originalLayers[0]?.querySelectorAll("path") ?? []) ]; const selectedBoundaryPaths = [ ...(originalLayers[1]?.querySelectorAll("path") ?? []) ]; /* * Create river layers with the same projection as the map. */ const prominentRivers = { type: "FeatureCollection", features: columbiaRivers.features.filter(feature => Number(feature.properties.ORD_STRA) >= 6 || Number(feature.properties.DIS_AV_CMS) >= 100 ) }; const riverPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ // All 6,327 reaches in the uploaded display dataset. Plot.geo(columbiaRivers, { fill: "none", stroke: "#63a6cb", strokeOpacity: 0.65, strokeWidth: 0.75 }), // Larger rivers receive a stronger line. Plot.geo(prominentRivers, { fill: "none", stroke: "#2476a4", strokeOpacity: 0.95, strokeWidth: 1.6 }) ] }); const riverLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); riverLayer.setAttribute( "aria-label", "major rivers" ); // Clone complete groups so fill:none and stroke styles survive. for ( const group of riverPlot.querySelectorAll('g[aria-label="geo"]') ) { riverLayer.append(group.cloneNode(true)); } /* * Insert rivers above watershed fills but below the * state/province boundaries and gauge points. */ zoomLayer.insertBefore( riverLayer, originalLayers[2] ?? null ); const availableGaugeLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); availableGaugeLayer.setAttribute( "aria-label", "available gauges" ); availableGaugeLayer.style.pointerEvents = "none"; for (const gauge of mapGaugeTargets) { const circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); circle.setAttribute("cx", gauge.x); circle.setAttribute("cy", gauge.y); circle.setAttribute("r", 2.5); circle.setAttribute("fill", "#f28e2b"); circle.setAttribute("fill-opacity", "0.65"); availableGaugeLayer.append(circle); } // Keep existing selected-gauge marks above these candidates. const firstGaugeLayer = zoomLayer.querySelector( ':scope > g[aria-label="dot"]' ); zoomLayer.insertBefore( availableGaugeLayer, firstGaugeLayer ); svg.append(zoomLayer); /* * Keep line widths from growing automatically with zoom. */ for ( const path of zoomLayer.querySelectorAll("path") ) { path.setAttribute( "vector-effect", "non-scaling-stroke" ); } /* * Locate Plot's gauge-marker layers. */ const gaugeLayers = [ ...zoomLayer.querySelectorAll( ':scope > g[aria-label="dot"]' ) ]; const gaugeCircles = [ ...gaugeLayers.flatMap(layer => [...layer.querySelectorAll("circle")] ) ].map(circle => ({ element: circle, // Force selected gauges to remain physically small. radius: 4 })); const gaugeSymbols = [ ...gaugeLayers.flatMap(layer => [...layer.querySelectorAll("path")] ) ].map(path => ({ element: path, originalTransform: path.getAttribute("transform") ?? "" })); for (const {element} of gaugeCircles) { element.setAttribute( "vector-effect", "non-scaling-stroke" ); } for (const {element} of gaugeSymbols) { element.setAttribute( "vector-effect", "non-scaling-stroke" ); } /* * Custom tooltip. */ const tooltip = document.createElement("div"); tooltip.style.cssText = ` position: absolute; z-index: 4; display: none; pointer-events: none; padding: 6px 9px; max-width: 280px; border: 1px solid #777; border-radius: 4px; background: rgba(255, 255, 255, 0.96); color: #222; font: 12px sans-serif; line-height: 1.35; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18); `; const gaugeMarkers = [ ...gaugeCircles.map(d => d.element), ...gaugeSymbols.map(d => d.element) ]; for (const marker of gaugeMarkers) { const nativeTitle = marker.querySelector("title"); const label = nativeTitle?.textContent?.trim() || marker.getAttribute("aria-label") || "Gauge"; // Avoid displaying the native and custom tooltips together. nativeTitle?.remove(); marker.style.pointerEvents = "all"; marker.style.cursor = "pointer"; marker.addEventListener( "pointerenter", event => { tooltip.textContent = label; tooltip.style.display = "block"; positionTooltip(event); } ); marker.addEventListener( "pointermove", positionTooltip ); marker.addEventListener( "pointerleave", () => { tooltip.style.display = "none"; } ); } function positionTooltip(event) { const bounds = container.getBoundingClientRect(); let left = event.clientX - bounds.left + 12; let top = event.clientY - bounds.top + 12; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; const tooltipBounds = tooltip.getBoundingClientRect(); if ( tooltipBounds.right > bounds.right - 8 ) { left = event.clientX - bounds.left - tooltipBounds.width - 12; tooltip.style.left = `${left}px`; } if ( tooltipBounds.bottom > bounds.bottom - 8 ) { top = event.clientY - bounds.top - tooltipBounds.height - 12; tooltip.style.top = `${top}px`; } } /* * Zoom behavior. */ const svgSelection = d3.select(svg); let zoomEnabled = true; function updateZoomAppearance(transform) { zoomLayer.setAttribute( "transform", transform ); const zoomLevel = transform.k; /* * Watershed borders become thinner as the user * zooms in. */ const masterWidth = Math.max( 0.65, 2 / Math.sqrt(zoomLevel) ); const selectedWidth = Math.max( 0.45, 1.2 / Math.sqrt(zoomLevel) ); for (const path of masterBoundaryPaths) { path.setAttribute( "stroke-width", masterWidth ); } for (const path of selectedBoundaryPaths) { path.setAttribute( "stroke-width", selectedWidth ); } /* * Circles remain four screen pixels in radius. * Their map coordinates still move with the zoom. */ for ( const {element, radius} of gaugeCircles ) { element.setAttribute( "r", radius / zoomLevel ); } /* * Keep non-circular symbols, such as the master * gauge star, at their original physical size. */ for ( const { element, originalTransform } of gaugeSymbols ) { element.setAttribute( "transform", `${originalTransform} scale(${1 / zoomLevel})` ); } } const zoom = d3 .zoom() .scaleExtent([1, 12]) .extent([ [0, 0], [plotWidth, plotHeight] ]) .translateExtent([ [0, 0], [plotWidth, plotHeight] ]) .filter(event => { if (!zoomEnabled) return false; // Keep normal left-button dragging and wheel zoom. return ( (!event.ctrlKey || event.type === "wheel") && !event.button ); }) .on("zoom", event => { updateZoomAppearance(event.transform); }); svgSelection.call(zoom); //Listener for mouseclicks svgSelection.on("click.select-gauge", event => { // "Zoom: off" becomes gauge-selection mode. if (zoomEnabled) return; const [clickX, clickY] = d3.pointer(event, svg); const transform = d3.zoomTransform(svg); let nearest = null; let nearestDistance = Infinity; for (const gauge of mapGaugeTargets) { const [x, y] = transform.apply([ gauge.x, gauge.y ]); const distance = Math.hypot( clickX - x, clickY - y ); if (distance < nearestDistance) { nearest = gauge; nearestDistance = distance; } } // Keep the hit area about 15 physical screen pixels wide, // even when the SVG is resized by the notebook. const hitRadius = 15 * plotWidth / svg.getBoundingClientRect().width; if (!nearest || nearestDistance > hitRadius) { return; } const updated = new Set(finalSelectedGaugeIds); if (updated.has(nearest.id)) { updated.delete(nearest.id); } else { updated.add(nearest.id); } mutable finalSelectedGaugeIds = updated; }); svgSelection .on("mousedown.cursor", () => { if (zoomEnabled) { svg.style.cursor = "grabbing"; } }) .on( "mouseup.cursor mouseleave.cursor", () => { svg.style.cursor = zoomEnabled ? "grab" : "default"; } ); /* * Map controls. */ const controls = document.createElement("div"); controls.style.cssText = ` position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 5px; align-items: center; padding: 5px; border: 1px solid #aaa; border-radius: 4px; background: rgba(255, 255, 255, 0.92); font: 12px sans-serif; `; const zoomToggle = document.createElement("button"); const zoomIn = document.createElement("button"); const zoomOut = document.createElement("button"); const reset = document.createElement("button"); for (const button of [ zoomToggle, zoomIn, zoomOut, reset ]) { button.type = "button"; button.style.cssText = ` min-width: 30px; min-height: 27px; border: 1px solid #999; border-radius: 3px; background: white; cursor: pointer; `; } zoomToggle.textContent = "Zoom: on"; zoomToggle.title = "Enable or disable wheel and drag zooming"; zoomIn.textContent = "+"; zoomIn.title = "Zoom in"; zoomOut.textContent = "−"; zoomOut.title = "Zoom out"; reset.textContent = "Reset"; reset.title = "Reset map view"; function updateZoomControls() { zoomToggle.textContent = zoomEnabled ? "Zoom: on" : "Zoom: off"; zoomToggle.style.background = zoomEnabled ? "#e6f2ff" : "white"; zoomIn.disabled = !zoomEnabled; zoomOut.disabled = !zoomEnabled; zoomIn.style.opacity = zoomEnabled ? "1" : "0.45"; zoomOut.style.opacity = zoomEnabled ? "1" : "0.45"; svg.style.cursor = zoomEnabled ? "grab" : "default"; } zoomToggle.addEventListener( "click", () => { zoomEnabled = !zoomEnabled; updateZoomControls(); } ); zoomIn.addEventListener("click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1.5); }); zoomOut.addEventListener("click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1 / 1.5); }); reset.addEventListener("click", () => { svgSelection .transition() .duration(300) .call( zoom.transform, d3.zoomIdentity ); }); controls.append( zoomToggle, zoomIn, zoomOut, reset ); container.append( controls, tooltip, svg ); updateZoomControls(); updateZoomAppearance(d3.zoomIdentity); return container; }4b:T5be,mapGaugeTargets = { const sourceSvg = finalDashboardMap.tagName?.toLowerCase() === "svg" ? finalDashboardMap : finalDashboardMap.querySelector("svg"); const plotWidth = Number(sourceSvg.getAttribute("width")) || width; const plotHeight = Number(sourceSvg.getAttribute("height")) || 850; const candidates = finalGaugeRows.filter(gauge => gauge.hasFlowData && gauge.id !== masterGaugeId && Number.isFinite(gauge.longitude) && Number.isFinite(gauge.latitude) ); // Temporary plot used only to calculate exact screen positions. const positionPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ Plot.dot(candidates, { x: "longitude", y: "latitude", r: 1, title: gauge => gauge.id }) ] }); const candidateById = new Map( candidates.map(gauge => [gauge.id, gauge]) ); return [ ...positionPlot.querySelectorAll( 'g[aria-label="dot"] circle' ) ].map(circle => { const id = circle.querySelector("title")?.textContent; const gauge = candidateById.get(id); return gauge && { ...gauge, x: Number(circle.getAttribute("cx")), y: Number(circle.getAttribute("cy")) }; }).filter(gauge => gauge && Number.isFinite(gauge.x) && Number.isFinite(gauge.y) ); }4c:T31c9,improvedDashboardMap4 = { const sourceSvg = finalDashboardMap.tagName?.toLowerCase() === "svg" ? finalDashboardMap : finalDashboardMap.querySelector("svg"); const svg = sourceSvg.cloneNode(true); const plotWidth = Number(svg.getAttribute("width")) || width; const plotHeight = Number(svg.getAttribute("height")) || 850; svg.style.display = "block"; svg.style.width = "100%"; svg.style.height = "auto"; svg.style.touchAction = "none"; const container = document.createElement("div"); container.style.cssText = ` position: relative; width: 100%; overflow: hidden; background: white; `; // Put the existing map layers into a single zoomable group. const zoomLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); const originalLayers = [...svg.children].filter( child => child.tagName.toLowerCase() === "g" ); for (const layer of originalLayers) { zoomLayer.append(layer); } const masterBoundaryPaths = [ ...(originalLayers[0]?.querySelectorAll("path") ?? []) ]; const selectedBoundaryPaths = [ ...(originalLayers[1]?.querySelectorAll("path") ?? []) ]; // Add HydroRIVERS using the same projection as the base map. const prominentRivers = { type: "FeatureCollection", features: columbiaRivers.features.filter(feature => Number(feature.properties.ORD_STRA) >= 6 || Number(feature.properties.DIS_AV_CMS) >= 100 ) }; const riverPlot = Plot.plot({ width: plotWidth, height: plotHeight, margin: 20, projection: { type: "mercator", domain: masterWatershed, inset: 25 }, marks: [ Plot.geo(columbiaRivers, { fill: "none", stroke: "#63a6cb", strokeOpacity: 0.65, strokeWidth: 0.75 }), Plot.geo(prominentRivers, { fill: "none", stroke: "#2476a4", strokeOpacity: 0.95, strokeWidth: 1.6 }) ] }); const riverLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); riverLayer.setAttribute("aria-label", "rivers"); // Clone the groups, not just their paths, to preserve Plot's styles. for (const group of riverPlot.querySelectorAll( 'g[aria-label="geo"]' )) { riverLayer.append(group.cloneNode(true)); } // Rivers sit above watershed fills and below boundaries/gauges. zoomLayer.insertBefore( riverLayer, originalLayers[2] ?? null ); // Orange dots show gauges available to add in selection mode. const availableGaugeLayer = document.createElementNS( "http://www.w3.org/2000/svg", "g" ); availableGaugeLayer.setAttribute( "aria-label", "available gauges" ); availableGaugeLayer.style.pointerEvents = "none"; for (const gauge of mapGaugeTargets) { const circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); circle.setAttribute("cx", gauge.x); circle.setAttribute("cy", gauge.y); circle.setAttribute("r", 2.5); circle.setAttribute("fill", "#f28e2b"); circle.setAttribute("fill-opacity", "0.75"); //set circle attribute to be gauge name circle.setAttribute( "data-gauge-name", gauge.name ?? gauge.id ); circle.style.pointerEvents = "all"; circle.style.cursor = "pointer"; availableGaugeLayer.append(circle); } const firstGaugeLayer = zoomLayer.querySelector( ':scope > g[aria-label="dot"]' ); zoomLayer.insertBefore( availableGaugeLayer, firstGaugeLayer ); svg.append(zoomLayer); // Keep geographic line widths steady as the map zooms. for (const path of zoomLayer.querySelectorAll("path")) { path.setAttribute( "vector-effect", "non-scaling-stroke" ); } const gaugeLayers = [ ...zoomLayer.querySelectorAll( ':scope > g[aria-label="dot"]' ) ]; const gaugeCircles = gaugeLayers.flatMap(layer => [...layer.querySelectorAll("circle")] ); const gaugeSymbols = gaugeLayers.flatMap(layer => [...layer.querySelectorAll("path")] ).map(element => ({ element, originalTransform: element.getAttribute("transform") ?? "" })); for (const circle of gaugeCircles) { circle.setAttribute( "vector-effect", "non-scaling-stroke" ); } for (const {element} of gaugeSymbols) { element.setAttribute( "vector-effect", "non-scaling-stroke" ); } // Tooltip for selected gauges and the master gauge. const tooltip = document.createElement("div"); tooltip.style.cssText = ` position: absolute; z-index: 4; display: none; pointer-events: none; padding: 6px 9px; max-width: 280px; border: 1px solid #777; border-radius: 4px; background: rgba(255, 255, 255, 0.96); color: #222; font: 12px sans-serif; line-height: 1.35; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18); `; function positionTooltip(event) { const bounds = container.getBoundingClientRect(); let left = event.clientX - bounds.left + 12; let top = event.clientY - bounds.top + 12; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; const tipBounds = tooltip.getBoundingClientRect(); if (tipBounds.right > bounds.right - 8) { left = event.clientX - bounds.left - tipBounds.width - 12; tooltip.style.left = `${left}px`; } if (tipBounds.bottom > bounds.bottom - 8) { top = event.clientY - bounds.top - tipBounds.height - 12; tooltip.style.top = `${top}px`; } } availableGaugeLayer.addEventListener("pointerover", event => { const circle = event.target.closest("circle"); if (!circle) return; tooltip.textContent = circle.getAttribute("data-gauge-name"); tooltip.style.display = "block"; positionTooltip(event); }); availableGaugeLayer.addEventListener("pointermove", event => { if (event.target.closest("circle")) { positionTooltip(event); } }); availableGaugeLayer.addEventListener("pointerout", event => { if (event.target.closest("circle")) { tooltip.style.display = "none"; } }); const gaugeMarkers = [ ...gaugeCircles, ...gaugeSymbols.map(d => d.element) ]; for (const marker of gaugeMarkers) { const nativeTitle = marker.querySelector("title"); const label = nativeTitle?.textContent?.trim() || marker.getAttribute("aria-label") || "Gauge"; nativeTitle?.remove(); marker.style.pointerEvents = "all"; marker.style.cursor = "pointer"; marker.addEventListener("pointerenter", event => { tooltip.textContent = label; tooltip.style.display = "block"; positionTooltip(event); }); marker.addEventListener( "pointermove", positionTooltip ); marker.addEventListener("pointerleave", () => { tooltip.style.display = "none"; }); } const svgSelection = d3.select(svg); // Preserve state when Observable redraws this cell. let zoomEnabled = window.__columbiaGaugeSelectMode !== true; function updateZoomAppearance(transform) { zoomLayer.setAttribute( "transform", transform.toString() ); const k = transform.k; for (const path of masterBoundaryPaths) { path.setAttribute( "stroke-width", Math.max(0.65, 2 / Math.sqrt(k)) ); } for (const path of selectedBoundaryPaths) { path.setAttribute( "stroke-width", Math.max(0.45, 1.2 / Math.sqrt(k)) ); } // Keep gauge dots the same physical size at every zoom level. for (const circle of gaugeCircles) { circle.setAttribute("r", 4 / k); } for (const circle of availableGaugeLayer.children) { circle.setAttribute("r", 2.5 / k); } for (const { element, originalTransform } of gaugeSymbols) { element.setAttribute( "transform", `${originalTransform} scale(${1 / k})` ); } } const zoom = d3.zoom() .scaleExtent([1, 12]) .extent([ [0, 0], [plotWidth, plotHeight] ]) .translateExtent([ [0, 0], [plotWidth, plotHeight] ]) .filter(event => zoomEnabled && (!event.ctrlKey || event.type === "wheel") && !event.button ) .on("zoom", event => { window.__columbiaDashboardZoom = event.transform; updateZoomAppearance(event.transform); }); svgSelection.call(zoom); // In selection mode, toggle the closest gauge to the click. svgSelection.on("click.select-gauge", event => { if (zoomEnabled) return; const [clickX, clickY] = d3.pointer(event, svg); const transform = d3.zoomTransform(svg); let nearest = null; let nearestDistance = Infinity; for (const gauge of mapGaugeTargets) { const [x, y] = transform.apply([ gauge.x, gauge.y ]); const distance = Math.hypot( clickX - x, clickY - y ); if (distance < nearestDistance) { nearest = gauge; nearestDistance = distance; } } // Convert a 15-screen-pixel hit radius to SVG coordinates. const displayedWidth = svg.getBoundingClientRect().width; const hitRadius = displayedWidth > 0 ? 15 * plotWidth / displayedWidth : 15; if ( !nearest || nearestDistance > hitRadius ) { return; } const updated = new Set( finalSelectedGaugeIds ); if (updated.has(nearest.id)) { updated.delete(nearest.id); } else { updated.add(nearest.id); } mutable finalSelectedGaugeIds = updated; }); svgSelection .on("mousedown.cursor", () => { if (zoomEnabled) { svg.style.cursor = "grabbing"; } }) .on( "mouseup.cursor mouseleave.cursor", () => { svg.style.cursor = zoomEnabled ? "grab" : "crosshair"; } ); // Controls. const controls = document.createElement("div"); controls.style.cssText = ` position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 5px; align-items: center; padding: 5px; border: 1px solid #aaa; border-radius: 4px; background: rgba(255, 255, 255, 0.92); font: 12px sans-serif; `; const zoomToggle = document.createElement("button"); const zoomIn = document.createElement("button"); const zoomOut = document.createElement("button"); const reset = document.createElement("button"); for (const button of [ zoomToggle, zoomIn, zoomOut, reset ]) { button.type = "button"; button.style.cssText = ` min-width: 30px; min-height: 27px; border: 1px solid #999; border-radius: 3px; background: white; cursor: pointer; `; } zoomIn.textContent = "+"; zoomOut.textContent = "−"; reset.textContent = "Reset"; zoomIn.title = "Zoom in"; zoomOut.title = "Zoom out"; reset.title = "Reset map view"; function updateZoomControls() { zoomToggle.textContent = zoomEnabled ? "Zoom: on" : "Select gauges"; zoomToggle.title = zoomEnabled ? "Switch to gauge-selection mode" : "Switch to pan and zoom mode"; zoomToggle.style.background = zoomEnabled ? "#e6f2ff" : "#fff0dc"; availableGaugeLayer.style.display = zoomEnabled ? "none" : ""; zoomIn.disabled = !zoomEnabled; zoomOut.disabled = !zoomEnabled; zoomIn.style.opacity = zoomEnabled ? "1" : "0.45"; zoomOut.style.opacity = zoomEnabled ? "1" : "0.45"; svg.style.cursor = zoomEnabled ? "grab" : "crosshair"; } zoomToggle.addEventListener("click", () => { zoomEnabled = !zoomEnabled; window.__columbiaGaugeSelectMode = !zoomEnabled; updateZoomControls(); }); zoomIn.addEventListener("click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1.5); }); zoomOut.addEventListener("click", () => { if (!zoomEnabled) return; svgSelection .transition() .duration(250) .call(zoom.scaleBy, 1 / 1.5); }); reset.addEventListener("click", () => { svgSelection .transition() .duration(300) .call( zoom.transform, d3.zoomIdentity ); }); controls.append( zoomToggle, zoomIn, zoomOut, reset ); container.append( controls, tooltip, svg ); updateZoomControls(); svgSelection.call( zoom.transform, window.__columbiaDashboardZoom ?? d3.zoomIdentity ); return container; }4d:[{"id":"9a45b67124b2ce87d16eb0dfe0c7b1c6ac8862384af9193a0decc241e29b3988906ffcaa6b388f68520df6b01c461017f1fc77d7fd066151b9543e910e3f9039","href":"https://static.observableusercontent.com/files/9a45b67124b2ce87d16eb0dfe0c7b1c6ac8862384af9193a0decc241e29b3988906ffcaa6b388f68520df6b01c461017f1fc77d7fd066151b9543e910e3f9039","name":"columbia_hydrorivers_display.geojson","type":"application/geo+json","lastModified":1790017904819,"size":2236316},{"id":"1eff54a16dae05cd612d03b8a30b039f6db7c44d123a0e5c50ae3b47933b4354c8d4861b4516fefb6c84e9b7625b5ce06bfb59bfe07b2a5fd8849a83628b0b2e","href":"https://static.observableusercontent.com/files/1eff54a16dae05cd612d03b8a30b039f6db7c44d123a0e5c50ae3b47933b4354c8d4861b4516fefb6c84e9b7625b5ce06bfb59bfe07b2a5fd8849a83628b0b2e","name":"columbia_hydrorivers_full.geojson","type":"application/geo+json","lastModified":1790017655774,"size":12412046},{"id":"d4ee6f7f6cc438f7d394c6843af9bc6a6418f4edea6baf0c8002706e9b8c63550b5329b806f738e1d125f9a5146968879cf117ccb45bda64436acedfbb8d39a2","href":"https://static.observableusercontent.com/files/d4ee6f7f6cc438f7d394c6843af9bc6a6418f4edea6baf0c8002706e9b8c63550b5329b806f738e1d125f9a5146968879cf117ccb45bda64436acedfbb8d39a2","name":"image.png","type":"image/png","lastModified":1790055511557,"size":144183}] 2d:{"id":"c20e7b874e7e78e8","slug":"flow-characteristics-of-colombia-river-watersheds","title":"Flow characteristics of Colombia River Watersheds","thumbnail":"a61a167d78dd2d409a3073ffdc067da3f5ef79ad37d1d07c961091daf1f904dc","access_level":"public","create_time":"$D2026-09-18T17:57:43.275Z","update_time":"$D2026-09-28T06:35:17.064Z","view_time":null,"first_public_time":"$D2026-09-28T06:35:39.731Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a671c05dcf792fdc","login":"stellios-bonadurer","name":"Stellios Bonadurer","avatar_url":"https://avatars-next.observableusercontent.com/afa19a89070b70681752496266e084ba7d02fb86d99e8df269c443c46f5d6a87","tier":"starter_2024"},"version":1559,"publish_version":1559,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e4ec071dd9acf5d","login":"stellios-bonadurer","name":"Stellios Bonadurer","avatar_url":"https://avatars-next.observableusercontent.com/afa19a89070b70681752496266e084ba7d02fb86d99e8df269c443c46f5d6a87","tier":null}],"members":[{"type":"team","id":"a671c05dcf792fdc","login":"stellios-bonadurer","name":"Stellios Bonadurer","avatar_url":"https://avatars-next.observableusercontent.com/afa19a89070b70681752496266e084ba7d02fb86d99e8df269c443c46f5d6a87","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Flow characteristics of Colombia River Watersheds","cells":[{"id":1,"value":"# Flow characteristics of Colombia River Watersheds","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"usgsFetch = async (url, options = {}) => {\n const requestUrl = new URL(url);\n\n const headers = new Headers(\n options.headers ?? {}\n );\n\n /*\n * Only transmit the key to the Water Data API.\n * It is not sent to NLDI or any other domain.\n */\n if (\n usgsApiKey &&\n requestUrl.hostname ===\n \"api.waterdata.usgs.gov\"\n ) {\n headers.set(\n \"X-Api-Key\",\n usgsApiKey\n );\n }\n\n return fetch(requestUrl.href, {\n ...options,\n headers\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"### Search for a Gauge to add:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"//Search bar\nviewof finalGaugeSearch = Inputs.search(\n finalFlowOnly\n ? finalGaugeRows.filter(gauge =>\n gauge.hasFlowData\n )\n : finalGaugeRows,\n {\n label: \"Find a gauge to add\",\n placeholder:\n \"Search gauge name, USGS ID, or river segment…\",\n columns: [\n \"name\",\n \"id\",\n \"comid\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof finalFlowOnly = Inputs.toggle({\n label: \"Show only gauges with flow data\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof finalGaugePicker = {\n const visible = finalGaugeSearch.slice(0, 100);\n\n const table = Inputs.table(visible, {\n columns: [\n \"name\",\n \"id\",\n \"comid\",\n \"latitude\",\n \"longitude\"\n ],\n header: {\n name: \"Gauge\",\n id: \"USGS ID\",\n comid: \"River segment\",\n latitude: \"Latitude\",\n longitude: \"Longitude\"\n },\n multiple: true,\n value: visible.filter(gauge =>\n finalSelectedGaugeIds.has(gauge.id)\n )\n });\n\n table.addEventListener(\"input\", () => {\n const updated = new Set(finalSelectedGaugeIds);\n\n // Change only gauges currently shown in this table.\n for (const gauge of visible) {\n updated.delete(gauge.id);\n }\n\n for (const gauge of table.value) {\n updated.add(gauge.id);\n }\n\n mutable finalSelectedGaugeIds = updated;\n });\n\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"### Preset Selection:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"viewof selectedGaugePreset = Inputs.select(\n Object.keys(gaugePresets),\n {\n label: \"Gauge preset\",\n value: \"regionalComparison\",\n format: key => gaugePresets[key].label\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof applyGaugePreset = Inputs.button(\"Apply gauge preset\", {\n reduce: () => {\n mutable finalSelectedGaugeIds = new Set(\n gaugePresets[selectedGaugePreset].ids\n );\n\n return Date.now();\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"### Currently Selected Gauges:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof finalShadeMetric = Inputs.select(\n new Map([\n [\"Relative annual flow delta (%)\", \"relativeAnnualDeltaPct\"],\n [\"Flashiness (RBI)\", \"flashiness\"],\n [\"Mean flow (ft³/s)\", \"meanFlowCfs\"],\n [\"Average annual flow delta (ft³/s)\", \"averageAnnualDeltaCfs\"],\n [\"Average annual peak flow (ft³/s)\", \"averageAnnualPeakCfs\"],\n [\"Average annual minimum flow (ft³/s)\", \"averageAnnualMinimumCfs\"],\n [\"Mean discharge per area (ft³/s/km²)\", \"meanDischargePerArea\"]\n ]),\n {\n label: \"Shade watersheds by\",\n value: \"relativeAnnualDeltaPct\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"## Observations\n\nWe do see some patterns related to size and flashiness, but we observe a wide variety of flashiness values among smaller watersheds. This makes sense for small tributaries in flatter areas, or that don't experience significant seasonal variability. A similar statement to our hypothesis that appears to be true would be: **Smaller watersheds are able to reach higher levels of flashiness than larger ones.**\n\nAn addition to this analysis that would be significant would be to look at average elevation or steepness of a watershed, as I imagine flashiness is more prevalent in mountainous areas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"FileAttachment(\"image.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"## Metrics: Short Summary\n\n- **Flashiness** measures how rapidly flow changes from day to day.\n- **Mean flow** measures typical total discharge.\n- **Annual delta** measures the typical absolute range between high and low flow.\n- **Relative annual delta** measures that range relative to normal flow.\n- **Peak flow** describes typical annual high-flow conditions.\n- **Minimum flow** describes typical annual low-flow conditions.\n- **Discharge per area** compares flow production after accounting for watershed size.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"## Helper Functions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"//Begin by fetching the master Watershed\nmasterWatershed = fetch(\n `https://api.water.usgs.gov/nldi/linked-data/nwissite/${masterGaugeId}/basin?f=json`\n).then(async response => {\n if (!response.ok) {\n throw new Error(`Master watershed request failed: ${response.status}`);\n }\n\n const data = await response.json();\n\n if (!data.features?.length) {\n throw new Error(`No watershed found for ${masterGaugeId}`);\n }\n\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"//cache for flow data\nfinalFlowCache = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"//cache for watershed polygons\nfinalBasinCache = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"\nfinalGaugeRows = upstreamGaugeRows.map(gauge => ({\n ...gauge,\n\n hasFlowData:\n finalFlowSiteIds.has(gauge.id),\n\n flowDataLabel:\n finalFlowSiteIds.has(gauge.id)\n ? \"Yes\"\n : \"No\"\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"finalMetricRequest = {\n const endYear = new Date().getUTCFullYear() - 1;\n\n const selected = upstreamGaugeRows\n .filter(gauge => finalSelectedGaugeIds.has(gauge.id))\n .map(gauge => ({\n id: gauge.id,\n name: gauge.name,\n type: \"Selected\"\n }));\n\n return {\n startYear: endYear - 9,\n endYear,\n gauges: [\n {\n id: masterGaugeId,\n name:\n masterGaugeFeature.properties.name ??\n masterGaugeId,\n type: \"Master\"\n },\n ...selected\n ]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"//Create\nmutable finalSelectedGaugeIds = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"finalFlowFailures = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"finalBasinFailures = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"# END OF CORE DOCUMENT\n\nBelow begins with my viability assessment for this concept as a whole, then some in progress iterations. Because I use functions for things like the color scheme, it is hard to show those plots as they were developed. Comments indicate design choices, issues experienced, etc...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Viability Assessment\n\nFirst we will load a waterhsed ploygon and plot it to veritfy the data looks manageable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"columbiaWatershed = fetch(\n \"https://api.water.usgs.gov/nldi/linked-data/nwissite/USGS-14105700/basin?f=json\"\n).then(response => {\n if (!response.ok) throw new Error(`NLDI request failed: ${response.status}`);\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"Plot.plot({\n width,\n height: 600,\n projection: {\n type: \"conic-conformal\",\n domain: columbiaWatershed\n },\n marks: [\n Plot.geo(columbiaWatershed, {\n fill: \"#6baed6\",\n fillOpacity: 0.7,\n stroke: \"#1f4e79\",\n strokeWidth: 1.5\n }),\n Plot.frame()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Looks good, but is static so we add a selector:\n( I do want to remark on how absurdly simple it was to load the polygon and plot it natively.)\n\nNote: Initially this was conical-conformal: The Lambert conformal conic (LCC) projection is a map projection that projects the 3D surface of the Earth onto an imaginary cone. We switch between this and mercator.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof selectedGauge = Inputs.select(\n new Map([\n [\"Columbia River at The Dalles, OR\", \"USGS-14105700\"],\n [\"Clark Fork near Plains, MT\", \"USGS-12389000\"],\n [\"Flathead River at Columbia Falls, MT\", \"USGS-12355500\"]\n ]),\n {\n label: \"Select a watershed\",\n value: \"USGS-14105700\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"currentWatershed = fetch(\n `https://api.water.usgs.gov/nldi/linked-data/nwissite/${selectedGauge}/basin?f=json`\n).then(response => {\n if (!response.ok) {\n throw new Error(`NLDI request failed: ${response.status}`);\n }\n\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof searchedGauges = Inputs.search(upstreamGaugeRows, {\n label: \"Search upstream gauges\",\n placeholder: \"Search by gauge name, USGS ID, or river segment…\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Plot.plot({\n width,\n height: 600,\n projection: {\n type: \"conic-conformal\",\n domain: currentWatershed\n },\n marks: [\n Plot.geo(currentWatershed, {\n fill: \"#6baed6\",\n fillOpacity: 0.7,\n stroke: \"#1f4e79\",\n strokeWidth: 1.5\n }),\n Plot.frame()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"### Thoughts:\n\nSelector works and polygons appear reasonable, but lack context. We will add state boundaries:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof masterGaugeId = Inputs.select(\n new Map([\n [\"Columbia River at The Dalles, OR\", \"USGS-14105700\"],\n [\"Columbia River below Bonneville Dam, OR\", \"USGS-14128870\"],\n [\"Columbia River at Port Westward, OR\", \"USGS-14246900\"]\n ]),\n {\n label: \"Master watershed gauge\",\n value: \"USGS-14105700\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Load state boundaries, this returns a list of polygons\nusStates = fetch(\n \"https://cdn.jsdelivr.net/gh/PublicaMundi/MappingAPI@master/data/geojson/us-states.json\"\n).then(response => {\n if (!response.ok) {\n throw new Error(`State boundary request failed: ${response.status}`);\n }\n\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"canadianProvinces = fetch(\n \"https://raw.githubusercontent.com/codeforgermany/click_that_hood/main/public/data/canada.geojson\"\n).then(async response => {\n if (!response.ok) {\n throw new Error(`Canadian province request failed: ${response.status}`);\n }\n\n const data = await response.json();\n\n return {\n type: \"FeatureCollection\",\n features: data.features.filter(feature =>\n [\"British Columbia\", \"Alberta\"].includes(\n feature.properties.name\n )\n )\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"continentalDivide = fetch(\n \"https://services1.arcgis.com/KNdRU5cN6ENqCTjk/ArcGIS/rest/services/Continental_Divide/FeatureServer/0/query\" +\n \"?where=1%3D1\" +\n \"&outFields=*\" +\n \"&returnGeometry=true\" +\n \"&outSR=4326\" +\n \"&f=geojson\"\n).then(response => {\n if (!response.ok) {\n throw new Error(`Continental Divide request failed: ${response.status}`);\n }\n\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Plot.plot({\n width,\n height: 650,\n projection: {\n //type: \"conic-conformal\",\n type: \"mercator\",\n domain: {\n type: \"Polygon\",\n coordinates: [[\n [-125, 40],\n [-125, 53],\n [-104, 53],\n [-104, 40],\n [-125, 40]\n ]]\n}\n },\n marks: [\n Plot.geo(\n {\n type: \"FeatureCollection\",\n features: usStates.features.filter(d =>\n [\n \"Washington\",\n \"Oregon\",\n \"Idaho\",\n \"Montana\",\n \"Wyoming\",\n \"Nevada\",\n \"Utah\"\n ].includes(d.properties.name)\n )\n },\n {\n fill: \"#f2f2f2\",\n stroke: \"#999\",\n strokeWidth: 0.8\n }\n ),\n\n Plot.geo(columbiaWatershed, {\n fill: \"#6baed6\",\n fillOpacity: 0.7,\n stroke: \"#1f4e79\",\n strokeWidth: 1.5\n }),\n\n Plot.frame({stroke: \"#aaa\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"### Thoughts\nLooks good, this is the familiar Colombia river basin. The lack of close detail, easily seen in the San Juan Islands, is a limitation of the dataset. Because the purpose of the state boundaries is just to add context, we will stick with it.\n\n\nAt this point we will clarify how gauges and watersheds will be related:\n1. **Gauge point:** A USGS site has a unique ID and coordinates.\n2. **NLDI snapping:** NLDI connects that gauge to the corresponding river segment.\n3. **Contributing basin:** The NLDI `/basin` request returns all land draining through that gauge location.\n4. **Gauge as outlet:** The gauge should appear on the downstream edge of its watershed—not at its center.\n5. **Gauge metrics:** Discharge and RBI calculated for that gauge describe flow from its entire upstream watershed.\n\nWe will now plot the 'master' (most downstream) gauge, as well as add the ability to select a gauge and plot it's respective watershed.\n\nThere are also several candidates for the master gauge:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"//After we select a master gauge, we load all upstream gauges\nmasterUpstreamGaugeData = fetch(\n `https://api.water.usgs.gov/nldi/linked-data/nwissite/${masterGaugeId}/navigation/UT/nwissite?distance=2500&f=json`\n).then(response => {\n if (!response.ok) {\n throw new Error(`Upstream gauge request failed: ${response.status}`);\n }\n\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### Gauge selection\n\nIn order to select a gauge we load all upstream gauges.\n\n*Note: This underwent many revisions, but were all in place.*\n\nReference data structs:\n\n* masterWatershed = master polygon\n* masterGaugeFeature = master point\n* selectedGauges = selected points and metadata\n* selectedGaugeWatersheds = selected polygons, with point coordinates copied into their properties","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mutable selectedGaugeIds = new Set()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof visibleGaugeSelection = {\n const visibleIds = new Set(searchedGauges.map(gauge => gauge.id));\n\n const table = Inputs.table(searchedGauges, {\n columns: [\"id\", \"name\", \"comid\", \"latitude\", \"longitude\"],\n header: {\n id: \"USGS ID\",\n name: \"Gauge\",\n comid: \"River segment\",\n latitude: \"Latitude\",\n longitude: \"Longitude\"\n },\n value: searchedGauges.filter(gauge =>\n selectedGaugeIds.has(gauge.id)\n ),\n required: false,\n multiple: true,\n rows: 15\n });\n\n table.addEventListener(\"input\", () => {\n const nextIds = new Set(selectedGaugeIds);\n\n // Update only gauges currently visible in the search results.\n for (const id of visibleIds) nextIds.delete(id);\n for (const gauge of table.value) nextIds.add(gauge.id);\n\n mutable selectedGaugeIds = nextIds;\n });\n\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// Filter for gauges we have selected\nselectedGauges = upstreamGaugeRows.filter(gauge =>\n selectedGaugeIds.has(gauge.id)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"//show selected gauges in a persistent table\n//made this interactive to enable deletion\nselectedGaugeTable = {\n const table = Inputs.table(selectedGauges, {\n columns: [\"id\", \"name\", \"comid\", \"latitude\", \"longitude\"],\n header: {\n id: \"USGS ID\",\n name: \"Selected gauge — uncheck to remove\",\n comid: \"River segment\",\n latitude: \"Latitude\",\n longitude: \"Longitude\"\n },\n value: selectedGauges,\n required: false,\n multiple: true,\n rows: 10\n });\n\n table.addEventListener(\"input\", () => {\n const retainedIds = new Set(table.value.map(gauge => gauge.id));\n const nextIds = new Set(selectedGaugeIds);\n\n for (const gauge of selectedGauges) {\n if (!retainedIds.has(gauge.id)) {\n nextIds.delete(gauge.id);\n }\n }\n\n mutable selectedGaugeIds = nextIds;\n });\n\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"//This populates a table with all upstream gauges of a particular gauge (master)\nupstreamGaugeRows = masterUpstreamGaugeData.features\n .map(feature => ({\n id:\n feature.properties.identifier ??\n feature.properties.id ??\n feature.id,\n name:\n feature.properties.name ??\n feature.properties.sourceName ??\n \"Unnamed gauge\",\n comid: feature.properties.comid ?? null,\n longitude: feature.geometry.coordinates[0],\n latitude: feature.geometry.coordinates[1]\n }))\n .filter(gauge => gauge.id && gauge.id !== masterGaugeId)\n .sort((a, b) => a.name.localeCompare(b.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### Next Steps\n\nNow that we are able to select gauges, let's experiment with plotting them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"//Fetch associated gauge\nmasterGaugeFeature = fetch(\n `https://api.water.usgs.gov/nldi/linked-data/nwissite/${masterGaugeId}?f=json`\n).then(async response => {\n if (!response.ok) {\n throw new Error(`Master gauge request failed: ${response.status}`);\n }\n\n const data = await response.json();\n\n if (!data.features?.length) {\n throw new Error(`No location found for ${masterGaugeId}`);\n }\n\n return data.features[0];\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"//load selected watersheds\nselectedGaugeWatersheds = {\n const results = await Promise.all(\n selectedGauges.map(async gauge => {\n const response = await fetch(\n `https://api.water.usgs.gov/nldi/linked-data/nwissite/${gauge.id}/basin?f=json`\n );\n\n if (!response.ok) {\n throw new Error(\n `Watershed request failed for ${gauge.id}: ${response.status}`\n );\n }\n\n return {\n gauge,\n basin: await response.json()\n };\n })\n );\n\n return {\n type: \"FeatureCollection\",\n features: results.flatMap(({gauge, basin}) =>\n basin.features.map(feature => ({\n ...feature,\n properties: {\n ...feature.properties,\n gaugeId: gauge.id,\n gaugeName: gauge.name,\n longitude: gauge.longitude,\n latitude: gauge.latitude\n }\n }))\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"selectedWatershedColorScale = {\n const palette = [\n \"#4e79a7\",\n \"#f2b701\",\n \"#e15759\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#edc949\",\n \"#af7aa1\",\n \"#ff9da7\",\n \"#9c755f\",\n \"#bab0ab\"\n ];\n\n const domain = selectedGauges.map(gauge => gauge.name);\n const range = domain.map((_, index) =>\n palette[index % palette.length]\n );\n\n return {\n domain,\n range,\n colorByName: new Map(\n domain.map((name, index) => [name, range[index]])\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"legendGaugeRows = orderedSelectedWatersheds.features.map(\n (feature, index) => {\n const properties = feature.properties;\n\n return {\n id: properties.gaugeId,\n name: properties.gaugeName,\n longitude: properties.longitude,\n latitude: properties.latitude,\n hierarchy: index + 1,\n color: selectedWatershedColorScale.colorByName.get(\n properties.gaugeName\n )\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$45","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"### Thoughts\n\nWe have a map that shows watersheds, with selectable sub-watersheds with plotting. I notice that the map has significant whitespace in areas that do drain to the Colombia river, notably eastern Idaho. Cursory research indicates this is because the relevant waterways are not surface level - will investigate more. I want to add some context in the form of the continental divide and perhaps rivers.(Done and updated the prior plot.)\n\nThere are some issues with the formatting, including how the legend and selected gauges are presented. Before further refining the graphic, I would like to consolidate the data we will be using.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"### Iteration\n\nNow that we have the metrics we will use for the visualization. Because there are several plots in the development we need to make the gaugeSelector a factory so we can repeat it.\n\nbad idea keeping it generic.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"Generic watershed area calculator:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"## Iteration\n\nAfter much non-linear work, we now can filter for gauges that we have flow data for (to ensure a visualizable data point), we load data deliberately to avoid being rate-limited, and we have a color scale indicating what data is what. We have a table that shows actual values so that we can cross-reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"First we add zoom-ability, once zoomed in the region boundaries become too high stroke and we lose context. Add rivers for context and fix scaling for features.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"We also want to load rivers for context:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"### Iteration\n\nThe river data I have lacks some rivers I was hoping to plot/have gauge data for, so shifting towards a new source:\n\n### River network data\n\nRiver-network data were sourced from **HydroRIVERS**, a global vector river network derived from the HydroSHEDS hydrographic database. The North and Central America shapefile was downloaded and clipped locally to the contributing watershed of the Columbia River gauge at The Dalles. The full clipped dataset contains 34,277 river reaches and preserves stream order, estimated average discharge, upstream drainage area, reach length, and network identifiers. To improve browser performance and reduce visual clutter, the dashboard dataset retains reaches with a Strahler stream order of at least 4 or an estimated average discharge of at least 5 m³/s. The resulting 2.1 MB GeoJSON contains 6,327 river reaches and is uploaded directly to Observable for display.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"\ncolumbiaRivers = FileAttachment(\n //\"columbia_hydrorivers_display.geojson\"\n \"columbia_hydrorivers_full.geojson\"\n).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"### Iteration\n\nI like having all the rivers, it does run a little slower. Considering adding an LoD functionality for the rivers.\n\nI want to add the ability to select a spot on the map, and enable/disable the closest gauge. Had to add listeners for the event click, as well as tool tip for the highlighted gauge.\n\nAlso ran into color issues, will tune more later but blue for rivers and shading data doesn't work for obvious reasons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"### Iteration\n\nThis is the functionality I want in the final product. I now will tune colors and UX, however because we use one generic color function for our plots (didn't want to duplicate so many times.) It is hard to show that iteration with plots.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### Iteration\n\nSome issues I am experiencing: The color of a watershed with no data is within the range of the ones with data, making them hard to distinguish. Also when I load a new gauge it unloads all the others. Fixing these issues will make the display more ergonomic.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"Issue: Many gauges don't have enough data, but are still interesting enough to plot watersheds of. Also since we compute flow data on our end, we'd have to pull gauge data from all sources before filtering : (\"image.png\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2","titling":"auto"}} 2e:"$2d:body"