2c:null 2d:["$","title",null,{"children":"HSI Vis | Nurit Kirshenbaum's Workspace | Observable"}] 32:T5e2,function makeRegionPicker(items, rgb) { const W = rgb.naturalWidth, H = rgb.naturalHeight; const dw = 700, dh = dw * H / W; const s = dw / W; const minHit = 6; // make single pixels big enough to click const container = html`

`; container.value = null; const svg = d3.select(container).append("svg") .attr("width", dw).attr("height", dh) .style("position", "absolute").style("top", 0).style("left", 0); const rects = svg.selectAll("rect").data(items).join("rect") .each(function (d) { let w = (d.height ?? 1) * s, h = (d.width ?? 1) * s; let x = d.y * s, y = (H - d.x - (d.width ?? 1)) * s; if (w < minHit) { x -= (minHit - w) / 2; w = minHit; } if (h < minHit) { y -= (minHit - h) / 2; h = minHit; } d3.select(this).attr("x", x).attr("y", y).attr("width", w).attr("height", h); }) .attr("fill", "transparent") .attr("stroke", "white").attr("stroke-width", 0.5) .style("cursor", "pointer") .on("click", (event, d) => { rects.attr("stroke", "white").attr("stroke-width", 0.5); d3.select(event.currentTarget).raise().attr("stroke", "red").attr("stroke-width", 2); container.value = d; container.dispatchEvent(new Event("input", { bubbles: true })); }); return container; } const selectedRegion = view(makeRegionPicker(items, rgb));33:T737,// tinting to the approximate visible colour of the selected band function wavelengthToRGB(wl) { let r = 0, g = 0, b = 0; if (wl < 440) { r = (440 - wl) / 60; b = 1; } else if (wl < 490) { g = (wl - 440) / 50; b = 1; } else if (wl < 510) { g = 1; b = (510 - wl) / 20; } else if (wl < 580) { r = (wl - 510) / 70; g = 1; } else if (wl < 645) { r = 1; g = (645 - wl) / 65; } else { r = 1; } // dim the ends of the visible range, where the eye is less sensitive const f = wl < 420 ? 0.3 + 0.7 * (wl - 400) / 20 : wl > 680 ? 0.3 + 0.7 * (700 - wl) / 20 : 1; return d3.rgb(255 * r * f, 255 * g * f, 255 * b * f); } const bandLUT = (() => { if (colorMap === "Grayscale") return d3.range(256).map(i => d3.rgb(i, i, i)); if (colorMap === "Wavelength tint") { const c = wavelengthToRGB(wavelength); return d3.range(256).map(i => d3.rgb(c.r * i / 255, c.g * i / 255, c.b * i / 255)); } const interp = { Magma: d3.interpolateMagma, Inferno: d3.interpolateInferno, Cividis: d3.interpolateCividis, Viridis: d3.interpolateViridis }[colorMap]; return d3.range(256).map(i => d3.rgb(interp(i / 255))); })(); function drawBand(wl) { const { width: bw, height: bh } = bandMeta; const index = (wl - 400) / 10; const offset = index * bw * bh; const canvas = document.createElement("canvas"); canvas.width = bw; canvas.height = bh; canvas.style.width = "700px"; canvas.style.height = `${700 * bh / bw}px`; const ctx = canvas.getContext("2d"); const img = ctx.createImageData(bw, bh); for (let i = 0; i < bw * bh; i++) { const c = bandLUT[bandData[offset + i]]; img.data[4 * i] = c.r; img.data[4 * i + 1] = c.g; img.data[4 * i + 2] = c.b; img.data[4 * i + 3] = 255; } ctx.putImageData(img, 0, 0); return canvas; } display(drawBand(wavelength));34:T1ace,function makeCubeView({ width = 700, height = 500 } = {}) { const { width: bw, height: bh, bands } = bandMeta; const s = 10 / bw; // world units per pixel (cube is 10 units wide) const W = bw * s, D = bh * s; const t = 0.4 * W / bands; // thickness of one band const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf4f4f4); const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 100); camera.position.set(9, 9, 13); const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, bands * t / 2, 0); controls.update(); // grey outline of the full, uncropped cube const outline = new THREE.LineSegments( new THREE.EdgesGeometry(new THREE.BoxGeometry(W, bands * t, D)), new THREE.LineBasicMaterial({ color: 0x888888 }) ); outline.position.y = bands * t / 2; scene.add(outline); function makeLabel(text, { color = "#333", align = "right" } = {}) { const cv = document.createElement("canvas"); cv.width = 128; cv.height = 48; const ctx = cv.getContext("2d"); ctx.font = "bold 26px sans-serif"; ctx.fillStyle = color; ctx.textAlign = align; ctx.textBaseline = "middle"; ctx.fillText(text, align === "right" ? 124 : 4, 24); const tex = new THREE.CanvasTexture(cv); tex.colorSpace = THREE.SRGBColorSpace; const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: tex })); sprite.scale.set(1.6, 0.6, 1); return sprite; } // wavelength axis on the front-left vertical edge const ax = -W / 2, az = D / 2; const tickPts = []; bandMeta.wavelengths.forEach((wl, b) => { const y = (b + 1) * t; // same height convention as the top face const major = Math.round(wl) % 50 === 0; const len = major ? 0.3 : 0.15; tickPts.push(new THREE.Vector3(ax, y, az), new THREE.Vector3(ax - len, y, az)); if (major) { const label = makeLabel(`${Math.round(wl)} nm`); label.position.set(ax - 0.4 - 0.8, y, az); // right edge of the label just past the tick scene.add(label); } }); scene.add(new THREE.LineSegments( new THREE.BufferGeometry().setFromPoints(tickPts), new THREE.LineBasicMaterial({ color: 0x333333 }) )); // red label that follows the current wavelength let currentLabel = null; const faces = new THREE.Group(); scene.add(faces); // red outline marking the current wavelength const ring = new THREE.LineLoop( new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(-W / 2, 0, -D / 2), new THREE.Vector3(W / 2, 0, -D / 2), new THREE.Vector3(W / 2, 0, D / 2), new THREE.Vector3(-W / 2, 0, D / 2) ]), new THREE.LineBasicMaterial({ color: 0xff0000 }) ); scene.add(ring); // group holding the selected region's spectrum const marker = new THREE.Group(); scene.add(marker); function setSelection(region, k) { marker.children.forEach(o => { o.geometry.dispose(); o.material.dispose(); }); marker.clear(); if (!region) return; // region coordinates → band-grid position (same swap + flip as the 2D overlay) const st = bandMeta.step, origRows = bh * st; const col = (region.y + (region.height ?? 1) / 2) / st; const row = (origRows - region.x - (region.width ?? 1) / 2) / st; const px = col * s - W / 2, pz = row * s - D / 2; const [lo, hi] = bandMeta.scale, amp = 2; // amp = how far the curve extends sideways const norm = v => Math.max(0, Math.min(1, (v - lo) / (hi - lo))); const onTop = m => { m.depthTest = false; return m; }; // stay visible through the faces const pts = region.spectrum.map((v, b) => new THREE.Vector3(px + amp * norm(v), (b + 1) * t, pz)); const pole = new THREE.Line( new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(px, 0, pz), new THREE.Vector3(px, bands * t, pz)]), onTop(new THREE.LineBasicMaterial({ color: 0x333333 })) ); const curve = new THREE.Line( new THREE.BufferGeometry().setFromPoints(pts), onTop(new THREE.LineBasicMaterial({ color: 0xff0000 })) ); const dot = new THREE.Mesh(new THREE.SphereGeometry(0.12), onTop(new THREE.MeshBasicMaterial({ color: 0xff0000 }))); dot.position.copy(pts[k]); [pole, curve, dot].forEach(o => (o.renderOrder = 10)); marker.add(pole, curve, dot); } const value = (b, r, c) => bandData[b * bw * bh + r * bw + c]; function makeTexture(w, h, fill, lut) { const cv = document.createElement("canvas"); cv.width = w; cv.height = h; const ctx = cv.getContext("2d"); const img = ctx.createImageData(w, h); for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) { const c = lut[fill(i, j)], p = 4 * (j * w + i); img.data[p] = c.r; img.data[p + 1] = c.g; img.data[p + 2] = c.b; img.data[p + 3] = 255; } ctx.putImageData(img, 0, 0); const tex = new THREE.CanvasTexture(cv); tex.magFilter = THREE.NearestFilter; tex.colorSpace = THREE.SRGBColorSpace; return tex; } const makeFace = (w, h, tex) => new THREE.Mesh( new THREE.PlaneGeometry(w, h), new THREE.MeshBasicMaterial({ map: tex, side: THREE.DoubleSide }) ); function update(k, rows, cols, lut) { // k = top band index; rows, cols = how much of the image to keep faces.children.forEach(m => { m.geometry.dispose(); m.material.map.dispose(); m.material.dispose(); }); faces.clear(); const n = k + 1, Hk = n * t; const cx = cols * s / 2 - W / 2, cz = rows * s / 2 - D / 2; // top: band k const top = makeFace(cols * s, rows * s, makeTexture(cols, rows, (i, j) => value(k, j, i), lut)); top.rotation.x = -Math.PI / 2; top.position.set(cx, Hk, cz); // front: last kept row, all bands (band k at the top) const front = makeFace(cols * s, Hk, makeTexture(cols, n, (i, j) => value(k - j, rows - 1, i), lut)); front.position.set(cx, Hk / 2, rows * s - D / 2); // side: last kept column, all bands const side = makeFace(rows * s, Hk, makeTexture(rows, n, (i, j) => value(k - j, rows - 1 - i, cols - 1), lut)); side.rotation.y = Math.PI / 2; side.position.set(cols * s - W / 2, Hk / 2, cz); faces.add(top, front, side); ring.position.y = Hk; if (currentLabel) { currentLabel.material.map.dispose(); currentLabel.material.dispose(); scene.remove(currentLabel); } currentLabel = makeLabel(`${Math.round(bandMeta.wavelengths[k])} nm`, { color: "#d00", align: "left" }); currentLabel.position.set(W / 2 + 0.4 + 0.8, Hk, D / 2); scene.add(currentLabel); } let frame; (function animate() { frame = requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); })(); return { element: renderer.domElement, update, setSelection, dispose() { cancelAnimationFrame(frame); controls.dispose(); renderer.dispose(); } }; }35:T621,function withMarker(canvas, region) { const W = rgb.naturalWidth, H = rgb.naturalHeight; // same frame as the RGB picker const dw = 700, dh = dw * H / W, s = dw / W; Object.assign(canvas.style, { position: "absolute", top: 0, left: 0, width: `${dw}px`, height: `${dh}px` }); const wrap = html`

${canvas}

`; if (!region) return wrap; // same coordinate swap + flip as the picker let w = (region.height ?? 1) * s, h = (region.width ?? 1) * s; let x = region.y * s, y = (H - region.x - (region.width ?? 1)) * s; if (w < 6) { x -= (6 - w) / 2; w = 6; } if (h < 6) { y -= (6 - h) / 2; h = 6; } const cx = x + w / 2, cy = y + h / 2; const svg = d3.select(wrap).append("svg") .attr("width", dw).attr("height", dh) .style("position", "absolute").style("top", 0).style("left", 0) .style("pointer-events", "none"); // faint crosshair so small regions are easy to find svg.append("path") .attr("d", `M0,${cy}H${dw}M${cx},0V${dh}`) .attr("stroke", "white").attr("stroke-opacity", 0.5).attr("stroke-dasharray", "4,4"); // white halo + red box, visible on both dark and bright areas svg.append("rect").attr("x", x).attr("y", y).attr("width", w).attr("height", h) .attr("fill", "none").attr("stroke", "white").attr("stroke-width", 4); svg.append("rect").attr("x", x).attr("y", y).attr("width", w).attr("height", h) .attr("fill", "none").attr("stroke", "red").attr("stroke-width", 2); return wrap; } display(withMarker(pcaCanvas, selectedRegion));36:T50a,function drawPCA(name) { const { set, mode, pcs } = pcaComposites[name]; const { meta, data } = pcaSets[set]; const { width: w, height: h, score_ranges } = meta; const n = w * h; const offsets = pcs.map(p => p * n); // 8-bit value where each score equals 0 (the stretch is not centred) const zero = score_ranges.map(([lo, hi]) => 255 * (0 - lo) / (hi - lo)); const canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; canvas.style.width = "700px"; canvas.style.height = `${700 * h / w}px`; const ctx = canvas.getContext("2d"); const img = ctx.createImageData(w, h); for (let i = 0; i < n; i++) { const v0 = data[offsets[0] + i], v1 = data[offsets[1] + i], v2 = data[offsets[2] + i]; let r, g, b; if (mode === "rgb") { [r, g, b] = [v0, v1, v2]; } else { const c = d3.rgb(d3.lab( 10 + 80 * v0 / 255, // lightness from the first component 0.5 * (v1 - zero[pcs[1]]), // green–red axis 0.5 * (v2 - zero[pcs[2]]) // blue–yellow axis )); [r, g, b] = [c.r, c.g, c.b]; } img.data[4 * i] = r; img.data[4 * i + 1] = g; img.data[4 * i + 2] = b; img.data[4 * i + 3] = 255; } ctx.putImageData(img, 0, 0); return canvas; }37:T7cf,// Shared frame = the oriented RGB image. A "field" is a grid of values in [0, 1] covering it. const imgFrame = { width: rgb.naturalWidth, height: rgb.naturalHeight }; function makeField(width, height, values, label) { return { width, height, values, label }; } const flatField = makeField(1, 1, new Float32Array([0]), "Flat"); function fieldFromU8(data, offset, width, height, label) { const values = new Float32Array(width * height); for (let i = 0; i < values.length; i++) values[i] = data[offset + i] / 255; return makeField(width, height, values, label); } // map any array of numbers to [0, 1] using percentiles (robust to outliers) function stretch(values, pLo = 0.02, pHi = 0.98) { const a = d3.quantile(values, pLo), b = d3.quantile(values, pHi); const out = new Float32Array(values.length); for (let i = 0; i < values.length; i++) out[i] = Math.max(0, Math.min(1, (values[i] - a) / (b - a || 1))); return out; } // 8-bit band value -> original radiance units const toRaw = u8 => bandMeta.scale[0] + (u8 / 255) * (bandMeta.scale[1] - bandMeta.scale[0]); // region from the JSON files -> normalised rectangle in the frame (same swap + flip as the picker) function regionToFrame(region) { const W = imgFrame.width, H = imgFrame.height; const w = region.height ?? 1, h = region.width ?? 1; const x0 = region.y, y0 = H - region.x - h; return { u0: x0 / W, u1: (x0 + w) / W, v0: y0 / H, v1: (y0 + h) / H }; } // draw any field as an image (to project it, or for debugging) function fieldToCanvas(f, lut) { const cv = document.createElement("canvas"); cv.width = f.width; cv.height = f.height; const ctx = cv.getContext("2d"); const img = ctx.createImageData(f.width, f.height); for (let i = 0; i < f.values.length; i++) { const c = lut[Math.max(0, Math.min(255, Math.round(f.values[i] * 255)))]; img.data[4 * i] = c.r; img.data[4 * i + 1] = c.g; img.data[4 * i + 2] = c.b; img.data[4 * i + 3] = 255; } ctx.putImageData(img, 0, 0); return cv; }38:T811,const heightSources = { "Flat": () => flatField, "Brightness (mean of all bands)": () => { const { width: w, height: h, bands } = bandMeta, n = w * h; const v = new Float32Array(n); for (let b = 0; b < bands; b++) for (let i = 0; i < n; i++) v[i] += bandData[b * n + i]; for (let i = 0; i < n; i++) v[i] /= 255 * bands; return makeField(w, h, v, "Mean brightness"); }, "Band at selected wavelength": ({ wavelength }) => { const { width: w, height: h } = bandMeta; return fieldFromU8(bandData, ((wavelength - 400) / 10) * w * h, w, h, `Radiance at ${wavelength} nm`); }, "Green–red index (550 vs 650 nm)": () => { const { width: w, height: h } = bandMeta, n = w * h; const v = new Float32Array(n); for (let i = 0; i < n; i++) { const g = toRaw(bandData[15 * n + i]), r = toRaw(bandData[25 * n + i]); v[i] = (g - r) / (g + r || 1); } return makeField(w, h, stretch(v), "Green–red index"); }, "Similarity to selected region": ({ selectedRegion }) => { if (!selectedRegion) return flatField; const { width: w, height: h, bands } = bandMeta, n = w * h; const ref = selectedRegion.spectrum, refNorm = Math.hypot(...ref); const angle = new Float32Array(n); for (let i = 0; i < n; i++) { let dot = 0, nn = 0; for (let b = 0; b < bands; b++) { const x = toRaw(bandData[b * n + i]); dot += x * ref[b]; nn += x * x; } angle[i] = nn > 0 ? Math.acos(Math.min(1, dot / (Math.sqrt(nn) * refNorm))) : Math.PI / 2; } const s = stretch(angle); for (let i = 0; i < n; i++) s[i] = 1 - s[i]; // small spectral angle = similar = tall return makeField(w, h, s, "Spectral similarity to selected region"); }, // one entry per principal component in the loaded PCA file ...Object.fromEntries(Object.values(pcaSets).flatMap(({ meta, data, label }) => d3.range(meta.components).map(i => [ `PC${i + 1} (${label})`, () => fieldFromU8(data, i * meta.width * meta.height, meta.width, meta.height, `PC${i + 1} score (${label})`) ]) )) };39:T497, A preview of a physical shape display: an array of pins that move up and down, with an image projected onto them from above. It shows two kinds of information at once: the **projection** shows what the scene looks like, and the **pin heights** show a second property, such as brightness at a wavelength or similarity to the selected region. Drag to rotate, scroll to zoom. ### Projected image What the projector shows on top of the pins. Use the RGB image for context, or project the same data as the heights to compare the two encodings. ### Pin height Which value drives the pins. Try **Similarity to selected region** after clicking a region: pins rise where the material matches, regardless of lighting. **Band at selected wavelength** follows the wavelength slider, so sweeping it makes the surface rise and fall. ### Display settings Real shape displays have limited resolution and a few height steps. Fewer **pins** and fewer **height levels** show how much information survives on actual hardware. **Value per pin** chooses between the average of the area under a pin and its highest value, which keeps small bright details visible. **Invert** flips high and low.3a:T1c52,function makePinDisplay({ width = 700, height = 520, gap = 0.12, speed = 5 } = {}) { const W = 10, D = W * imgFrame.height / imgFrame.width; // world size matches the image aspect const BASE = 0.08; // minimum pin height const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x1d1d1f); // dark room, like a projector setup const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 200); camera.position.set(0, 12, 14); const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 0.5, 0); controls.update(); const base = new THREE.Mesh( new THREE.BoxGeometry(W + 0.4, 0.2, D + 0.4), new THREE.MeshBasicMaterial({ color: 0x333333 }) ); base.position.y = -0.1; scene.add(base); // "projector": colour comes from the image at each point's (x, z), as if projected from above const uniforms = { uMap: { value: null }, uSize: { value: new THREE.Vector2(W, D) }, uSideShade: { value: 1 }, // 1 = projected sides, 0 = grey uSel: { value: new THREE.Vector4() }, // selection rectangle in texture coords uSelOn: { value: 0 }, uBorder: { value: new THREE.Vector2(0.004, 0.004 * W / D) } }; const material = new THREE.ShaderMaterial({ uniforms, vertexShader: /* glsl */ ` uniform vec2 uSize; varying vec2 vUv; varying vec3 vNormal; void main() { vec4 wp = modelMatrix * instanceMatrix * vec4(position, 1.0); vUv = vec2(wp.x / uSize.x + 0.5, 0.5 - wp.z / uSize.y); vNormal = normalize(mat3(modelMatrix * instanceMatrix) * normal); gl_Position = projectionMatrix * viewMatrix * wp; }`, fragmentShader: /* glsl */ ` uniform sampler2D uMap; uniform float uSideShade, uSelOn; uniform vec4 uSel; uniform vec2 uBorder; varying vec2 vUv; varying vec3 vNormal; void main() { vec3 c = texture2D(uMap, clamp(vUv, 0.0, 1.0)).rgb; if (vNormal.y < 0.5) { // side faces float shade = 0.45 + 0.35 * max(dot(vNormal, normalize(vec3(0.4, 0.0, 1.0))), 0.0); c = mix(vec3(0.6), c, uSideShade) * shade; } if (uSelOn > 0.5) { // projected red outline around the selection bool outer = all(greaterThanEqual(vUv, uSel.xy - uBorder)) && all(lessThanEqual(vUv, uSel.zw + uBorder)); bool inner = all(greaterThanEqual(vUv, uSel.xy)) && all(lessThanEqual(vUv, uSel.zw)); if (outer && !inner) c = vec3(1.0, 0.1, 0.1); } gl_FragColor = vec4(c, 1.0); }` }); const geo = new THREE.BoxGeometry(1, 1, 1); geo.translate(0, 0.5, 0); // pin bottoms at y = 0 const dummy = new THREE.Object3D(); let settings = { across: 48, maxHeight: 2, levels: 0, aggregate: "mean", invert: false, sides: "projected" }; let mesh = null, nx = 0, ny = 0, cur = new Float32Array(0), target = new Float32Array(0), moving = false; function layout(across) { if (across === nx) return; if (mesh) { scene.remove(mesh); mesh.dispose(); } nx = across; ny = Math.round(across * D / W); mesh = new THREE.InstancedMesh(geo, material, nx * ny); mesh.frustumCulled = false; // heights change, so skip stale culling cur = new Float32Array(nx * ny); target = new Float32Array(nx * ny); scene.add(mesh); } function writeMatrices() { const px = W / nx, pz = D / ny; for (let r = 0; r < ny; r++) for (let c = 0; c < nx; c++) { const i = r * nx + c; dummy.position.set(-W / 2 + (c + 0.5) * px, 0, -D / 2 + (r + 0.5) * pz); dummy.scale.set(px * (1 - gap), BASE + cur[i] * settings.maxHeight, pz * (1 - gap)); dummy.updateMatrix(); mesh.setMatrixAt(i, dummy.matrix); } mesh.instanceMatrix.needsUpdate = true; } // field (any resolution) -> one value per pin function pinValues(f) { const N = nx * ny, sum = new Float32Array(N), cnt = new Uint32Array(N), mx = new Float32Array(N).fill(-Infinity); for (let r = 0; r < f.height; r++) { const pr = Math.min(ny - 1, Math.floor((r + 0.5) / f.height * ny)); for (let c = 0; c < f.width; c++) { const pc = Math.min(nx - 1, Math.floor((c + 0.5) / f.width * nx)); const i = pr * nx + pc, v = f.values[r * f.width + c]; sum[i] += v; cnt[i]++; if (v > mx[i]) mx[i] = v; } } const out = new Float32Array(N); for (let pr = 0; pr < ny; pr++) for (let pc = 0; pc < nx; pc++) { const i = pr * nx + pc; let v = cnt[i] ? (settings.aggregate === "max" ? mx[i] : sum[i] / cnt[i]) : f.values[Math.floor((pr + 0.5) / ny * f.height) * f.width + Math.floor((pc + 0.5) / nx * f.width)]; if (settings.invert) v = 1 - v; if (settings.levels > 1) v = Math.round(v * (settings.levels - 1)) / (settings.levels - 1); out[i] = v; } return out; } let last = performance.now(), frameId; function animate(now) { frameId = requestAnimationFrame(animate); const dt = Math.min(0.1, (now - last) / 1000); last = now; if (moving && mesh) { const k = 1 - Math.exp(-speed * dt); // pins ease toward their targets let maxDelta = 0; for (let i = 0; i < cur.length; i++) { const d = target[i] - cur[i]; cur[i] += d * k; maxDelta = Math.max(maxDelta, Math.abs(d)); } writeMatrices(); if (maxDelta < 1e-4) moving = false; } controls.update(); renderer.render(scene, camera); } frameId = requestAnimationFrame(animate); return { element: renderer.domElement, configure(s) { settings = { ...settings, ...s }; layout(settings.across); uniforms.uSideShade.value = settings.sides === "projected" ? 1 : 0; moving = true; }, setHeights(f) { target = pinValues(f); moving = true; }, setProjection(src) { uniforms.uMap.value?.dispose(); const tex = new THREE.Texture(src); tex.needsUpdate = true; uniforms.uMap.value = tex; }, setSelection(region) { if (!region) { uniforms.uSelOn.value = 0; return; } const r = regionToFrame(region); const grow = (a, b, min) => { const c = (a + b) / 2, h = Math.max(b - a, min) / 2; return [c - h, c + h]; }; const [u0, u1] = grow(r.u0, r.u1, 0.5 / nx); // tiny regions: at least half a pin const [v0, v1] = grow(r.v0, r.v1, 0.5 / ny); uniforms.uSel.value.set(u0, 1 - v1, u1, 1 - v0); // image v (down) -> texture v (up) uniforms.uSelOn.value = 1; }, getPinValues: () => Float32Array.from(target), // what you'd send to real hardware dispose() { cancelAnimationFrame(frameId); controls.dispose(); if (mesh) mesh.dispose(); geo.dispose(); material.dispose(); uniforms.uMap.value?.dispose(); renderer.dispose(); } }; }3b:[] 30:{"id":"f3c432c3d99b4fe8","slug":"hsi-vis","title":"HSI Vis","thumbnail":"0b66fb9f5b0bafede5ac473674f73f32d2fd1512827de7c627b98d1e5887c6a0","access_level":"public","create_time":"$D2026-10-03T00:19:15.270Z","update_time":"$D2026-10-09T23:46:22.376Z","view_time":null,"first_public_time":"$D2026-10-09T23:49:36.938Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"326345b6c11e3af6","login":"nurit-kirshenbaum-ws","name":"Nurit Kirshenbaum's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b6e4e7042ab069aef97ad98d2f77cb0c516a4888123b0682c7da1c6c2225e1a7","tier":"starter_2024","bio":""},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7172d29525615f7","login":"nurit-kirshenbaum","name":"Nurit Kirshenbaum","avatar_url":"https://avatars-next.observableusercontent.com/f3f0d64aa6072720a45fe5d19bccf69ff826e872f25007f799e9b3f88a79e2e4","tier":null,"bio":""}],"members":[{"type":"team","id":"326345b6c11e3af6","login":"nurit-kirshenbaum-ws","name":"Nurit Kirshenbaum's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b6e4e7042ab069aef97ad98d2f77cb0c516a4888123b0682c7da1c6c2225e1a7","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HSI Vis","cells":[{"id":1,"value":"# HSI Vis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"### Exploring hyperspectral images\n\nA regular photo records three colours per pixel. A hyperspectral image records a full **spectrum**: here, 31 bands from 400 to 700 nm in 10 nm steps. That makes it possible to tell materials apart even when they look alike in RGB.\n\nThis notebook links several views of the same scene: an RGB image to pick regions, their spectra, single wavelength bands, a 3D view of the data cube, PCA summaries, and a simulated 2.5D pin display. Selections in one view update the others.\n\n*Data: ICVL hyperspectral dataset (Arad & Ben-Shahar, 2016).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"const repoRaw = \"https://raw.githubusercontent.com/nuritk/data/main\";\n\nconst sceneNames = [\n \"bgu_0403-1525\",\n \"grf_0328-0949\",\n \"Labtest_0910-1502\",\n \"lehavim_0910-1610\",\n \"Lehavim_0910-1629\",\n \"lst_0408-0950\",\n \"objects_0924-1645\",\n \"selfie_0822-0906\"\n];","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"## Scene\nChoose a scene to explore. All views update to the selected scene. Outdoor scenes show natural materials under sunlight; lab and object scenes show controlled lighting.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"const scene = view(Inputs.select(sceneNames, { label: \"Scene\", value: \"bgu_0403-1525\" }));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function fileUrl(scene, file) {\n return `${repoRaw}/${scene}/${file}`;\n}\n\nasync function loadJSON(url) {\n const r = await fetch(url);\n if (!r.ok) throw new Error(`${r.status}: ${url}`);\n return r.json();\n}\n\nasync function loadBytes(url) {\n const r = await fetch(url);\n if (!r.ok) throw new Error(`${r.status}: ${url}`);\n return new Uint8Array(await r.arrayBuffer());\n}\n\nfunction loadImage(url) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.crossOrigin = \"anonymous\"; // needed so canvas and three.js can use the pixels\n img.onload = () => resolve(img);\n img.onerror = () => reject(new Error(`Could not load ${url}`));\n img.src = url;\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"const [\n regions16, regions32, regions64, samples, rgb, bandMeta, bandData,\n pcaRawMeta, pcaRawData, pcaNormMeta, pcaNormData\n] = await Promise.all([\n loadJSON(fileUrl(scene, \"spectra_regions_16.json\")),\n loadJSON(fileUrl(scene, \"spectra_regions_32.json\")),\n loadJSON(fileUrl(scene, \"spectra_regions_64.json\")),\n loadJSON(fileUrl(scene, \"spectra_samples.json\")),\n loadImage(fileUrl(scene, \"rgb.png\")),\n loadJSON(fileUrl(scene, \"bands_meta.json\")),\n loadBytes(fileUrl(scene, \"bands_u8.bin\")),\n loadJSON(fileUrl(scene, \"pca_meta.json\")),\n loadBytes(fileUrl(scene, \"pca_u8.bin\")),\n loadJSON(fileUrl(scene, \"pca_norm_meta.json\")),\n loadBytes(fileUrl(scene, \"pca_norm_u8.bin\"))\n]);\n\nconst pcaSets = {\n raw: { meta: pcaRawMeta, data: pcaRawData, label: \"raw\" },\n norm: { meta: pcaNormMeta, data: pcaNormData, label: \"normalized\" }\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"display(regions16.regions[0])","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const data = ({\n \"16\": regions16,\n \"32\": regions32,\n \"64\": regions64,\n \"samples\": samples\n})[resolution]","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const items = resolution === \"samples\"\n ? data.samples\n : data.regions","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Pick a region\nClick any region in the image to see its spectrum below. What you can click depends on the **spatial resolution**:\n\n- **16 × 16, 32 × 32 or 64 × 64 regions**: the image is divided into square blocks of that many pixels, and each block's spectrum is the average of all its pixels.\n- **Individual sampled pixels**: a regular 64 × 64 grid of single pixels, spaced about 20 pixels apart across the image. Each one is the spectrum of exactly one pixel, without averaging. The clickable marks are drawn larger than one pixel so they are easy to hit.\n\n **Larger blocks** give smoother, less noisy spectra but mix neighbouring materials; **single pixels** keep detail but show more noise. Comparing the same spot at different resolutions shows how mixed a region is.\n\nThe selected region is outlined in red, and the selection carries through to the band image, the cube, the PCA view and the pin display.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const resolution = view(Inputs.select(\n new Map([\n [\"16 × 16 regions\", \"16\"],\n [\"32 × 32 regions\", \"32\"],\n [\"64 × 64 regions\", \"64\"],\n [\"Individual sampled pixels\", \"samples\"]\n ]),\n { label: \"Spatial resolution\" }\n));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"How much light the region reflects at each wavelength. The **shape** tells you about the material: vegetation has a peak near 550 nm (green) and rises steeply toward 700 nm, while concrete and pavement are much flatter. The **height** mostly reflects lighting: the same material in shade has a similar shape but lower values. The dashed red line marks the wavelength selected below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const wavelengths = d3.range(400, 701, 10)\nif (selectedRegion === null) {\n display(md`*Click a region on the image to see its spectrum.*`);\n} else {\n const points = selectedRegion.spectrum.map((v, i) => ({ wavelength: wavelengths[i], value: v }));\n display(Plot.plot({\n width: 700,\n height: 300,\n x: { label: \"Wavelength (nm)\", domain: [400, 700] },\n y: { label: \"Value\", grid: true },\n marks: [\n Plot.line(points, { x: \"wavelength\", y: \"value\", stroke: \"steelblue\" }),\n Plot.dot(points, { x: \"wavelength\", y: \"value\", r: 2.5, fill: \"steelblue\" }),\n Plot.ruleX([wavelength], { stroke: \"red\", strokeDasharray: \"4,3\" })\n ]\n }));\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## Wavelength\nShow the scene as seen through a single 10 nm band. The colour strip shows where that band sits in the visible spectrum. Sweep through the range and watch which materials brighten or darken; materials that change differently from each other are spectrally distinct.\n\nColour map:\nEach band image holds one value per pixel, so it is naturally greyscale. Other colour maps add **pseudocolour** to make small differences easier to see; the colours do not represent the scene's real colours. *Wavelength tint* uses the colour of the selected band as a reminder of which wavelength you are looking at. All bands share one brightness scale, so dark bands are genuinely dimmer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"\nconst colorMap = view(Inputs.select(\n [\"Grayscale\", \"Wavelength tint\", \"Magma\", \"Inferno\", \"Cividis\", \"Viridis\"],\n { value: \"Grayscale\", label: \"Colour map\" }\n));\nconst wavelength = view(Inputs.range([400, 700], { step: 10, value: 550, label: \"Wavelength (nm)\" }));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function spectrumStrip(wl, { width = 700, height = 30 } = {}) {\n const x = d3.scaleLinear([400, 700], [10, width - 10]);\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height + 25);\n\n svg.append(\"g\").selectAll(\"rect\").data(d3.range(400, 700)).join(\"rect\")\n .attr(\"x\", d => x(d)).attr(\"y\", 0)\n .attr(\"width\", x(401) - x(400) + 0.5).attr(\"height\", height)\n .attr(\"fill\", d => wavelengthToRGB(d));\n\n svg.append(\"g\").attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisBottom(x).ticks(7).tickFormat(d => `${d} nm`));\n\n svg.append(\"rect\") // current band\n .attr(\"x\", x(wl - 5)).attr(\"y\", -1)\n .attr(\"width\", x(wl + 5) - x(wl - 5)).attr(\"height\", height + 2)\n .attr(\"fill\", \"none\").attr(\"stroke\", \"black\").attr(\"stroke-width\", 2);\n\n return svg.node();\n}\n\ndisplay(spectrumStrip(wavelength));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"display(Plot.legend({\n color: {\n type: \"linear\",\n domain: bandMeta.scale,\n ...(colorMap === \"Grayscale\" ? { range: [\"black\", \"white\"] } :\n colorMap === \"Wavelength tint\" ? { range: [\"black\", wavelengthToRGB(wavelength).formatHex()] } :\n { scheme: colorMap.toLowerCase() })\n },\n label: `Radiance at ${wavelength} nm (raw units)`,\n width: 300\n}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## Visualizing Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import * as THREE from \"https://cdn.jsdelivr.net/npm/three@0.170.0/+esm\";\nimport { OrbitControls } from \"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/controls/OrbitControls.js/+esm\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Red ball -> selected pixel\n\nRed box highlight -> selected wavelength\n\nUpwards curve -> the spectral curve in the selected pixel (height is wavelength bands)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## The data cube\nThe full dataset as a 3D block: the image lies flat, and wavelength runs upward from 400 nm. The **top face** shows the selected band. The **front and side faces** are cross-sections showing one row and one column of the image across all wavelengths; horizontal stripes there show where materials reflect strongly. The red curve shows the selected region's spectrum. Drag to rotate, scroll to zoom.\n\nMove the front and side cuts through the cube to look at cross-sections anywhere in the scene, for example straight through a tree or along a wall. (For Wavelength use the slider above).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"const cropRows = view(Inputs.range([1, bandMeta.height], { step: 1, value: bandMeta.height, label: \"Crop rows\" }));\nconst cropCols = view(Inputs.range([1, bandMeta.width], { step: 1, value: bandMeta.width, label: \"Crop columns\" }));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"const cubeView = makeCubeView();\ninvalidation.then(() => cubeView.dispose());\ndisplay(cubeView.element);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"cubeView.update((wavelength - 400) / 10, cropRows, cropCols, bandLUT);\ncubeView.setSelection(selectedRegion, (wavelength - 400) / 10);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## PCA false-colour composite\n\nPC1, PC2, PC3 as R, G, B or\n\nPC1 → lightness, PC2 and PC3 → colour, using CIELAB colour space (a score of zero for PC2 and PC3 maps to neutral grey, so the colour shows how far each pixel’s spectral shape is from the scene average, and in which direction)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"## Principal components\nPCA finds the few directions in which spectra vary most and gives every pixel a score for each one. Showing three components as red, green and blue summarises nearly all 31 bands in one image. Pixels with similar colours have similar spectra.\n\n- **Raw** PCA uses the original values, so PC1 is mostly brightness (light and shadow).\n- **Normalized** PCA divides each spectrum by its own average first, removing brightness so the components describe material.\n- **PC2–PC4** leave out the strongest component to reveal subtler differences.\n\nThe colours themselves have no physical meaning, and a component's sign is arbitrary, so the same material may appear in different hues between options.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"const pcaComposite = view(Inputs.radio(Object.keys(pcaComposites), {\n value: \"Raw: PC1 lightness, PC2 + PC3 colour\",\n label: \"PCA composite\"\n}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"const pcaComposites = {\n \"Raw: PC1 / PC2 / PC3 as RGB\": { set: \"raw\", mode: \"rgb\", pcs: [0, 1, 2] },\n \"Raw: PC2 / PC3 / PC4 as RGB\": { set: \"raw\", mode: \"rgb\", pcs: [1, 2, 3] },\n \"Raw: PC1 lightness, PC2 + PC3 colour\": { set: \"raw\", mode: \"lab\", pcs: [0, 1, 2] },\n \"Normalized: PC1 / PC2 / PC3 as RGB\": { set: \"norm\", mode: \"rgb\", pcs: [0, 1, 2] },\n \"Normalized: PC2 / PC3 / PC4 as RGB\": { set: \"norm\", mode: \"rgb\", pcs: [1, 2, 3] }\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"const pcaCanvas = drawPCA(pcaComposite);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## Simulated 2.5D Vis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$37","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$38","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"const projections = {\n \"RGB\": () => rgb,\n \"Band at selected wavelength\": ({ wavelength }) => drawBand(wavelength),\n \"PCA composite\": () => drawPCA(pcaComposite),\n \"Height field (colour map)\": ({ heightField }) => fieldToCanvas(heightField, bandLUT),\n \"None (white light)\": () => {\n const cv = document.createElement(\"canvas\");\n cv.width = cv.height = 1;\n const ctx = cv.getContext(\"2d\");\n ctx.fillStyle = \"#ddd\"; ctx.fillRect(0, 0, 1, 1);\n return cv;\n }\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"const pinProjection = view(Inputs.select(Object.keys(projections), { label: \"Projected image\", value: \"RGB\" }));\nconst pinHeight = view(Inputs.select(Object.keys(heightSources), { label: \"Pin height\", value: \"Band at selected wavelength\" }));\nconst pinSettings = view(Inputs.form({\n across: Inputs.range([8, 128], { step: 1, value: 48, label: \"Pins across\" }),\n maxHeight: Inputs.range([0.5, 5], { step: 0.1, value: 2, label: \"Max height\" }),\n levels: Inputs.range([0, 32], { step: 1, value: 0, label: \"Height levels (0 = continuous)\" }),\n aggregate: Inputs.radio([\"mean\", \"max\"], { value: \"mean\", label: \"Value per pin\" }),\n invert: Inputs.toggle({ label: \"Invert heights\" }),\n sides: Inputs.radio([\"projected\", \"grey\"], { value: \"projected\", label: \"Pin sides\" })\n}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"const pinDisplay = makePinDisplay();\ninvalidation.then(() => pinDisplay.dispose());\ndisplay(pinDisplay.element);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$3a","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"const pinContext = { wavelength, selectedRegion };\nconst pinField = heightSources[pinHeight](pinContext);\n\npinDisplay.configure(pinSettings);\npinDisplay.setHeights(pinField);\npinDisplay.setProjection(projections[pinProjection]({ ...pinContext, heightField: pinField }));\npinDisplay.setSelection(selectedRegion);\n\ndisplay(html`Height: ${pinField.label} · Projection: ${pinProjection}`);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"2"}} 31:"$30:body"