2b:null 2c:["$","title",null,{"children":"Plot.lens prototype | dleeftink | Observable"}] 31:T50d,plot = { let fourPi = 4 * Math.PI; let sin = Math.sin; let cos = Math.cos; function lin(x) { return x / fourPi; } const facets = { fx: [sin, sin, lin, lin].slice(0,1), fy: [cos, lin, lin, cos].slice(0,1) }; return Plot.plot({ width: 440, height: 420, margin: 92, x: { domain: [0, 12.6] }, y: { domain: [0, 12.6] }, color: { type: "symlog", scheme: "RdPu" }, fx: { tickFormat: (f) => f?.name }, fy: { tickFormat: (f) => f?.name }, marks: [ Plot.contour({ fill: (x, y, { fx, fy }) => fx(x) * fy(y), ...facets, x1: 0, y1: 0, x2: fourPi, y2: fourPi, interval: 0.2 }), Plot.frame(), new Lens( array1.map(({ x, y, ...d },i) => ({ ...d, x: (0.5)*12,// - ((1-(loc[0]*2))*(1-((i %2)*2)))/2) * 12, y: (0.5)*12,// + ((1-(loc[1]*2))*(1-((i %2)*2)))/2) * 12, })), { ...facets, x: "x", y: "y", r, zoom: 2, focal: "f" } ), new Lens( array2.map(({ x, y, ...d }) => ({ ...d, x: 0.5 * 12, y: 0.5 * 12, })), { ...facets, x: "x", y: "y", r, zoom: 3, focal: "f", dx:-16, dy: 16 } ) /*Plot.frame()*/ ] }); } 32:T119d, 33:T58b,// Rewrite shape() ad class method once you have determined all necessary inputs createLens = function ({ uid, i, x, y, dx, dy, fx, fy, r, focal, zoom, clips, layer,dimensions,g }) { const lensId = `m${i}-lens-${uid}`; const clipId = `m${i}-lens-mask-${uid}`; const symbolId = `s${i}-lens-symbol-${uid}`; if(g) { return g } let clip = clips.querySelector(`#${clipId}`); if (!clip) { // Make symbol an optional function const symbol = htl.svg``; clip = htl.svg`${symbol}`; clips.append(clip); } // Inherit dx/dy in case of facet: "super" if (!x && dx) { x = dx; dx = 0; } if (!y && dy) { y = dy; dy = 0; } const { marginLeft, marginTop } = dimensions; return htl.svg` `; } 34:T535,// Rewrite shape() ad class method once you have determined all necessary inputs createLens2 = function ({ uid, i, x, y, dx, dy, fx, fy, r, focal, zoom, clips, layer,dimensions,g }) { const lensId = `m${i}-lens-${uid}`; const clipId = `m${i}-lens-mask-${uid}`; const symbolId = `s${i}-lens-symbol-${uid}`; if(g) { return g } let clip = clips.querySelector(`#${clipId}`); if (!clip) { // Make symbol an optional function const symbol = htl.svg``; clip = htl.svg`${symbol}`; clips.append(clip); } // Inherit dx/dy in case of facet: "super" if (!x && dx) { x = dx; dx = 0; } if (!y && dy) { y = dy; dy = 0; } const { marginLeft, marginTop } = dimensions; return htl.svg` `; } 35:T1996,class Lens extends Plot.Mark { static defaults = { ariaLabel: "lenses", stroke: "black", strokeWidth: 1 }; static customs = { createLens:createLens2, focal: 1, zoom: 2, r: 32 }; constructor(data, { createLens = Lens.customs.createLens , ...options } = {}) { const { x, y, dx, dy, r, zoom, focal, fx, fy } = options; const id = "#lens-" + crypto.randomUUID().slice(0, 8); const channels = { x: { value: x, scale: "x", optional: true }, y: { value: y, scale: "y", optional: true }, r: { value: r ?? Lens.customs.r, scale: "r", optional: true }, focal: { value: focal ?? Lens.customs.focal, scale: "opacity", optional: true } }; // Wire up the renderer to receive next() calls super(data, channels, {...options, render: Lens.prototype.render }, Lens.defaults); this.id = id; this.dx = dx ?? 0; this.dy = dy ?? 0; this.zoom = zoom; this.createLens = createLens.bind(this); this.init = true; } render(indices, scales, values, dimensions, ctx , next) { const ns = "http://www.w3.org/2000/svg"; const uid = this.id.split("-")[1]; // Get the current configuration values const { ownerSVGElement: svg } = ctx ?? { svg: null }; const { dx, dy, stroke, zoom } = this; const { x, y, r, focal, channels: src } = values; let g; if(typeof next === 'function') { g = next(...arguments) ; if(!svg.groups) { //svg.args = [] svg.groups = []; svg.offsets = []; //svg.updaters = []; } svg.groups.push(g); svg.offsets.push({dx,dy}) /* svg.updaters.push(next); svg.args.push({indices, scales, values, dimensions, ctx});*/ } if(!svg.update) { /*svg.update = (newValues) => { svg.updaters.forEach((next,i)=>{ let { indices, scales, values, dimensions, ctx } = svg.args[i] values = { ...values, //x: values.x.map(d=>scales.x((newValues[0])*12)), //y: values.y.map(d=>scales.y((newValues[1])*12)), x:values.x.map(d=>scales.x((0.5 + (((1-(newValues[0]*2))*(1-((i %2)*2)))/2)) * 12.67)), y:values.y.map(d=>scales.y((0.5 + (((1-(newValues[1]*2))*(1-((i %2)*2)))/2)) * 12.67)), }; let newNode = next(indices, scales, values, dimensions, ctx) svg.args[i] = {indices, scales, values, dimensions, ctx} deepUpdate(svg.groups[i],newNode, false); newNode.remove(); newNode = null; }) return newValues };*/ svg.update = (newValues) => { requestAnimationFrame(()=> svg.groups.forEach( (g,i)=>{ g.style.setProperty("--tx", svg.offsets[i].dx + scales.x((0.5 + (((1-(newValues[0]*2))*(1-((i %2)*2)))/2)) * 12.67) + "px"); g.style.setProperty("--ty", svg.offsets[i].dy + scales.y((0.5 + (((1-(newValues[1]*2))*(1-((i %2)*2)))/2)) * 12.67) + "px"); })) return newValues } } // Ensure a element exists in the SVG if(this.init === true) { let defs = svg.querySelector("defs"); if (!defs) { defs = document.createElementNS(ns, "defs"); svg.prepend(defs); } // To do: only setupMagnification on first render const { nth, layer } = this.setupMagnification(svg, ns, defs, uid) const clipsId = `m${nth}-lens-clips-${uid}`; let clips = svg.querySelector(`#m${nth - 1}-lens-clips-${uid}`); if (!clips) { clips = document.createElementNS(ns, "g"); clips.classList.add("lens-shape"); clips.setAttribute("id", clipsId); defs.append(clips); } this.layer = layer; this.clips = clips; this.init = false; } const lenses = [...indices].map((i) => { return this.createLens({ uid, i, x: x?.[i], y: y?.[i], dx: this.dx, dy: this.dy, fx: scales.fx(this.fx?.[i]) ?? 0, // scales.fx(indices.fx) fy: scales.fy(this.fy?.[i]) ?? 0, // scales.fy(indices.fy) r: src.r?.value[i], focal: focal[i], zoom, //defs, clips:this.clips, layer:this.layer, dimensions,g }) } ); return htl.svg`${lenses}`; } setupMagnification(svg, ns, defs, uid, next) { let cname = `lens-layer`; let dguid = `magnification-${uid}` let layers = svg.querySelectorAll(`.${cname}`); let nth = layers.length; let scope = `m${nth}-${dguid}`; let layer = svg.querySelector(`#m${nth - 1}-${dguid}`); if (!layer && layers.length > 0) { layer = document.createElementNS(ns, "g"); layer.classList.add(cname); layer.setAttribute("id", scope); let last = layers[layers.length - 1]; let skip = new Set( [...layers] .flatMap((l) => [...l.children]) .map((d) => d.getAttribute("href").slice(1)) ); const uses = this.createUseElements(svg, ns, uid, skip, last); // console.log(layers.length, uses); layer.append(...uses); last.append(uses[1]); // attach last lens to previous layer defs.append(layer); } if (!layer) { layer = document.createElementNS(ns, "g"); layer.classList.add(cname); layer.setAttribute("id", scope); const uses = this.createUseElements(svg, ns, uid); // console.log(layers.length, uses); layer.append(...uses); defs.append(layer); } return { nth, layer }; } createUseElements(svg, ns, uid, skip, last) { const marks = [...svg.querySelectorAll(":scope > g")]; return (skip ? [last].concat(marks) : marks) .map((g, i) => { const use = document.createElementNS(ns, "use"); if (skip && skip.has(g.getAttribute("id"))) { return; } let gid; // Reduce index by one in case of multiple lenses if (skip) { i = i - 1; } if (!g.hasAttribute("id") && g.hasAttribute("aria-label")) { gid = `g${i}-${g .getAttribute("aria-label") .replaceAll(" ", "-")}-${uid}`; g.setAttribute("id", gid); } else if (!g.hasAttribute("id")) { gid = `g${i}-${uid}`; g.setAttribute("id", gid); } else { gid = g.getAttribute("id"); } use.setAttribute("href", "#" + gid); return use; }) .filter((d) => d); } } 36:T426,function deepUpdate(oldNode, newNode, remove = false) { if ( oldNode.nodeType === Node.ELEMENT_NODE && newNode.nodeType === Node.ELEMENT_NODE ) { const newAttrs = new Map(); for (let i = 0; i < newNode.attributes.length; i++) { const attr = newNode.attributes[i]; newAttrs.set(attr.name, attr.value); } if (remove) { const attrsToRemove = []; for (let i = 0; i < oldNode.attributes.length; i++) { const attr = oldNode.attributes[i]; if (!newAttrs.has(attr.name)) { attrsToRemove.push(attr.name); } } for (const name of attrsToRemove) { oldNode.removeAttribute(name); } } newAttrs.forEach((value, name) => { if (oldNode.getAttribute(name) !== value) { oldNode.setAttribute(name, value); } }); } for (let i = 0; i < newNode.childNodes.length; i++) { // Assume structure is identical if (i < oldNode.childNodes.length) { deepUpdate(oldNode.childNodes[i], newNode.childNodes[i], remove); } } } 37:[] 2f:{"id":"4f26cd814ff7427a","slug":"plot-lens-prototype","title":"Plot.lens prototype","thumbnail":"f4065b2b7da5a64eb67592bf55ce559e5af3deff2a5767a79752736b29be02e2","access_level":"public","create_time":"$D2025-11-11T05:09:32.044Z","update_time":"$D2025-11-25T06:23:18.208Z","view_time":null,"first_public_time":"$D2025-11-11T18:05:37.721Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024"},"version":2285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}],"members":[{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null,"role":"editor"}],"comments":[{"id":"f58d2e44edfb60bd","reply_to_id":null,"content":"Instead of having overlapping magnification circle, you might want to consider using a Voronoi map using the center points to clip each circle. The would work with more than 2 circles, and have the nice effect that as two circles come together, they merge naturally.","create_time":"$D2025-11-17T20:16:24.763Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}},{"id":"d74372909ebb907f","reply_to_id":"f58d2e44edfb60bd","content":"Thanks Lao for the suggestion! This version is a little behind the latest, but I just might add a `blob: true` option to emulate such a shape joining/parting effect. As the user can provide any path or lense shape, I am not sure if the voronoi approach is the way to go, as I am envisioning multiple lens and cutout/magnified overlay case for static visualisations too (e.g. to highlight facets and points of interest in case of many dense plots). It would be as 'simple' as adding all the individual lens shapes to a single clippath (with some geometry smoothing) and rendering it as a single 'lens' layer, moving the clippaths instead of the lens elements themselves. However, I haven't tested the overhead of many moving clippaths yet, which I reckon can be quite intensive.","create_time":"$D2025-11-19T09:35:04.218Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Plot.lens prototype","cells":[{"id":0,"value":"# Plot.lens prototype\n## Proof of concept (unoptimised)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1087,"value":"- `25-11-12` : ~~We are doing a lot of work between re-renders; use listeners and CSS property transforms instead~~\n - `25-11-12` : Implements (slightly obtuse) `next()` logic:\n - ~~Frequently calls `createLens` to copy new attributes to existing node~~\n - `25-11-13` : Now uses CSS properties instead\n- `25-11-12` : Displacement maps can be prebaked or omitted altogether\n- `25-11-12` : Lenses in the same layer do not refract (different layers do)\n- `25-11-12` : ~~Lens layers duplicated since implementing `next()` logic~~\n - `25-11-13` : Fixed with simple `this.init` check ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"//plot.update([1-loc[0],loc[1]])\nplot.update([0.49+(Math.sin(now/950)/2),0.5+(Math.cos(now/1250)/2)]).map(d=>d.toFixed(2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":938,"value":"viewof loc = xySlider({width: \"100px\", height: \"100px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":944,"value":"array1 = Array.from({ length: 4 }, () => ({\n x: Math.random(),\n y: Math.random(),\n r: Math.random() * 48,\n f: 1 + Math.random() * 2\n}))\n\n/* array1.map(({ x, y, ...d },i) => ({\n ...d,\n x: (0.5)*12,// - ((1-(loc[0]*2))*(1-((i %2)*2)))/2) * 12,\n y: (0.5)*12,// + ((1-(loc[1]*2))*(1-((i %2)*2)))/2) * 12,\n })),*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":949,"value":"array2 = Array.from({ length: 4 }, () => ({\n x: Math.random(),\n y: Math.random(),\n r: Math.random() * 64,\n f: 1 + Math.random() * 2\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1014,"value":"r= 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"zoom = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1008,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1890,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1328,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":940,"value":"import {xySlider} from \"@mootari/2d-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"