2f:T80b,viewof embeddingSlider = { // Create a main container const container = html`

`; // Style for the label const labelStyle = ` font-family: "Roboto", "Noto Sans", "Arial", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #5f6368; /* Google's neutral gray */ padding: 2px 8px; border-radius: 4px; text-align: center; transition: color 0.3s ease, background-color 0.3s ease; `; // Create a wrapper for the label + slider const wrapper = html`

Proximity

`; // Create the double slider const myDoubleSlider = createDoubleSlider({ width: 620, flipped: false, initialHandle1: 0.2, initialHandle2: 0.5, doiY: 1.0, wSetting: 0.5, radiusSetting: 0.5 }); // Append the slider to the wrapper wrapper.appendChild(myDoubleSlider); // Add the wrapper to the main container container.appendChild(wrapper); // Add hover effect for labels (same style as before) const styleTag = document.createElement("style"); styleTag.textContent = ` .label:hover { color: #202124; background-color: rgba(0, 0, 0, 0.05); cursor: pointer; } `; document.head.appendChild(styleTag); // Fire an "input" event whenever the slider changes myDoubleSlider.addEventListener("input", () => { container.dispatchEvent(new CustomEvent("input")); }); // Provide a .value property for viewof usage Object.defineProperty(container, "value", { get() { return myDoubleSlider.value; } }); // Return the container so Observable displays it as viewof embeddingSlider return container; }30:Ta13,viewof wPastFuture = { // Create a container with flex layout const container = html`

`; // Style for labels const labelStyle = ` font-family: "Roboto", "Noto Sans", "Arial", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #5f6368; /* Google's neutral gray */ padding: 2px 8px; border-radius: 4px; text-align: center; transition: color 0.3s ease, background-color 0.3s ease; `; const pastWrapper = html`

Backward

`; const futureWrapper = html`

Forward

`; // Create the "past" slider (flipped) const pastSlider = createSingleSlider({ width: 300, flipped: true, initialHandle1: 0.5 }); // Create the "future" slider (normal orientation) const futureSlider = createSingleSlider({ width: 300, flipped: false, initialHandle1: 0.5 }); // Place each slider in its wrapper pastWrapper.appendChild(pastSlider); futureWrapper.appendChild(futureSlider); // Add both wrappers to the main container container.append(pastWrapper, futureWrapper); // Add hover effect for labels const styleTag = document.createElement("style"); styleTag.textContent = ` .label:hover { color: #202124; background-color: rgba(0, 0, 0, 0.05); cursor: pointer; } `; document.head.appendChild(styleTag); // Add event listeners to dispatch "input" events for real-time updates pastSlider.addEventListener("input", () => { container.dispatchEvent(new CustomEvent("input")); }); futureSlider.addEventListener("input", () => { container.dispatchEvent(new CustomEvent("input")); }); // Provide a .value property for "viewof" usage Object.defineProperty(container, "value", { get() { return { past: pastSlider.value, future: futureSlider.value }; } }); // Return the container so Observable displays it as viewof wPastFuture return container; }31:T1e44,chartCatMullRomOpacity = { const width = 600; const height = 600; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const nodeById = new Map(nodes.map((d) => [d.id, d])); const x = d3 .scaleLinear() .domain(d3.extent(nodes, (d) => d.coordinate.x)) .nice() .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain(d3.extent(nodes, (d) => d.coordinate.y)) .nice() .range([height - margin.bottom, margin.top]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Define a block for dynamic markers svg.append("defs"); // Helper function to compute a Catmull-Rom point function catmullRomPoint(t, p0, p1, p2, p3) { const t2 = t * t; const t3 = t2 * t; const x = 0.5 * (2 * p1[0] + (-p0[0] + p2[0]) * t + (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 + (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3); const y = 0.5 * (2 * p1[1] + (-p0[1] + p2[1]) * t + (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 + (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3); return [x, y]; } // Group links by trajectory const linksByTraj = d3.group(links, (d) => d.trajectory); const trajectoryNodeLists = new Map(); for (const [trajId, trajLinks] of linksByTraj) { const trajNodeIds = new Set(); for (const link of trajLinks) { trajNodeIds.add(link.source); trajNodeIds.add(link.target); } const trajNodes = Array.from(trajNodeIds, (id) => nodeById.get(id)); trajNodes.sort((a, b) => { const t = d3.ascending(a.time, b.time); return t !== 0 ? t : d3.ascending(a.id, b.id); }); trajectoryNodeLists.set(trajId, trajNodes); } // Use a line generator for the curves const lineGenerator = d3 .line() .x((d) => d[0]) .y((d) => d[1]) .curve(d3.curveLinear); function update() { // 1. Create one marker per link so each arrow can match the link’s color and DoI. svg .select("defs") .selectAll("marker.arrow") .data(links, (d) => `${d.source}-${d.target}`) .join( (enter) => { const marker = enter .append("marker") .attr("class", "arrow") .attr("markerWidth", markerWidth) .attr("markerHeight", markerWidth) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", 0) .attr("orient", "auto"); // Append the path for the arrowhead marker.append("path").attr("d", "M0,-5L10,0L0,5"); return marker; }, (update) => update, (exit) => exit.remove() ) .attr("id", (d) => `arrow-${d.source}-${d.target}`) .each(function (d) { // Update arrow color & opacity on the inside this marker d3.select(this) .select("path") .attr("fill", "#d95f02") .attr("fill-opacity", Math.max(0.05, getDoi(d))); }); // 2. Update links svg .selectAll("path.link") .data(links, (d) => `${d.source}-${d.target}`) .join("path") .attr("class", "link") .attr("fill", "none") .attr("stroke", "#d95f02") .attr("stroke-opacity", (d) => Math.max(0.05, getDoi(d))) .attr("stroke-width", edgeWidth) // Use each link's custom marker .attr("marker-end", (d) => `url(#arrow-${d.source}-${d.target})`) .on("click", (event, d) => { click(d); update(); }) .attr("d", (d) => { const trajNodes = trajectoryNodeLists.get(d.trajectory); const sourceNode = nodeById.get(d.source); const targetNode = nodeById.get(d.target); const sourceIndex = trajNodes ? trajNodes.indexOf(sourceNode) : -1; const targetIndex = trajNodes ? trajNodes.indexOf(targetNode) : -1; let p1 = [x(sourceNode.coordinate.x), y(sourceNode.coordinate.y)]; let p2 = [x(targetNode.coordinate.x), y(targetNode.coordinate.y)]; let p0 = p1; let p3 = p2; if (trajNodes && sourceIndex >= 0 && targetIndex >= 0) { const startIndex = Math.min(sourceIndex, targetIndex); const endIndex = Math.max(sourceIndex, targetIndex); p1 = [ x(trajNodes[startIndex].coordinate.x), y(trajNodes[startIndex].coordinate.y) ]; p2 = [ x(trajNodes[endIndex].coordinate.x), y(trajNodes[endIndex].coordinate.y) ]; if (startIndex > 0) { p0 = [ x(trajNodes[startIndex - 1].coordinate.x), y(trajNodes[startIndex - 1].coordinate.y) ]; } else { p0 = p1; } if (endIndex < trajNodes.length - 1) { p3 = [ x(trajNodes[endIndex + 1].coordinate.x), y(trajNodes[endIndex + 1].coordinate.y) ]; } else { p3 = p2; } } const samples = 20; const curvePoints = []; for (let i = 0; i <= samples; i++) { const t = i / samples; curvePoints.push(catmullRomPoint(t, p0, p1, p2, p3)); } return lineGenerator(curvePoints); }); // 3. Drag behavior for nodes const drag = d3.drag().on("drag", function (event, d) { const newX = x.invert(event.x); const newY = y.invert(event.y); d3.select(this) .attr("cx", (d.coordinate.x = newX)) .attr("cy", (d.coordinate.y = newY)); update(); click("dummy"); }); // 4. Update nodes svg .selectAll("circle") .data(nodes, (d) => d.id) .join("circle") .attr("cx", (d) => x(d.coordinate.x)) .attr("cy", (d) => y(d.coordinate.y)) .attr("r", nodeRadius) .attr("opacity", (d) => Math.max(0.05, getDoi(d))) .attr("fill", "#d95f02") // Black stroke when selected, none otherwise .attr("stroke", (d) => (selected(d) ? "black" : "none")) .attr("stroke-width", selectionStrokeWidth) .on("click", (event, d) => { click(d); update(); }) .call(drag); // 5. Node labels svg .selectAll(".node-label") .data(nodes, (d) => d.id) .join("text") .attr("class", "node-label") .attr("x", (d) => x(d.coordinate.x)) .attr("y", (d) => y(d.coordinate.y) - 10) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 18) .attr("fill", "black") .attr("fill-opacity", (d) => Math.max(0.05, getDoi(d))) .attr("stroke", "white") .attr("stroke-width", 0.5) .text((d) => getDoi(d).toFixed(2)); // 6. Edge labels svg .selectAll(".edge-label") .data(links, (d) => `${d.source}-${d.target}`) .join("text") .attr("class", "edge-label") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 18) .attr("fill", "black") .attr("fill-opacity", (d) => Math.max(0.05, getDoi(d))) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr( "x", (d) => (x(nodeById.get(d.source).coordinate.x) + x(nodeById.get(d.target).coordinate.x)) / 2 ) .attr( "y", (d) => (y(nodeById.get(d.source).coordinate.y) + y(nodeById.get(d.target).coordinate.y)) / 2 ) .text((d) => getDoi(d).toFixed(2)); } update(); click("dummy"); return svg.node(); }32:Ta7f,css = html` `33:T1833,createDoubleSlider = ({ // Additional config: width = 400, // The width of the slider in px flipped = false, // Whether to flip left↔right initialHandle1 = 0.5, initialHandle2 = 0.5 } = {}) => { // ---------------------------------------------------------------------------- // 1) Create the slider track & thumbs in the DOM // ---------------------------------------------------------------------------- const sliderEl = html`

`; sliderEl.style.width = width + "px"; const thumb1El = html`

`; const thumb2El = html`

`; sliderEl.append(thumb1El, thumb2El); // ---------------------------------------------------------------------------- // 2) Define core variables // ---------------------------------------------------------------------------- let handle1Value = initialHandle1; // "position of color boundary" let handle2Value = initialHandle2; // "color interpolation fraction" // ---------------------------------------------------------------------------- // 3) Color constants & interpolation // ---------------------------------------------------------------------------- const LEFT_COLOR = "#d95f02"; // Start of gradient (left) const WHITE = [255, 255, 255]; const ORANGE = [217, 95, 2]; function interpolateColor(fraction) { // Linear interpolation between WHITE and ORANGE const r = Math.round(WHITE[0] + (ORANGE[0] - WHITE[0]) * fraction); const g = Math.round(WHITE[1] + (ORANGE[1] - WHITE[1]) * fraction); const b = Math.round(WHITE[2] + (ORANGE[2] - WHITE[2]) * fraction); return `rgb(${r}, ${g}, ${b})`; } // ---------------------------------------------------------------------------- // 4) Main function to update slider UI // ---------------------------------------------------------------------------- function updateSliderUI() { /* EXACT same dropSimulation call as the original: dropSimulation(1.0, handle1Value, handle2Value, handle1Value) => The second param "relativeDistance" = handle1Value => The third param "wSetting" = handle2Value => The fourth param "radiusSetting" = handle1Value */ const rightGradientFraction = dropSimulation( 1.0, handle1Value, handle2Value, handle1Value ); const colorAtHandle1 = interpolateColor(rightGradientFraction); // Decide gradient direction: normal -> "to right"; flipped -> "to left" const gradientDirection = flipped ? "to left" : "to right"; // The gradient boundary stop is handle1Value * 100 // If flipped, "0%" is the right edge, "100%" is the left edge. const boundaryPercent = handle1Value * 100; // Build the gradient const gradient = ` linear-gradient( ${gradientDirection}, ${LEFT_COLOR} 0%, ${colorAtHandle1} ${boundaryPercent}%, #666666 ${boundaryPercent}%, #666666 100% ) `; sliderEl.style.background = gradient; // Position thumbs: if flipped, put them at (1 - val)*trackWidth const trackWidth = sliderEl.clientWidth; thumb1El.style.left = (flipped ? 1 - handle1Value : handle1Value) * trackWidth + "px"; thumb2El.style.left = (flipped ? 1 - handle2Value : handle2Value) * trackWidth + "px"; // Give handle1 a visible color; handle2 remains #666 by default thumb1El.style.background = colorAtHandle1; // Update tooltip text thumb1El.querySelector(".tooltip").textContent = `Radius: ${( handle1Value * 100 ).toFixed(0)}%`; thumb2El.querySelector(".tooltip").textContent = `Force: ${( handle2Value * 100 ).toFixed(0)}%`; // Dispatch an "input" event so other cells see updated values sliderEl.dispatchEvent(new CustomEvent("input")); } // ---------------------------------------------------------------------------- // 5) Pointer events to drag thumbs // ---------------------------------------------------------------------------- let activeThumb = null; function pointerEventToFraction(event) { const rect = sliderEl.getBoundingClientRect(); const fraction = (event.clientX - rect.left) / rect.width; const clamped = Math.max(0, Math.min(1, fraction)); // If flipped, invert the fraction so physically moving left => value increases return flipped ? 1 - clamped : clamped; } function onPointerDown(thumb, event) { activeThumb = thumb; thumb.setPointerCapture(event.pointerId); } function onPointerMove(event) { if (!activeThumb) return; event.preventDefault(); const fraction = pointerEventToFraction(event); if (activeThumb.id === "thumb1") { handle1Value = fraction; } else { handle2Value = fraction; } updateSliderUI(); } function onPointerUp(event) { if (activeThumb) { activeThumb.releasePointerCapture(event.pointerId); } activeThumb = null; } [thumb1El, thumb2El].forEach((thumbEl) => { thumbEl.addEventListener("pointerdown", (e) => onPointerDown(thumbEl, e)); thumbEl.addEventListener("pointermove", onPointerMove); thumbEl.addEventListener("pointerup", onPointerUp); thumbEl.addEventListener("pointercancel", onPointerUp); thumbEl.addEventListener("pointerout", onPointerUp); thumbEl.addEventListener("pointerleave", onPointerUp); }); // ---------------------------------------------------------------------------- // 6) Provide a .value getter for “viewof” usage // ---------------------------------------------------------------------------- Object.defineProperty(sliderEl, "value", { get() { return { handle1: handle1Value, handle2: handle2Value }; } }); // ---------------------------------------------------------------------------- // 7) Defer the initial UI update to ensure correct initial positions // ---------------------------------------------------------------------------- requestAnimationFrame(updateSliderUI); return sliderEl; } 34:T158e,createSingleSlider = ({ // Additional config: width = 400, // The width of the slider in px flipped = false, // Whether to flip left↔right initialHandle1 = 0.5 } = {}) => { // ---------------------------------------------------------------------------- // 1) Create the slider track & thumbs in the DOM // ---------------------------------------------------------------------------- const sliderEl = html`

`; sliderEl.style.width = width + "px"; const thumb1El = html`

`; sliderEl.append(thumb1El); // ---------------------------------------------------------------------------- // 2) Define core variables // ---------------------------------------------------------------------------- let handle1Value = initialHandle1; // ---------------------------------------------------------------------------- // 3) Color constants & interpolation // ---------------------------------------------------------------------------- const LEFT_COLOR = "#d95f02"; // Start of gradient (left) const WHITE = [255, 255, 255]; const ORANGE = [217, 95, 2]; function interpolateColor(fraction) { // Linear interpolation between WHITE and ORANGE const r = Math.round(WHITE[0] + (ORANGE[0] - WHITE[0]) * fraction); const g = Math.round(WHITE[1] + (ORANGE[1] - WHITE[1]) * fraction); const b = Math.round(WHITE[2] + (ORANGE[2] - WHITE[2]) * fraction); return `rgb(${r}, ${g}, ${b})`; } // ---------------------------------------------------------------------------- // 4) Main function to update slider UI // ---------------------------------------------------------------------------- function updateSliderUI() { /* EXACT same dropSimulation call as the original: dropSimulation(1.0, handle1Value, handle2Value, handle1Value) => The second param "relativeDistance" = handle1Value => The third param "wSetting" = handle2Value => The fourth param "radiusSetting" = handle1Value */ const colorAtHandle1 = interpolateColor(handle1Value); // Decide gradient direction: normal -> "to right"; flipped -> "to left" const gradientDirection = flipped ? "to left" : "to right"; // The gradient boundary stop is handle1Value * 100 // If flipped, "0%" is the right edge, "100%" is the left edge. const boundaryPercent = handle1Value * 100; // Build the gradient const gradient = ` linear-gradient( ${gradientDirection}, ${LEFT_COLOR} 0%, ${colorAtHandle1} ${boundaryPercent}%, #666666 ${boundaryPercent}%, #666666 100% ) `; sliderEl.style.background = gradient; // Position thumbs: if flipped, put them at (1 - val)*trackWidth const trackWidth = sliderEl.clientWidth; thumb1El.style.left = (flipped ? 1 - handle1Value : handle1Value) * trackWidth + "px"; // Give handle1 a visible color; handle2 remains #666 by default thumb1El.style.background = colorAtHandle1; // Update tooltip text thumb1El.querySelector(".tooltip").textContent = `Propagation: ${( handle1Value * 100 ).toFixed(0)}%`; // Dispatch an "input" event so other cells see updated values sliderEl.dispatchEvent(new CustomEvent("input")); } // ---------------------------------------------------------------------------- // 5) Pointer events to drag thumbs // ---------------------------------------------------------------------------- let activeThumb = null; function pointerEventToFraction(event) { const rect = sliderEl.getBoundingClientRect(); const fraction = (event.clientX - rect.left) / rect.width; const clamped = Math.max(0, Math.min(1, fraction)); // If flipped, invert the fraction so physically moving left => value increases return flipped ? 1 - clamped : clamped; } function onPointerDown(thumb, event) { activeThumb = thumb; thumb.setPointerCapture(event.pointerId); } function onPointerMove(event) { if (!activeThumb) return; event.preventDefault(); const fraction = pointerEventToFraction(event); if (activeThumb.id === "thumb1") { handle1Value = fraction; } updateSliderUI(); } function onPointerUp(event) { if (activeThumb) { activeThumb.releasePointerCapture(event.pointerId); } activeThumb = null; } [thumb1El].forEach((thumbEl) => { thumbEl.addEventListener("pointerdown", (e) => onPointerDown(thumbEl, e)); thumbEl.addEventListener("pointermove", onPointerMove); thumbEl.addEventListener("pointerup", onPointerUp); thumbEl.addEventListener("pointercancel", onPointerUp); thumbEl.addEventListener("pointerout", onPointerUp); thumbEl.addEventListener("pointerleave", onPointerUp); }); // ---------------------------------------------------------------------------- // 6) Provide a .value getter for “viewof” usage // ---------------------------------------------------------------------------- Object.defineProperty(sliderEl, "value", { get() { return { handle1: handle1Value }; } }); // ---------------------------------------------------------------------------- // 7) Defer the initial UI update to ensure correct initial positions // ---------------------------------------------------------------------------- requestAnimationFrame(updateSliderUI); return sliderEl; }35:T7e3,propagateUntilConvergence = () => { const convergenceThreshold = 1e-6; // Set a small threshold for convergence let converged = false; while (!converged) { const newDois = new Map(); let maxChange = 0; // Collect updates for nodes nodes.forEach((node) => { const doi = doiProp(node, nodes, links); const id = getElementId(node); newDois.set(id, doi); }); // // Collect updates for links // links.forEach((link) => { // const doi = doiProp(link, nodes, links); // const id = getElementId(link); // newDois.set(id, doi); // }); // Apply updates and check for convergence newDois.forEach((doi, id) => { const oldDoi = dois.get(id); const change = Math.abs(doi - oldDoi); if (change > maxChange) { maxChange = change; } dois.set(id, doi); }); // Check if the maximum change is below the threshold if (maxChange < convergenceThreshold) { converged = true; } } // Collect updates for links links.forEach((link) => { const id = getElementId(link); const sourceDoi = dois.get(nodes[link.source].id); const targetDoi = dois.get(nodes[link.target].id); dois.set(id, Math.sqrt(sourceDoi * targetDoi)); // let edgePropDoi = 0; // if (sourceDoi < targetDoi) { // // past // edgePropDoi = ((sourceDoi + targetDoi) / 2) * wPastFuture.past.handle1; // } else if (sourceDoi > targetDoi) { // // future // edgePropDoi = ((sourceDoi + targetDoi) / 2) * wPastFuture.future.handle1; // } else { // edgePropDoi = sourceDoi // } // let embeddingPropDoi = 0; // if (sourceDoi > 0 && targetDoi > 0) { // embeddingPropDoi = ((sourceDoi + targetDoi) / 2) * embeddingSlider.handle2; // } // dois.set(id, Math.max(embeddingPropDoi, edgePropDoi)); // if (sourceDoi == 0 || targetDoi == 0) { // dois.set(id, 0); // } else { // dois.set(id, (sourceDoi + targetDoi) / 2); // } }); }36:T532,drop = (doiY, x, y) => { // normalize embedding distance const embDist = dEmb(x, y) / dEmbMax; // in [0,1] // restrict embedding distance propagation by embeddingSlider.handle1. // if embDist > embeddingSlider.handle1, no embedding propagation occurs. // otherwise, scale distance from [0..embeddingSlider.handle1] down to [0..1]. let embMultiplier = 0; if (embDist <= embeddingSlider.handle1) { const scaledEmbDist = embDist / embeddingSlider.handle1; embMultiplier = getPropagationMultiplier( embeddingSlider.handle2, // embDist scaledEmbDist ); } // compute topology distance and multiplier const topologyDist = distTopology(y, x); // in [0,1] or Infinity let topologyMultiplier = 0; if (Number.isFinite(topologyDist) && Math.abs(t(x) - t(y)) <= 1) { if (t(y) - t(x) == 1) { topologyMultiplier = wPastFuture.past.handle1; } else if (t(x) - t(y) == 1) { topologyMultiplier = wPastFuture.future.handle1; } else if (t(x) === t(y)) { topologyMultiplier = 1; } } // multiply each by the DoI (degree of interest) of y const propagationFromEmbedding = doiY * embMultiplier; const propagationFromTopology = doiY * topologyMultiplier; // return the maximum propagation return Math.max(propagationFromEmbedding, propagationFromTopology); }37:T221e,// chartCatMullRomSize = { // const width = 600; // const height = 600; // const margin = { top: 20, right: 20, bottom: 30, left: 40 }; // const nodeById = new Map(nodes.map((d) => [d.id, d])); // const x = d3 // .scaleLinear() // .domain(d3.extent(nodes, (d) => d.coordinate.x)) // .nice() // .range([margin.left, width - margin.right]); // const y = d3 // .scaleLinear() // .domain(d3.extent(nodes, (d) => d.coordinate.y)) // .nice() // .range([height - margin.bottom, margin.top]); // const svg = d3 // .create("svg") // .attr("width", width) // .attr("height", height) // .attr("viewBox", [0, 0, width, height]) // .attr("style", "max-width: 100%; height: auto;"); // svg // .append("defs") // .selectAll("marker") // .data(["end"]) // .join("marker") // .attr("id", String) // .attr("viewBox", "0 -5 10 10") // .attr("refX", 15) // .attr("refY", 0) // .attr("markerWidth", 2) // .attr("markerHeight", 2) // .attr("orient", "auto") // .append("path") // .attr("d", "M0,-5L10,0L0,5") // .attr("fill", "#999"); // // Helper function to compute a Catmull-Rom point // function catmullRomPoint(t, p0, p1, p2, p3) { // const t2 = t * t; // const t3 = t * t * t; // // Catmull-Rom basis // const x = // 0.5 * // (2 * p1[0] + // (-p0[0] + p2[0]) * t + // (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 + // (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3); // const y = // 0.5 * // (2 * p1[1] + // (-p0[1] + p2[1]) * t + // (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 + // (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3); // return [x, y]; // } // // For each link, we identify the four control points. // // Since we only have two main points for a link (source, target), // // we get neighbors from the trajectoryNodes. If that's not desired, // // you can handle that differently. For now, let's assume we have a way // // to handle endpoints by repeating points. // // If you have trajectories, you can reconstruct them as before. // // If not, and each link is isolated, you can just duplicate endpoints. // // For simplicity here, we'll just duplicate endpoints if neighbors are missing. // // We'll still rely on order by time+id to find trajectories if desired. // // If you don't have trajectories, ignore this part. // const linksByTraj = d3.group(links, (d) => d.trajectory); // const trajectoryNodeLists = new Map(); // for (const [trajId, trajLinks] of linksByTraj) { // const trajNodeIds = new Set(); // for (const link of trajLinks) { // trajNodeIds.add(link.source); // trajNodeIds.add(link.target); // } // const trajNodes = Array.from(trajNodeIds, (id) => nodeById.get(id)); // trajNodes.sort((a, b) => { // let t = d3.ascending(a.time, b.time); // return t !== 0 ? t : d3.ascending(a.id, b.id); // }); // trajectoryNodeLists.set(trajId, trajNodes); // } // // We'll generate a polyline from sampled points. // const lineGenerator = d3 // .line() // .x((d) => d[0]) // .y((d) => d[1]) // // We use a straight line between sampled points because we already computed curvature // .curve(d3.curveLinear); // function update() { // svg // .selectAll("path.link") // .data(links, (d) => `${d.source}-${d.target}`) // .join("path") // .attr("class", "link") // .attr("fill", "none") // .attr("stroke", (d) => (selected(d) ? "#d95f02" : "#999")) // .attr("stroke-opacity", 0.6) // .attr("stroke-width", (d) => Math.max(2, 25 * getDoi(d))) // // .attr("stroke-opacity", (d) => Math.max(0.05, getDoi(d))) // // .attr("stroke-width", (d) => 5) // .attr("marker-end", "url(#end)") // .on("click", (event, d) => { // click(d); // update(); // }) // .attr("d", (d) => { // const trajNodes = trajectoryNodeLists.get(d.trajectory); // const sourceNode = nodeById.get(d.source); // const targetNode = nodeById.get(d.target); // const sourceIndex = trajNodes ? trajNodes.indexOf(sourceNode) : -1; // const targetIndex = trajNodes ? trajNodes.indexOf(targetNode) : -1; // // If we have a trajectory, we can pick neighbors. // // If not found or no trajectory grouping, just duplicate endpoints. // // p1 = source, p2 = target // let p1 = [x(sourceNode.coordinate.x), y(sourceNode.coordinate.y)]; // let p2 = [x(targetNode.coordinate.x), y(targetNode.coordinate.y)]; // let p0 = p1; // let p3 = p2; // if (trajNodes && sourceIndex >= 0 && targetIndex >= 0) { // const startIndex = Math.min(sourceIndex, targetIndex); // const endIndex = Math.max(sourceIndex, targetIndex); // p1 = [ // x(trajNodes[startIndex].coordinate.x), // y(trajNodes[startIndex].coordinate.y) // ]; // p2 = [ // x(trajNodes[endIndex].coordinate.x), // y(trajNodes[endIndex].coordinate.y) // ]; // // For p0 // if (startIndex > 0) { // p0 = [ // x(trajNodes[startIndex - 1].coordinate.x), // y(trajNodes[startIndex - 1].coordinate.y) // ]; // } else { // p0 = p1; // duplicate if none available // } // // For p3 // if (endIndex < trajNodes.length - 1) { // p3 = [ // x(trajNodes[endIndex + 1].coordinate.x), // y(trajNodes[endIndex + 1].coordinate.y) // ]; // } else { // p3 = p2; // duplicate if none available // } // } else { // // No trajectory info, just duplicate endpoints // p0 = p1; // p3 = p2; // } // // Sample points along t=0 to t=1 // const samples = 20; // number of segments // const curvePoints = []; // for (let i = 0; i <= samples; i++) { // const t = i / samples; // curvePoints.push(catmullRomPoint(t, p0, p1, p2, p3)); // } // return lineGenerator(curvePoints); // }); // const drag = d3.drag().on("drag", function (event, d) { // const newX = x.invert(event.x); // const newY = y.invert(event.y); // d3.select(this) // .attr("cx", (d.coordinate.x = newX)) // .attr("cy", (d.coordinate.y = newY)); // update(); // click("dummy"); // }); // // Update nodes // svg // .selectAll("circle") // .data(nodes, (d) => d.id) // .join("circle") // .attr("cx", (d) => x(d.coordinate.x)) // .attr("cy", (d) => y(d.coordinate.y)) // .attr("r", (d) => Math.max(5, 25 * getDoi(d))) // // .attr("r", (d) => 10) // // .attr("opacity", (d) => Math.max(0.05, getDoi(d))) // .attr("fill", (d) => (selected(d) ? "#d95f02" : "#999")) // .attr("stroke", "#fff") // .on("click", (event, d) => { // click(d); // update(); // }) // .call(drag); // // Update node labels // svg // .selectAll(".node-label") // .data(nodes, (d) => d.id) // .join("text") // .attr("class", "node-label") // .attr("x", (d) => x(d.coordinate.x)) // .attr("y", (d) => y(d.coordinate.y) - 10) // .attr("text-anchor", "middle") // .attr("font-family", "sans-serif") // .attr("font-size", 24) // .attr("fill", "black") // .attr("stroke", "white") // .attr("stroke-width", 0.5) // .text((d) => getDoi(d).toFixed(2)); // // Update edge labels // svg // .selectAll(".edge-label") // .data(links, (d) => `${d.source}-${d.target}`) // .join("text") // .attr("class", "edge-label") // .attr("text-anchor", "middle") // .attr("font-family", "sans-serif") // .attr("font-size", 24) // .attr("fill", "black") // .attr("stroke", "white") // .attr("stroke-width", 0.5) // .attr( // "x", // (d) => // (x(nodeById.get(d.source).coordinate.x) + // x(nodeById.get(d.target).coordinate.x)) / // 2 // ) // .attr( // "y", // (d) => // (y(nodeById.get(d.source).coordinate.y) + // y(nodeById.get(d.target).coordinate.y)) / // 2 // ) // .text((d) => getDoi(d).toFixed(2)); // } // update(); // click("dummy"); // // return svg.node(); // return svg.node(); // }38:[{"id":"d2361af38d1805c40d8f9e7e0c7b2a925a3f09f556776fe957d7f46da94eda9130014d4ec1a9b702ed2c6bb17bae20916e1d117f3f5acc965130b00e9c2a6dbc","href":"https://static.observableusercontent.com/files/d2361af38d1805c40d8f9e7e0c7b2a925a3f09f556776fe957d7f46da94eda9130014d4ec1a9b702ed2c6bb17bae20916e1d117f3f5acc965130b00e9c2a6dbc","name":"guiding_example_1.json","type":"application/json","lastModified":1734514089778.891,"size":4737},{"id":"d2361af38d1805c40d8f9e7e0c7b2a925a3f09f556776fe957d7f46da94eda9130014d4ec1a9b702ed2c6bb17bae20916e1d117f3f5acc965130b00e9c2a6dbc","href":"https://static.observableusercontent.com/files/d2361af38d1805c40d8f9e7e0c7b2a925a3f09f556776fe957d7f46da94eda9130014d4ec1a9b702ed2c6bb17bae20916e1d117f3f5acc965130b00e9c2a6dbc","name":"guiding_example_1@1.json","type":"application/json","lastModified":1734514113391.262,"size":4737},{"id":"aef8a6629ac4d9e444957513f47c7bb04d1466dfc751c687b436e1f37b2da324a7db4174f98e42602f506d6dfffde09570afbd1426333f701d0661b1546a359d","href":"https://static.observableusercontent.com/files/aef8a6629ac4d9e444957513f47c7bb04d1466dfc751c687b436e1f37b2da324a7db4174f98e42602f506d6dfffde09570afbd1426333f701d0661b1546a359d","name":"guiding_example_1@2.json","type":"application/json","lastModified":1734514229505.824,"size":4735},{"id":"6d55ec0c6c79353e51ccc8017b060d86b25e5bcd77ea615330ec2578fbe8d9cbc74e8465b5fe0161c7fa69bf03640c33f83378e7dc1efe6a4954cb85444d7d8a","href":"https://static.observableusercontent.com/files/6d55ec0c6c79353e51ccc8017b060d86b25e5bcd77ea615330ec2578fbe8d9cbc74e8465b5fe0161c7fa69bf03640c33f83378e7dc1efe6a4954cb85444d7d8a","name":"guiding_example_1@3.json","type":"application/json","lastModified":1734514366080.994,"size":4734},{"id":"1356df1fa31fb3e52310c5525b333ad1621ebbc8ecf893347990d9ad605665db55a8ee6d6f0cdcd01a95c391dce740c5b9af934d9e603f7c8e42daf2937150bf","href":"https://static.observableusercontent.com/files/1356df1fa31fb3e52310c5525b333ad1621ebbc8ecf893347990d9ad605665db55a8ee6d6f0cdcd01a95c391dce740c5b9af934d9e603f7c8e42daf2937150bf","name":"guiding_example_1@4.json","type":"application/json","lastModified":1734514532793.646,"size":4736},{"id":"2dca914c162e9a0541985494b08d36ac199ae341ff7edcbb94050d570566c4c17b0352d41ba9358bb221d59faae6c01e5fb806c905baf47b61860884df976402","href":"https://static.observableusercontent.com/files/2dca914c162e9a0541985494b08d36ac199ae341ff7edcbb94050d570566c4c17b0352d41ba9358bb221d59faae6c01e5fb806c905baf47b61860884df976402","name":"guiding_example_1@5.json","type":"application/json","lastModified":1734514592957.635,"size":4736},{"id":"638b105239c99fd7a55db8493a87711bf4142db12971861c8c26b913343199574e8a594201f68eeb0747698b38223b77280801bb35eb6d4c1fd99649d3f36d9d","href":"https://static.observableusercontent.com/files/638b105239c99fd7a55db8493a87711bf4142db12971861c8c26b913343199574e8a594201f68eeb0747698b38223b77280801bb35eb6d4c1fd99649d3f36d9d","name":"guiding_example_1@6.json","type":"application/json","lastModified":1734514712482.597,"size":4736},{"id":"b61af92aa50298814b2a919e78266ca284670de9d123fc6cf3c8f56b15db409d9907513600d19c4dc68c528d6e108d505eebf71658a735dc45ab5d21f3a90853","href":"https://static.observableusercontent.com/files/b61af92aa50298814b2a919e78266ca284670de9d123fc6cf3c8f56b15db409d9907513600d19c4dc68c528d6e108d505eebf71658a735dc45ab5d21f3a90853","name":"guiding_example_1@7.json","type":"application/json","lastModified":1734515367560.239,"size":3453},{"id":"8a5c9335c01d9995f9adcad0c6f956244d162b4a71e74bf24f273dedac472e45e67e2f58363e48d304e92c41868bffa3d871bfde127af167bec1fad7dd1c2708","href":"https://static.observableusercontent.com/files/8a5c9335c01d9995f9adcad0c6f956244d162b4a71e74bf24f273dedac472e45e67e2f58363e48d304e92c41868bffa3d871bfde127af167bec1fad7dd1c2708","name":"guiding_example_1@8.json","type":"application/json","lastModified":1734516247402.733,"size":3453},{"id":"ad59d5f86615479b69afef8449e2fd80e8954e22bb8ff832c752006590a498c10dd577bc2d0d16f42038bcad28e92fcedb619ab8ca320169c924455c88d5fb1e","href":"https://static.observableusercontent.com/files/ad59d5f86615479b69afef8449e2fd80e8954e22bb8ff832c752006590a498c10dd577bc2d0d16f42038bcad28e92fcedb619ab8ca320169c924455c88d5fb1e","name":"guiding_example_1_test.json","type":"application/json","lastModified":1734518652690.067,"size":3132},{"id":"a42e83fe1333437077eb1360ded39863b9f4f12257f079b40a817a6ad36e91661467f364f4c4faec6ec5d453a69864e707f325605c647abdb9d20cc5c9c5a45f","href":"https://static.observableusercontent.com/files/a42e83fe1333437077eb1360ded39863b9f4f12257f079b40a817a6ad36e91661467f364f4c4faec6ec5d453a69864e707f325605c647abdb9d20cc5c9c5a45f","name":"guiding_example_1_test@1.json","type":"application/json","lastModified":1734518750678.709,"size":3499},{"id":"3857d6a2b33f33a7a05285c8b482d7231bf85a0f3bd4cfc14d8ec45a302aa6dfef812cf94bf80380ae8c20619c54a479f082af48505e789626eeeb9e736410d8","href":"https://static.observableusercontent.com/files/3857d6a2b33f33a7a05285c8b482d7231bf85a0f3bd4cfc14d8ec45a302aa6dfef812cf94bf80380ae8c20619c54a479f082af48505e789626eeeb9e736410d8","name":"guiding_example_1_test@2.json","type":"application/json","lastModified":1734518904066.066,"size":3499},{"id":"3dac7121fe0967c050e66734f97bc902315cbfc05971ac2e2ad6ee61ec8722534781927cd24862fc3033c01a1d292533a2361fcc579af203102600edb7a95000","href":"https://static.observableusercontent.com/files/3dac7121fe0967c050e66734f97bc902315cbfc05971ac2e2ad6ee61ec8722534781927cd24862fc3033c01a1d292533a2361fcc579af203102600edb7a95000","name":"guiding_example_2.json","type":"application/json","lastModified":1734601297264.381,"size":3330},{"id":"4b7d379701c8b634fd0b493dc6dda27cce16641f5f0bc170c9cbf0bc1336ebd84e192c8b2ef0597fa798dc08b892c51d5949f0fe631368876ed13b71e9b17d46","href":"https://static.observableusercontent.com/files/4b7d379701c8b634fd0b493dc6dda27cce16641f5f0bc170c9cbf0bc1336ebd84e192c8b2ef0597fa798dc08b892c51d5949f0fe631368876ed13b71e9b17d46","name":"guiding_example_3.json","type":"application/json","lastModified":1734601893461.581,"size":3476},{"id":"0284f409e5fb93fd5c6e784af407a759f7e2818a9975ab2abfac5d4c43c1bc25918927dccda2815c90c1b9268c6e8f482746c4c6367599319ae7b3ed6d1d642f","href":"https://static.observableusercontent.com/files/0284f409e5fb93fd5c6e784af407a759f7e2818a9975ab2abfac5d4c43c1bc25918927dccda2815c90c1b9268c6e8f482746c4c6367599319ae7b3ed6d1d642f","name":"guiding_example_3@1.json","type":"application/json","lastModified":1734602164080.614,"size":3887},{"id":"b7697f08037099f7f0fdcb8dbf7f12a5744d05b9e2fe3d5e6b1b20691f59b24f891ecce0e9be1eca14209b9db3d99a880325d970e0ea04c279e6fceecfc99e9f","href":"https://static.observableusercontent.com/files/b7697f08037099f7f0fdcb8dbf7f12a5744d05b9e2fe3d5e6b1b20691f59b24f891ecce0e9be1eca14209b9db3d99a880325d970e0ea04c279e6fceecfc99e9f","name":"guitooltest.json","type":"application/json","lastModified":1734602480923.969,"size":1533},{"id":"d44adcf2c9c54a7d513b7605174b9325118ead0ad6c82ef2bb5aa64fc0c8e4d23b200dcefaea37154f9e791050798b810fab463b75ca77b9e50189d467694536","href":"https://static.observableusercontent.com/files/d44adcf2c9c54a7d513b7605174b9325118ead0ad6c82ef2bb5aa64fc0c8e4d23b200dcefaea37154f9e791050798b810fab463b75ca77b9e50189d467694536","name":"guiding_example_3@2.json","type":"application/json","lastModified":1734603069344.85,"size":3473},{"id":"e3ca0eed00dbcf4b157d2f40f0629fb6bf68b868b97a694bef50157ae93e3adf5b6eabce21b01557b7bc47321c5fbf8acd19cea3c06bf7df1de43adb207516fe","href":"https://static.observableusercontent.com/files/e3ca0eed00dbcf4b157d2f40f0629fb6bf68b868b97a694bef50157ae93e3adf5b6eabce21b01557b7bc47321c5fbf8acd19cea3c06bf7df1de43adb207516fe","name":"dev_data_1.json","type":"application/json","lastModified":1736322885987.417,"size":1034},{"id":"847f61f28f43eec6359538c98301cb2c3a05996fd1dad62ee183fee5d70e4e1c65b47f53e29e18b3faf256418e1600f4c5f6659a203a3eb8d60ee38ea240529c","href":"https://static.observableusercontent.com/files/847f61f28f43eec6359538c98301cb2c3a05996fd1dad62ee183fee5d70e4e1c65b47f53e29e18b3faf256418e1600f4c5f6659a203a3eb8d60ee38ea240529c","name":"recursive_propagation_1.json","type":"application/json","lastModified":1736323924745.672,"size":3402},{"id":"0150f68b88b4a4b1c3aa2e2b19232f2525af72eb7b419356d9aa642d5296e9ca5c677efd28f9e84e17ca73a5e1dd4b953baacb390be550171a668815c691d749","href":"https://static.observableusercontent.com/files/0150f68b88b4a4b1c3aa2e2b19232f2525af72eb7b419356d9aa642d5296e9ca5c677efd28f9e84e17ca73a5e1dd4b953baacb390be550171a668815c691d749","name":"complex_example_1.json","type":"application/json","lastModified":1735901391731.037,"size":4661},{"id":"8c1c4ff16aaab3bf2fd25d294ddd91a03b300f852dfe7351845c4f9ed502e9118e441a1f04e04b26cd96903c0f20baed3bd5672287ca554f8d04d4cb1652ec39","href":"https://static.observableusercontent.com/files/8c1c4ff16aaab3bf2fd25d294ddd91a03b300f852dfe7351845c4f9ed502e9118e441a1f04e04b26cd96903c0f20baed3bd5672287ca554f8d04d4cb1652ec39","name":"complex_example_2.json","type":"application/json","lastModified":1735902655794.58,"size":3597},{"id":"61046c1ad28bbf44acc35fb28706e2a7238cad7118a85a5e429516d1716c72de97f16f122f211e1c8e3a86702c5337144ef49100d4b17dbbf12d37009197a0c4","href":"https://static.observableusercontent.com/files/61046c1ad28bbf44acc35fb28706e2a7238cad7118a85a5e429516d1716c72de97f16f122f211e1c8e3a86702c5337144ef49100d4b17dbbf12d37009197a0c4","name":"trajectories_4_length_4.json","type":"application/json","lastModified":1723115034082.433,"size":6508},{"id":"84b1ce910f1a12680974cd3c1149869217cb8beb9371f37965f0b648c6a59f827923d0cb713a5ae7055a0f03db677275ffe24f65cf795b95d849c01714bb0fca","href":"https://static.observableusercontent.com/files/84b1ce910f1a12680974cd3c1149869217cb8beb9371f37965f0b648c6a59f827923d0cb713a5ae7055a0f03db677275ffe24f65cf795b95d849c01714bb0fca","name":"guiding_example_fig.json","type":"application/json","lastModified":1736515483492.046,"size":3715},{"id":"3518419347ce28b6246d8860672c0573176a409990824a6d4dab2666f52321abcc4c66821e4c8c2d51dd5689573f6e646a0ad57ad349937cc816b1681b883128","href":"https://static.observableusercontent.com/files/3518419347ce28b6246d8860672c0573176a409990824a6d4dab2666f52321abcc4c66821e4c8c2d51dd5689573f6e646a0ad57ad349937cc816b1681b883128","name":"combination_example.json","type":"application/json","lastModified":1739269009017.554,"size":4040},{"id":"074e19e150e41c8119b64fc7cf0390be548a0decaba63509a280af752b1b901e05bf6e8b25561680638a948373b2155a804ab2e9eb02f824d6ade9f78f9aab88","href":"https://static.observableusercontent.com/files/074e19e150e41c8119b64fc7cf0390be548a0decaba63509a280af752b1b901e05bf6e8b25561680638a948373b2155a804ab2e9eb02f824d6ade9f78f9aab88","name":"combination_example_2.json","type":"application/json","lastModified":1739269260883.197,"size":4037}] 2d:{"title":"DoI Propagation For Trajectory Embedding Data With Sliders","cells":[{"id":192,"value":"# DoI Propagation For Trajectory Embedding Data With Sliders","pinned":false,"hidden":false,"mode":"md"},{"id":2067,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2382,"value":"Click on a node to select it, then drag the sliders","pinned":false,"hidden":false,"mode":"md"},{"id":1713,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2333,"value":"# Visual Mark Settings","pinned":false,"hidden":false,"mode":"md"},{"id":2336,"value":"viewof nodeRadius = Inputs.range([0, 20], {label: \"Node Radius\", step: 0.1, value: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2338,"value":"viewof edgeWidth = Inputs.range([0, 20], {label: \"Edge Width\", step: 0.1, value: 7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2344,"value":"viewof markerWidth = Inputs.range([0, 20], {label: \"Arrow Marker Width\", step: 0.1, value: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2354,"value":"viewof selectionStrokeWidth = Inputs.range([0, 20], {\n label: \"Node Selection Outline Width\",\n step: 0.1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"Slider Style","pinned":false,"hidden":false,"mode":"md"},{"id":1966,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2134,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1932,"value":"// CELL 1: colorForFactor\n// A utility function globally available.\ncolorForFactor = (factor) => {\n // Interpolate from white (255,255,255) to #d95f02 (217,95,2)\n const r0 = 255,\n g0 = 255,\n b0 = 255;\n const r1 = 217,\n g1 = 95,\n b1 = 2;\n\n const r = Math.round(r0 + (r1 - r0) * factor);\n const g = Math.round(g0 + (g1 - g0) * factor);\n const b = Math.round(b0 + (b1 - b0) * factor);\n return `rgb(${r}, ${g}, ${b})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"nodes = data.nodes.map((d) => ({\n ...d,\n selectionsKey // This ensures changes in selections Map trigger updates\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"links = links_original.map(link => {\n const sourceNode = nodes.find(n => n.id === link.source);\n const targetNode = nodes.find(n => n.id === link.target);\n\n if (sourceNode && targetNode) {\n const dx = sourceNode.coordinate.x - targetNode.coordinate.x;\n const dy = sourceNode.coordinate.y - targetNode.coordinate.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n return { ...link, distance };\n } else {\n return link; // Return the link unchanged if source or target nodes are not found\n }\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"links_original = data.links\n .map((d) => ({ ...d }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"dois = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"selectionsKey = Array.from(selections.entries()).map(([key, value]) => `${key}:${value}`).join(',');","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"click = (x) => {\n if (typeof x !== \"string\") {\n // if click event did not come from interacting with sliders\n toggleSelect(x); // Toggle selected state\n }\n computeAndStoreSpecDois(); // first update dois given each elements individual specification component\n propagateUntilConvergence(); // only then start propagating dois\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"specDois = new Map();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"computeAndStoreSpecDois = () => {\n // Compute for nodes\n nodes.forEach((node) => {\n const specDoi = spec(node);\n const id = getElementId(node);\n specDois.set(id, specDoi);\n });\n\n // Compute for links\n links.forEach((link) => {\n const specDoi = spec(link);\n const id = getElementId(link);\n specDois.set(id, specDoi);\n });\n\n setDoisToSpecDois();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"setDoisToSpecDois = () => {\n specDois.forEach((specDoi, id) => {\n dois.set(id, specDoi);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"doiProp = (x, nodes, links) => Math.max(spec(x), prop(x, nodes, links))","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"prop = (x, nodes, links) => {\n // Initialize variables to store the maximum drop value\n let maxDropValue = -Infinity;\n\n // Iterate over nodes and calculate the drop value\n nodes.forEach((y) => {\n const dropValue = drop(getDoi(y), x, y);\n if (dropValue > maxDropValue) {\n maxDropValue = dropValue;\n }\n });\n\n // Iterate over links and calculate the drop value\n links.forEach((y) => {\n const dropValue = drop(getDoi(y), x, y);\n if (dropValue > maxDropValue) {\n maxDropValue = dropValue;\n }\n });\n\n // Return the maximum drop value\n return maxDropValue;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"getElementId = (x) => {\n let id;\n if (x.type === \"node\") {\n id = x.id;\n } else if (x.type === \"link\") {\n id = x.source + \"-\" + x.target;\n }\n return id;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"toggleSelect = (x) => {\n const id = getElementId(x);\n if (!selections.has(id)) {\n selections.set(id, true);\n } else {\n selections.set(id, !selections.get(id));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"selected = (x) => {\n const id = getElementId(x);\n if (selections.has(id)) {\n return selections.get(id);\n } else {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"dEmbMax = d3.max(\n nodes.flatMap((n1, i) => \n nodes.slice(i + 1).map(n2 => {\n const dx = n1.coordinate.x - n2.coordinate.x;\n const dy = n1.coordinate.y - n2.coordinate.y;\n return Math.sqrt(dx * dx + dy * dy);\n })\n )\n);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"tMax = d3.max(nodes, (d) => d.time) - d3.min(nodes, (d) => d.time)","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"a = nodes[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"b = nodes[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"getPropagationMultiplier = (weight, normalizedDist) => {\n // linear interpolation from factor=1 at dist=0 to factor=weight at dist=1\n return 1 - (1 - weight) * normalizedDist;\n // return weight * (1 - normalizedDist);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1650,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"distTopology = (x, y) => {\n if (x.type == \"node\" && y.type == \"node\") {\n // If they are on different trajectories, there is no topological distance\n if (trajectory(x) !== trajectory(y)) {\n return Infinity;\n } else if (t(x) < t(y)) {\n // Past distances\n return (\n (1 - wPastFuture.future.handle1) +\n wPastFuture.future.handle1 * ((t(y) - t(x)) / tMax)\n );\n } else if (t(x) > t(y)) {\n // Future distances\n return (\n (1 - wPastFuture.past.handle1) +\n wPastFuture.past.handle1 * ((t(x) - t(y)) / tMax)\n );\n } else {\n // Same timestamp\n return 0;\n }\n } else {\n return Infinity;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1980,"value":"dropSimulation = (doiY, relativeDistance, wSetting, radiusSetting) => {\n // If the distance is beyond the radius, there’s no propagation.\n if (relativeDistance > radiusSetting) return 0;\n\n // Otherwise, scale the distance into [0..1] for the piecewise factor.\n const scaledDist = radiusSetting > 0 ? relativeDistance / radiusSetting : 0;\n\n // Compute the multiplier based on the weight and scaled distance.\n const multiplier = getPropagationMultiplier(wSetting, scaledDist);\n\n // Final degree of interest that x inherits from y.\n return doiY * multiplier;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"spec = (x) => selected(x) // specification doi purely based on selection\n// spec = (x) => Math.max(selected(x), normalizedDensityMap.get(getElementId(x))) // spec for max between selection and normalized density\n// spec = (x) => Math.max(selected(x), 1 - t(x) / tMax); // specification doi = max between selection and closeness to time step 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"getSel = (nodes, links) => {\n const selectedNodes = nodes.filter((node) => selected(node));\n const selectedLinks = links.filter((link) => selected(link));\n\n return {\n selectedNodes,\n selectedLinks\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"selections = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"sel = getSel(nodes, links)","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"trajectory = (x) => x.trajectory","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"t = (x) => {\n if (x.type == 'node') {\n return x.time\n } else if (x.type == 'link') {\n const start = nodesMap.get(x.source)\n const end = nodesMap.get(x.target)\n const t1 = start.time;\n const t2 = end.time\n return (t1+t2)/2\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"emb = (x) => {\n if (x.type == \"node\") {\n return x.coordinate;\n } else if (x.type == \"link\") {\n const start = nodesMap.get(x.source);\n const end = nodesMap.get(x.target);\n const x1 = start.coordinate.x;\n const y1 = start.coordinate.y;\n const x2 = end.coordinate.x;\n const y2 = end.coordinate.y;\n return { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"getDoi = (x) => {\n const id = getElementId(x);\n return dois.has(id) ? dois.get(id) : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"dEmb = (x, y) => {\n if (x.type == \"node\" && y.type == \"node\") {\n return dEmbVV(x, y);\n } else if (x.type == \"node\" && y.type == \"link\") {\n return Infinity;\n // return dEmbVE(x,y)\n } else if (x.type == \"link\" && y.type == \"node\") {\n return Infinity;\n // return dEmbVE(y, x); // just to make sure doi of edges is changed at all. could do this by directly setting it based on their start and end nodes\n } else if (x.type == \"link\" && y.type == \"link\") {\n return Infinity;\n // return dEmbEE(x,y)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"dEmbVV = (x, y) => {\n const dx = x.coordinate.x - y.coordinate.x;\n const dy = x.coordinate.y - y.coordinate.y;\n\n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"dEmbVE = (x, y) => {\n return Math.min(dEmbVV(start(y), x), dEmbVV(end(y), x)) + dEmbVV(start(y), end(y)) / 2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"dEmbEE = (x, y) => {\n if(x.id == y.id) { return 0 }\n return Math.min( dEmbVE(start(x),y), dEmbVE(end(x),y) ) + dEmbVV(start(x), end(x))/2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"start = (x) => nodesMap.get(x.source)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"end = (x) => nodesMap.get(x.target)","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"linksMap = {\n const map = {};\n\n links.forEach(link => {\n const sourceNode = nodes.find(n => n.id === link.source);\n const targetNode = nodes.find(n => n.id === link.target);\n\n if (sourceNode && targetNode) {\n const dx = sourceNode.coordinate.x - targetNode.coordinate.x;\n const dy = sourceNode.coordinate.y - targetNode.coordinate.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n const key = `${link.source}-${link.target}`;\n map[key] = { ...link, distance };\n } else {\n const key = `${link.source}-${link.target}`;\n map[key] = { ...link }; // Store the link without distance if nodes are not found\n }\n });\n\n return map;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"nodesMap = new Map(nodes.map((node) => [node.id, { ...node }]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"data = FileAttachment(\"combination_example_2.json\").json()\n// data = FileAttachment(\"guiding_example_fig.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1552,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}