{ // Visualization setup const fixedWidth = 800; const fixedHeight = 700; const narrowThreshold = 800; // Get available width from Observable const availableWidth = width; const isNarrow = availableWidth < narrowThreshold; // Adjust dimensions based on layout const indicatorSpace = 150; const svgWidth = fixedWidth; const svgHeight = isNarrow ? fixedHeight + indicatorSpace : fixedHeight; // Calculate padding to maintain aspect ratio const padding = isNarrow ? {top: 50 + indicatorSpace, bottom: 50, left: 100, right: 100} : {top: 50, bottom: 50, left: 50, right: 150}; const baseScale = 0.4; const indicatorLength = 100; const duration = 400; const ease = d3.easeQuadInOut; // Import positioning functions from Cell 2 const { generateEdges, calculateNodePositions } = nodePositions; // Create main container const container = html`

`; // Create controls const controlsDiv = html`

Dimensions

Starting view

Zoom mode

`; const dimensionsInput = controlsDiv.querySelector('input[name="dimensions"]'); const dimensionsValue = controlsDiv.querySelector('span'); const layoutSelect = controlsDiv.querySelector('select[name="layout"]'); const zoomModeSelect = controlsDiv.querySelector('select[name="zoomMode"]'); const resetButton = controlsDiv.querySelector('button[name="reset"]'); // Update dimensions display dimensionsValue.textContent = dimensionsInput.value; // Create SVG const svg = d3.create("svg") .attr("viewBox", `0 0 ${svgWidth} ${svgHeight}`) .attr("width", isNarrow ? availableWidth : svgWidth) .attr("height", isNarrow ? (availableWidth / svgWidth) * svgHeight : svgHeight) .style("overflow", "visible") .style("touch-action", "none") .style("-webkit-tap-highlight-color", "transparent") .style("-webkit-user-select", "none") .style("user-select", "none"); // Create groups const zoomGroup = svg.append("g").attr("class", "zoom-group"); const legendGroup = svg.append("g").attr("class", "legend-group"); // State variables let draggedNode = null; let fixedNodes = []; let indicatorScale = 1; let dragged = false; let dragStartMouseX, dragStartMouseY; let dragStartNodeX, dragStartNodeY; let savedAverageX, savedAverageY; let zoomMode = "zoom"; let currentZoomTransform = d3.zoomIdentity; // Indicator position function const getIndicatorPosition = () => { if (isNarrow) { return { x: svgWidth - padding.right - 75, y: 125 }; } else { return { x: svgWidth - 75, y: 125 }; } }; // Generate nodes function generateNodes(n) { const nodes = []; const totalNodes = Math.pow(2, n); for (let i = 0; i < totalNodes; i++) { const node = []; for (let j = 0; j < n; j++) { node.push((i >> j) & 1); } let decimalValue = 0; for (let j = 0; j < n; j++) { decimalValue += node[j] * Math.pow(2, j); } nodes.push({ id: i, binary: node, ones: node.reduce((sum, bit) => sum + bit, 0), decimal: decimalValue, x: 0, y: 0 }); } return nodes; } // Generate links function generateLinks(nodes, n) { const links = []; for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const node1 = nodes[i]; const node2 = nodes[j]; let differences = 0; let diffIndex = -1; for (let k = 0; k < n; k++) { if (node1.binary[k] !== node2.binary[k]) { differences++; diffIndex = k; } } if (differences === 1) { const source = node1.ones < node2.ones ? node1 : node2; const target = node1.ones < node2.ones ? node2 : node1; links.push({ source: source, target: target, diffIndex: diffIndex }); } } } return links; } // Calculate indicator scale function calculateIndicatorScale(edges, xScale, yScale) { let maxLength = 0; edges.forEach(edge => { const scaledX = xScale(edge.x) - xScale(0); const scaledY = yScale(edge.y) - yScale(0); const length = Math.sqrt(scaledX * scaledX + scaledY * scaledY); maxLength = Math.max(maxLength, length); }); return indicatorLength / maxLength; } // Calculate node overlap counts and colors function calculateNodeColors(nodes, xScale, yScale) { const nodeRadius = 15; const overlapThreshold = nodeRadius / 2; const colorScale = d3.scaleSequential(d3.interpolateYlOrRd) .domain([1, 8]); const colors = new Map(); nodes.forEach(node => { const nodeScreenX = xScale(node.x); const nodeScreenY = yScale(node.y); let overlapCount = 0; nodes.forEach(otherNode => { if (node === otherNode) return; const otherScreenX = xScale(otherNode.x); const otherScreenY = yScale(otherNode.y); const distance = Math.sqrt( Math.pow(nodeScreenX - otherScreenX, 2) + Math.pow(nodeScreenY - otherScreenY, 2) ); if (distance < overlapThreshold) { overlapCount++; } }); if (overlapCount === 0) { colors.set(node.decimal, "#FFF"); } else { const clampedCount = Math.min(overlapCount, 8); colors.set(node.decimal, colorScale(clampedCount)); } }); return colors; } // Calculate text color based on background color luminosity function calculateTextColor(bgColor) { const color = d3.color(bgColor); if (!color) return "grey"; const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const rLinear = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4); const gLinear = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4); const bLinear = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4); const luminance = 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear; const darkness = 1 - luminance; const greyValue = 128; const textValue = Math.round(greyValue * (1 - darkness)); return `rgb(${textValue}, ${textValue}, ${textValue})`; } // Validate edges and fallback if needed function validateAndFallbackEdges(n, requestedLayout) { try { const testEdges = generateEdges(n, requestedLayout); if (testEdges && testEdges.length === n) { const allPlaceholders = testEdges.every(edge => edge.x === 1 && edge.y === 1); const isValid = !allPlaceholders && testEdges.every(edge => edge.x !== undefined && edge.y !== undefined && !isNaN(edge.x) && !isNaN(edge.y) ); if (isValid) { return { edges: testEdges, layout: requestedLayout, isValid: true }; } } } catch (e) { console.warn(`Layout "${requestedLayout}" failed for dimension ${n}:`, e); } const fallbackLayout = "Petrie Polygon"; console.warn(`Falling back to "${fallbackLayout}" for dimension ${n}`); return { edges: generateEdges(n, fallbackLayout), layout: fallbackLayout, isValid: false }; } // Get all valid layouts for a given dimension function getValidLayoutsForDimension(n) { const allLayouts = [ "POSET", "Double Hamming", "Double Hamming Grid", "Petrie Polygon", "Petrie Polygon Grid", "Grid", "Quads", "Nested Cubes" ]; return allLayouts.filter(layout => { const result = validateAndFallbackEdges(n, layout); return result.isValid; }); } // Update select options based on valid layouts function updateLayoutOptions(n, currentLayout) { const validLayouts = getValidLayoutsForDimension(n); layoutSelect.innerHTML = ''; validLayouts.forEach(layout => { const option = document.createElement('option'); option.value = layout; option.textContent = layout; layoutSelect.appendChild(option); }); if (validLayouts.includes(currentLayout)) { layoutSelect.value = currentLayout; return currentLayout; } else { layoutSelect.value = validLayouts[0]; return validLayouts[0]; } } // Initialize data let n = parseInt(dimensionsInput.value); let layout = layoutSelect.value; layout = updateLayoutOptions(n, layout); let nodes = generateNodes(n); let links = generateLinks(nodes, n); let edges = generateEdges(n, layout); const validated = validateAndFallbackEdges(n, layout); edges = validated.edges; layout = validated.layout; if (validated.layout !== layoutSelect.value) { layoutSelect.value = validated.layout; } calculateNodePositions(nodes, links, edges, n, draggedNode, fixedNodes); // Set scales const xExtent = d3.extent(nodes, d => d.x); const yExtent = d3.extent(nodes, d => d.y); let xScale = d3.scaleLinear() .domain(xExtent) .range([padding.left, svgWidth - padding.right]); let yScale = d3.scaleLinear() .domain(yExtent) .range([svgHeight - padding.bottom, padding.top]); indicatorScale = calculateIndicatorScale(edges, xScale, yScale); // Update scales function (always stretches to fit) function setScale() { const xExtent = d3.extent(nodes, d => d.x); const yExtent = d3.extent(nodes, d => d.y); xScale.domain(xExtent).range([padding.left, svgWidth - padding.right]); yScale.domain(yExtent).range([svgHeight - padding.bottom, padding.top]); indicatorScale = calculateIndicatorScale(edges, xScale, yScale); } // Update scales with uniform aspect ratio (for Auto zoom mode) function setScaleUniform() { const xExtent = d3.extent(nodes, d => d.x); const yExtent = d3.extent(nodes, d => d.y); const dataWidth = xExtent[1] - xExtent[0]; const dataHeight = yExtent[1] - yExtent[0]; const displayWidth = svgWidth - padding.left - padding.right; const displayHeight = svgHeight - padding.top - padding.bottom; const currentXPixelsPerUnit = (xScale.range()[1] - xScale.range()[0]) / (xScale.domain()[1] - xScale.domain()[0]); const currentYPixelsPerUnit = (yScale.range()[0] - yScale.range()[1]) / (yScale.domain()[1] - yScale.domain()[0]); const aspectRatio = currentYPixelsPerUnit / currentXPixelsPerUnit; const maxXPixelsPerUnit = displayWidth / dataWidth; const maxYPixelsPerUnit = displayHeight / dataHeight; const maxScaleFromWidth = maxXPixelsPerUnit; const maxScaleFromHeight = maxYPixelsPerUnit / aspectRatio; const uniformScale = Math.min(maxScaleFromWidth, maxScaleFromHeight); const scaledWidth = dataWidth * uniformScale; const scaledHeight = dataHeight * uniformScale * aspectRatio; const xOffset = (displayWidth - scaledWidth) / 2; const yOffset = (displayHeight - scaledHeight) / 2; xScale.domain(xExtent).range([padding.left + xOffset, padding.left + xOffset + scaledWidth]); yScale.domain(yExtent).range([svgHeight - padding.bottom - yOffset, svgHeight - padding.bottom - yOffset - scaledHeight]); indicatorScale = calculateIndicatorScale(edges, xScale, yScale); } // Helper to update scales based on current zoom mode function updateScales() { if (zoomMode === "auto") { setScale(); } else if (zoomMode === "zoom") { setScaleUniform(); } } // Get zoomed scales function getZoomedScales() { if (zoomMode === "scroll") { return { x: currentZoomTransform.rescaleX(xScale), y: currentZoomTransform.rescaleY(yScale) }; } return { x: xScale, y: yScale }; } // Update visualization with given scales function updateVisualization(xScaleToUse, yScaleToUse) { const nodeColors = calculateNodeColors(nodes, xScaleToUse, yScaleToUse); zoomGroup.selectAll(".node-group") .select(".node") .attr("cx", d => xScaleToUse(d.x)) .attr("cy", d => yScaleToUse(d.y)) .attr("fill", d => nodeColors.get(d.decimal)); zoomGroup.selectAll(".node-group") .select(".label") .attr("x", d => xScaleToUse(d.x)) .attr("y", d => yScaleToUse(d.y)) .attr("fill", d => calculateTextColor(nodeColors.get(d.decimal))); zoomGroup.selectAll(".link") .attr("x1", d => xScaleToUse(d.source.x)) .attr("y1", d => yScaleToUse(d.source.y)) .attr("x2", d => xScaleToUse(d.target.x)) .attr("y2", d => yScaleToUse(d.target.y)); const indicatorPos = getIndicatorPosition(); zoomGroup.selectAll(".edge-indicator") .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); zoomGroup.selectAll(".edge-indicator-circle") .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); } // Setup zoom behavior const zoom = d3.zoom() .filter(event => { if (event.ctrlKey || event.button) return false; if (event.type === 'wheel') { return zoomMode === "scroll"; } return false; }) .scaleExtent([0.5, 5]) .wheelDelta(event => -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.003)) .on("zoom", function(event) { if (zoomMode !== "scroll") return; const centerX = (padding.left + (svgWidth - padding.right)) / 2; const centerY = (padding.top + (svgHeight - padding.bottom)) / 2; const k = event.transform.k; const tx = centerX - k * centerX; const ty = centerY - k * centerY; const transform = d3.zoomIdentity.translate(tx, ty).scale(k); currentZoomTransform = transform; const scales = getZoomedScales(); updateVisualization(scales.x, scales.y); }); svg.call(zoom); // Define drag behaviors let x0, y0; const indicatorDrag = d3.drag() .on("start", function(event, d) { if (event.sourceEvent) { event.sourceEvent.preventDefault(); event.sourceEvent.stopPropagation(); } d3.select(this).raise(); savedAverageX = d3.mean(nodes, node => node.x); savedAverageY = d3.mean(nodes, node => node.y); x0 = xScale.invert(event.x); y0 = yScale.invert(event.y); zoomGroup.selectAll(".node-group") .select(".node") .attr("fill", "white"); zoomGroup.selectAll(".node-group") .select(".label") .attr("fill", "grey"); }) .on("drag", function(event, d) { if (event.sourceEvent) { event.sourceEvent.preventDefault(); event.sourceEvent.stopPropagation(); } dragged = true; const x1 = xScale.invert(event.x); const y1 = yScale.invert(event.y); const dx = x1 - x0; const dy = y1 - y0; d.x += dx * 0.5; d.y += dy * 0.5; calculateNodePositions(nodes, links, edges, n, draggedNode, fixedNodes); const newAverageX = d3.mean(nodes, node => node.x); const newAverageY = d3.mean(nodes, node => node.y); const offsetX = savedAverageX - newAverageX; const offsetY = savedAverageY - newAverageY; nodes.forEach(node => { node.x += offsetX; node.y += offsetY; }); const scales = getZoomedScales(); updateVisualization(scales.x, scales.y); zoomGroup.selectAll(".node-group") .select(".node") .attr("fill", "white"); zoomGroup.selectAll(".node-group") .select(".label") .attr("fill", "grey"); x0 = x1; y0 = y1; }) .on("end", function(event, d) { if (zoomMode === "auto" || zoomMode === "zoom") { updateScales(); } dragged = false; zoomGroup.selectAll(".node-group").raise(); const scales = getZoomedScales(); const indicatorPos = getIndicatorPosition(); zoomGroup.selectAll(".node-group") .select(".node") .transition() .duration(duration) .ease(ease) .attr("cx", d => scales.x(d.x)) .attr("cy", d => scales.y(d.y)) .on("end", function() { const updatedNodeColors = calculateNodeColors(nodes, scales.x, scales.y); zoomGroup.selectAll(".node-group") .select(".node") .attr("fill", d => updatedNodeColors.get(d.decimal)); zoomGroup.selectAll(".node-group") .select(".label") .attr("fill", d => calculateTextColor(updatedNodeColors.get(d.decimal))); }); zoomGroup.selectAll(".node-group") .select(".label") .transition() .duration(duration) .ease(ease) .attr("x", d => scales.x(d.x)) .attr("y", d => scales.y(d.y)); zoomGroup.selectAll(".link") .transition() .duration(duration) .ease(ease) .attr("x1", d => scales.x(d.source.x)) .attr("y1", d => scales.y(d.source.y)) .attr("x2", d => scales.x(d.target.x)) .attr("y2", d => scales.y(d.target.y)); zoomGroup.selectAll(".edge-indicator") .transition() .duration(duration) .ease(ease) .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); zoomGroup.selectAll(".edge-indicator-circle") .transition() .duration(duration) .ease(ease) .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); }); const drag = d3.drag() .on("start", function(event, d) { if (event.sourceEvent) { event.sourceEvent.preventDefault(); event.sourceEvent.stopPropagation(); } d3.select(this.parentNode).raise(); draggedNode = d; dragStartMouseX = event.x; dragStartMouseY = event.y; dragStartNodeX = d.x; dragStartNodeY = d.y; savedAverageX = d3.mean(nodes, node => node.x); savedAverageY = d3.mean(nodes, node => node.y); fixedNodes = []; const nodeColors = new Map(); links.forEach(link => { if (link.source === d) { fixedNodes.push(link.target); nodeColors.set(link.target, edges[link.diffIndex].strokeColor); } else if (link.target === d) { fixedNodes.push(link.source); nodeColors.set(link.source, edges[link.diffIndex].strokeColor); } }); nodes.forEach(node => { if (node === d) { node.distance = 0; } else { let hammingDistance = 0; for (let i = 0; i < d.binary.length; i++) { if (d.binary[i] !== node.binary[i]) { hammingDistance++; } } node.distance = hammingDistance * 2; } }); links.forEach(link => { const sourceDistance = link.source.distance; const targetDistance = link.target.distance; link.distance = Math.max(sourceDistance, targetDistance) + 1; }); const allElements = []; zoomGroup.selectAll(".node-group").each(function(nodeData) { allElements.push({ element: d3.select(this), distance: nodeData.distance, type: 'node' }); }); zoomGroup.selectAll(".link").each(function(linkData) { allElements.push({ element: d3.select(this), distance: linkData.distance, type: 'link' }); }); allElements.sort((a, b) => b.distance - a.distance); allElements.forEach(item => { item.element.raise(); }); const scales = getZoomedScales(); const currentNodeColors = calculateNodeColors(nodes, scales.x, scales.y); zoomGroup.selectAll(".node-group") .select(".node") .attr("fill", node => { if (node === d) return "black"; if (nodeColors.has(node)) return nodeColors.get(node); return currentNodeColors.get(node.decimal); }) .attr("stroke", node => { if (node === d) return "black"; if (nodeColors.has(node)) return "black"; return "grey"; }); zoomGroup.selectAll(".node-group") .select(".label") .attr("fill", node => { if (node === d) return "white"; if (nodeColors.has(node)) return "white"; return calculateTextColor(currentNodeColors.get(node.decimal)); }) .attr("font-weight", node => { if (node === d) return "bold"; if (nodeColors.has(node)) return "bold"; return "normal"; }); }) .on("drag", function(event, d) { if (event.sourceEvent) { event.sourceEvent.preventDefault(); event.sourceEvent.stopPropagation(); } dragged = true; const mouseDeltaX = event.x - dragStartMouseX; const mouseDeltaY = event.y - dragStartMouseY; const scalingFactor = 2 / n; const scaledDeltaX = mouseDeltaX * scalingFactor; const scaledDeltaY = mouseDeltaY * scalingFactor; const newScreenX = xScale(dragStartNodeX) + scaledDeltaX; const newScreenY = yScale(dragStartNodeY) + scaledDeltaY; d.x = xScale.invert(newScreenX); d.y = yScale.invert(newScreenY); const connectedLinks = links.filter(link => link.source === d || link.target === d ); connectedLinks.forEach(link => { const otherNode = link.source === d ? link.target : link.source; const dx = d.x - otherNode.x; const dy = d.y - otherNode.y; const edge = edges[link.diffIndex]; if (link.source === d) { edge.x = -dx; edge.y = -dy; } else { edge.x = dx; edge.y = dy; } }); const activeNodes = [...fixedNodes]; const visitedNodes = new Set([d, ...fixedNodes]); nodes.forEach(node => { if (node !== d && !fixedNodes.includes(node)) { node.x = 0; node.y = 0; } }); while (activeNodes.length > 0) { const currentNode = activeNodes.shift(); const currentLinks = links.filter(link => (link.source === currentNode || link.target === currentNode) ); currentLinks.forEach(link => { const isCurrentSource = link.source === currentNode; const connectedNode = isCurrentSource ? link.target : link.source; if (visitedNodes.has(connectedNode)) return; const edge = edges[link.diffIndex]; if (isCurrentSource) { connectedNode.x = currentNode.x + edge.x; connectedNode.y = currentNode.y + edge.y; } else { connectedNode.x = currentNode.x - edge.x; connectedNode.y = currentNode.y - edge.y; } activeNodes.push(connectedNode); visitedNodes.add(connectedNode); }); } const newAverageX = d3.mean(nodes, node => node.x); const newAverageY = d3.mean(nodes, node => node.y); const offsetX = savedAverageX - newAverageX; const offsetY = savedAverageY - newAverageY; const scales = getZoomedScales(); const currentNodeColors = calculateNodeColors(nodes, scales.x, scales.y); const nodeColorMap = new Map(); links.forEach(link => { if (link.source === d) { nodeColorMap.set(link.target, edges[link.diffIndex].strokeColor); } else if (link.target === d) { nodeColorMap.set(link.source, edges[link.diffIndex].strokeColor); } }); zoomGroup.selectAll(".node-group") .select(".node") .attr("cx", node => scales.x(node.x + offsetX)) .attr("cy", node => scales.y(node.y + offsetY)) .attr("fill", node => { if (node === d) return "black"; if (nodeColorMap.has(node)) return nodeColorMap.get(node); return currentNodeColors.get(node.decimal); }); zoomGroup.selectAll(".node-group") .select(".label") .attr("x", node => scales.x(node.x + offsetX)) .attr("y", node => scales.y(node.y + offsetY)) .attr("fill", node => { if (node === d) return "white"; if (nodeColorMap.has(node)) return "white"; return calculateTextColor(currentNodeColors.get(node.decimal)); }); zoomGroup.selectAll(".link") .attr("x1", d => scales.x(d.source.x + offsetX)) .attr("y1", d => scales.y(d.source.y + offsetY)) .attr("x2", d => scales.x(d.target.x + offsetX)) .attr("y2", d => scales.y(d.target.y + offsetY)); const indicatorPos = getIndicatorPosition(); zoomGroup.selectAll(".edge-indicator") .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); zoomGroup.selectAll(".edge-indicator-circle") .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); }) .on("end", function(event, d) { if(dragged){ const mouseDeltaX = event.x - dragStartMouseX; const mouseDeltaY = event.y - dragStartMouseY; const scalingFactor = 2 / n; const scaledDeltaX = mouseDeltaX * scalingFactor; const scaledDeltaY = mouseDeltaY * scalingFactor; const newScreenX = xScale(dragStartNodeX) + scaledDeltaX; const newScreenY = yScale(dragStartNodeY) + scaledDeltaY; d.x = xScale.invert(newScreenX); d.y = yScale.invert(newScreenY); } dragged = false; const newAverageX = d3.mean(nodes, node => node.x); const newAverageY = d3.mean(nodes, node => node.y); const offsetX = savedAverageX - newAverageX; const offsetY = savedAverageY - newAverageY; nodes.forEach(node => { node.x += offsetX; node.y += offsetY; }); draggedNode = null; fixedNodes = []; if (zoomMode === "auto" || zoomMode === "zoom") { updateScales(); } const scales = getZoomedScales(); const finalNodeColors = calculateNodeColors(nodes, scales.x, scales.y); zoomGroup.selectAll(".node-group") .select(".node") .attr("fill", node => finalNodeColors.get(node.decimal)) .attr("stroke", "grey"); zoomGroup.selectAll(".node-group") .select(".label") .attr("fill", node => calculateTextColor(finalNodeColors.get(node.decimal))) .attr("font-weight", "normal"); zoomGroup.selectAll(".node-group").raise(); const indicatorPos = getIndicatorPosition(); zoomGroup.selectAll(".node-group") .select(".node") .transition() .duration(duration) .ease(ease) .attr("cx", d => scales.x(d.x)) .attr("cy", d => scales.y(d.y)); zoomGroup.selectAll(".node-group") .select(".label") .transition() .duration(duration) .ease(ease) .attr("x", d => scales.x(d.x)) .attr("y", d => scales.y(d.y)); zoomGroup.selectAll(".link") .transition() .duration(duration) .ease(ease) .attr("x1", d => scales.x(d.source.x)) .attr("y1", d => scales.y(d.source.y)) .attr("x2", d => scales.x(d.target.x)) .attr("y2", d => scales.y(d.target.y)); zoomGroup.selectAll(".edge-indicator") .transition() .duration(duration) .ease(ease) .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); zoomGroup.selectAll(".edge-indicator-circle") .transition() .duration(duration) .ease(ease) .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); }); // Draw visualization function draw() { zoomGroup.selectAll("*").remove(); const scales = getZoomedScales(); const nodeColors = calculateNodeColors(nodes, scales.x, scales.y); const linkElements = zoomGroup.selectAll(".link") .data(links) .enter() .append("line") .attr("class", "link") .attr("x1", d => scales.x(d.source.x)) .attr("y1", d => scales.y(d.source.y)) .attr("x2", d => scales.x(d.target.x)) .attr("y2", d => scales.y(d.target.y)) .attr("stroke", d => edges[d.diffIndex].strokeColor) .attr("stroke-width", 2) .attr("opacity", 0.7); const nodeGroups = zoomGroup.selectAll(".node-group") .data(nodes) .enter() .append("g") .attr("class", "node-group") .style("cursor", "pointer"); nodeGroups.append("circle") .attr("class", "node") .attr("cx", d => scales.x(d.x)) .attr("cy", d => scales.y(d.y)) .attr("r", 15) .attr("fill", d => nodeColors.get(d.decimal)) .attr("stroke", "grey") .attr("stroke-width", 1.5) .style("touch-action", "none"); nodeGroups.append("text") .attr("class", "label") .attr("x", d => scales.x(d.x)) .attr("y", d => scales.y(d.y)) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("font-weight", "normal") .attr("fill", d => calculateTextColor(nodeColors.get(d.decimal))) .attr("pointer-events", "none") .style("user-select", "none") .style("-webkit-user-select", "none") .text(d => d.decimal); const indicatorPos = getIndicatorPosition(); const edgeIndicators = zoomGroup.selectAll(".edge-indicator") .data(edges) .enter() .append("line") .attr("class", "edge-indicator") .attr("x1", indicatorPos.x) .attr("y1", indicatorPos.y) .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }) .attr("stroke", d => d.strokeColor) .attr("stroke-width", 3) .attr("opacity", 0.8); const indicatorCircles = zoomGroup.selectAll(".edge-indicator-circle") .data(edges) .enter() .append("circle") .attr("class", "edge-indicator-circle") .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }) .attr("r", 10) .attr("fill", d => d.strokeColor) .style("cursor", "pointer") .style("touch-action", "none"); indicatorCircles.call(indicatorDrag); nodeGroups.select(".node").call(drag); } // Draw static legend const legendX = svgWidth - 110; const legendY = svgHeight - 35; const legendWidth = 100; const legendHeight = 12; const numSteps = 8; const stepWidth = legendWidth / numSteps; const colorScale = d3.scaleSequential(d3.interpolateYlOrRd).domain([1, 8]); legendGroup.append("text") .attr("x", legendX + legendWidth / 2) .attr("y", legendY - 5) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("font-weight", "normal") .attr("fill", "#333") .text("Node Overlap"); for (let i = 0; i < numSteps; i++) { legendGroup.append("rect") .attr("x", legendX + i * stepWidth) .attr("y", legendY + 5) .attr("width", stepWidth) .attr("height", legendHeight) .attr("fill", colorScale(i + 1)) .attr("stroke", "none"); } for (let i = 0; i < numSteps; i++) { legendGroup.append("text") .attr("x", legendX + (i + 0.5) * stepWidth) .attr("y", legendY + legendHeight + 16) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "9px") .attr("fill", "#666") .text(i < numSteps - 1 ? (i + 1).toString() : "8+"); } // Initial draw draw(); // Event handlers dimensionsInput.addEventListener('input', () => { dimensionsValue.textContent = dimensionsInput.value; const newN = parseInt(dimensionsInput.value); const oldN = n; if (newN === oldN) return; const newLayout = updateLayoutOptions(newN, layout); layout = newLayout; zoomGroup.selectAll("*").interrupt(); const oldNodeScreenPositions = new Map(); const scales = getZoomedScales(); nodes.forEach(node => { oldNodeScreenPositions.set(node.decimal, { screenX: scales.x(node.x), screenY: scales.y(node.y) }); }); const indicatorPos = getIndicatorPosition(); const oldIndicatorScreenPositions = new Map(); edges.forEach((edge, i) => { const scaledX = xScale(edge.x) - xScale(0); const scaledY = yScale(edge.y) - yScale(0); oldIndicatorScreenPositions.set(i, { x: indicatorPos.x + scaledX * indicatorScale, y: indicatorPos.y + scaledY * indicatorScale }); }); n = newN; const newNodes = generateNodes(n); const newLinks = generateLinks(newNodes, n); const newEdges = generateEdges(n, layout); calculateNodePositions(newNodes, newLinks, newEdges, n, draggedNode, fixedNodes); nodes = newNodes; links = newLinks; edges = newEdges; setScale(); currentZoomTransform = d3.zoomIdentity; const newScales = getZoomedScales(); const newNodeScreenPositions = new Map(); nodes.forEach(node => { newNodeScreenPositions.set(node.decimal, { screenX: newScales.x(node.x), screenY: newScales.y(node.y) }); }); const newIndicatorPos = getIndicatorPosition(); const newIndicatorScreenPositions = new Map(); edges.forEach((edge, i) => { const scaledX = xScale(edge.x) - xScale(0); const scaledY = yScale(edge.y) - yScale(0); newIndicatorScreenPositions.set(i, { x: newIndicatorPos.x + scaledX * indicatorScale, y: newIndicatorPos.y + scaledY * indicatorScale }); }); const minN = Math.min(oldN, newN); const maxDecimal = Math.pow(2, minN); const persistentNodes = nodes.filter(node => node.decimal < maxDecimal); const addingNodes = nodes.filter(node => node.decimal >= maxDecimal); const removingNodeDecimals = []; for (let i = maxDecimal; i < Math.pow(2, Math.max(oldN, newN)); i++) { if (i < Math.pow(2, oldN) && i >= Math.pow(2, newN)) { removingNodeDecimals.push(i); } } const addingNodeParents = new Map(); if (newN > oldN) { addingNodes.forEach(addNode => { const parentDecimal = addNode.decimal & (maxDecimal - 1); const parentNode = persistentNodes.find(n => n.decimal === parentDecimal); if (parentNode) { addingNodeParents.set(addNode.decimal, parentNode); } }); } const removingNodeTargets = new Map(); if (newN < oldN) { removingNodeDecimals.forEach(decimal => { const targetDecimal = decimal & (maxDecimal - 1); const targetNode = persistentNodes.find(n => n.decimal === targetDecimal); if (targetNode) { removingNodeTargets.set(decimal, targetNode); } }); } zoomGroup.selectAll("*").remove(); const nodePositionInterpolators = new Map(); persistentNodes.forEach(node => { const oldPos = oldNodeScreenPositions.get(node.decimal); const newPos = newNodeScreenPositions.get(node.decimal); if (oldPos && newPos) { nodePositionInterpolators.set(node.decimal, { x: d3.interpolate(oldPos.screenX, newPos.screenX), y: d3.interpolate(oldPos.screenY, newPos.screenY) }); } }); addingNodes.forEach(node => { const parent = addingNodeParents.get(node.decimal); if (parent) { const parentOldPos = oldNodeScreenPositions.get(parent.decimal); const nodeNewPos = newNodeScreenPositions.get(node.decimal); if (parentOldPos && nodeNewPos) { nodePositionInterpolators.set(node.decimal, { x: d3.interpolate(parentOldPos.screenX, nodeNewPos.screenX), y: d3.interpolate(parentOldPos.screenY, nodeNewPos.screenY) }); } } }); removingNodeDecimals.forEach(decimal => { const oldPos = oldNodeScreenPositions.get(decimal); const targetNode = removingNodeTargets.get(decimal); if (oldPos && targetNode) { const targetNewPos = newNodeScreenPositions.get(targetNode.decimal); if (targetNewPos) { nodePositionInterpolators.set(decimal, { x: d3.interpolate(oldPos.screenX, targetNewPos.screenX), y: d3.interpolate(oldPos.screenY, targetNewPos.screenY) }); } } }); if (newN < oldN) { const removingNodeSet = new Set(removingNodeDecimals); const oldNodes = generateNodes(oldN); const oldLinksAll = generateLinks(oldNodes, oldN); const oldValidated = validateAndFallbackEdges(oldN, layout); const oldEdges = oldValidated.edges; oldLinksAll.forEach(link => { const sourceDecimal = link.source.decimal; const targetDecimal = link.target.decimal; const sourceRemoving = removingNodeSet.has(sourceDecimal); const targetRemoving = removingNodeSet.has(targetDecimal); if (!sourceRemoving && !targetRemoving) return; const sourceInterp = nodePositionInterpolators.get(sourceDecimal); const targetInterp = nodePositionInterpolators.get(targetDecimal); if (!sourceInterp || !targetInterp) return; const bothRemoving = sourceRemoving && targetRemoving; zoomGroup.append("line") .attr("class", "removing-link") .attr("x1", sourceInterp.x(0)) .attr("y1", sourceInterp.y(0)) .attr("x2", targetInterp.x(0)) .attr("y2", targetInterp.y(0)) .attr("stroke", oldEdges[link.diffIndex].strokeColor) .attr("stroke-width", 2) .attr("opacity", 0.7) .transition() .duration(duration) .ease(ease) .attrTween("x1", () => t => sourceInterp.x(t)) .attrTween("y1", () => t => sourceInterp.y(t)) .attrTween("x2", () => t => targetInterp.x(t)) .attrTween("y2", () => t => targetInterp.y(t)) .attr("opacity", bothRemoving ? 0.7 : 0) .on("end", function() { if (bothRemoving) { d3.select(this).remove(); } }) .end() .catch(() => {}); }); } links.forEach(link => { const sourceInterp = nodePositionInterpolators.get(link.source.decimal); const targetInterp = nodePositionInterpolators.get(link.target.decimal); if (!sourceInterp || !targetInterp) return; zoomGroup.append("line") .attr("class", "link") .attr("x1", sourceInterp.x(0)) .attr("y1", sourceInterp.y(0)) .attr("x2", targetInterp.x(0)) .attr("y2", targetInterp.y(0)) .attr("stroke", edges[link.diffIndex].strokeColor) .attr("stroke-width", 2) .attr("opacity", 0.7) .transition() .duration(duration) .ease(ease) .attrTween("x1", () => t => sourceInterp.x(t)) .attrTween("y1", () => t => sourceInterp.y(t)) .attrTween("x2", () => t => targetInterp.x(t)) .attrTween("y2", () => t => targetInterp.y(t)); }); if (newN < oldN) { removingNodeDecimals.forEach(decimal => { const interp = nodePositionInterpolators.get(decimal); if (!interp) return; const nodeGroup = zoomGroup.append("g") .attr("class", "removing-node-group"); nodeGroup.append("circle") .attr("cx", interp.x(0)) .attr("cy", interp.y(0)) .attr("r", 15) .attr("fill", "#FFF") .attr("stroke", "grey") .attr("stroke-width", 1.5) .transition() .duration(duration) .ease(ease) .attrTween("cx", () => t => interp.x(t)) .attrTween("cy", () => t => interp.y(t)) .remove(); nodeGroup.append("text") .attr("x", interp.x(0)) .attr("y", interp.y(0)) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "grey") .attr("pointer-events", "none") .style("user-select", "none") .text(decimal) .transition() .duration(duration) .ease(ease) .attrTween("x", () => t => interp.x(t)) .attrTween("y", () => t => interp.y(t)) .remove(); }); } let transitionCount = 0; const totalNodes = nodes.length; addingNodes.forEach(node => { const interp = nodePositionInterpolators.get(node.decimal); if (!interp) return; const nodeGroup = zoomGroup.append("g") .attr("class", "node-group") .style("cursor", "pointer"); nodeGroup.append("circle") .attr("class", "node") .attr("cx", interp.x(0)) .attr("cy", interp.y(0)) .attr("r", 15) .attr("fill", "#FFF") .attr("stroke", "grey") .attr("stroke-width", 1.5) .style("touch-action", "none") .transition() .duration(duration) .ease(ease) .attrTween("cx", () => t => interp.x(t)) .attrTween("cy", () => t => interp.y(t)) .on("end", function() { transitionCount++; if (transitionCount === totalNodes) { draw(); } }); nodeGroup.append("text") .attr("class", "label") .attr("x", interp.x(0)) .attr("y", interp.y(0)) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "grey") .attr("pointer-events", "none") .style("user-select", "none") .text(node.decimal) .transition() .duration(duration) .ease(ease) .attrTween("x", () => t => interp.x(t)) .attrTween("y", () => t => interp.y(t)); }); persistentNodes.forEach(node => { const interp = nodePositionInterpolators.get(node.decimal); if (!interp) return; const nodeGroup = zoomGroup.append("g") .attr("class", "node-group") .style("cursor", "pointer"); nodeGroup.append("circle") .attr("class", "node") .attr("cx", interp.x(0)) .attr("cy", interp.y(0)) .attr("r", 15) .attr("fill", "#FFF") .attr("stroke", "grey") .attr("stroke-width", 1.5) .style("touch-action", "none") .transition() .duration(duration) .ease(ease) .attrTween("cx", () => t => interp.x(t)) .attrTween("cy", () => t => interp.y(t)) .on("end", function() { transitionCount++; if (transitionCount === totalNodes) { draw(); } }); nodeGroup.append("text") .attr("class", "label") .attr("x", interp.x(0)) .attr("y", interp.y(0)) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "grey") .attr("pointer-events", "none") .style("user-select", "none") .text(node.decimal) .transition() .duration(duration) .ease(ease) .attrTween("x", () => t => interp.x(t)) .attrTween("y", () => t => interp.y(t)); }); const minDim = Math.min(oldN, newN); const persistentIndicators = edges.slice(0, minDim); const addingIndicators = edges.slice(minDim); const removingIndicatorIndices = []; for (let i = minDim; i < oldN; i++) { removingIndicatorIndices.push(i); } if (newN < oldN) { const oldValidatedForColor = validateAndFallbackEdges(oldN, layout); const oldEdgesForColor = oldValidatedForColor.edges; removingIndicatorIndices.forEach(index => { const oldPos = oldIndicatorScreenPositions.get(index); if (!oldPos) return; const oldEdge = oldEdgesForColor[index]; zoomGroup.append("line") .attr("class", "removing-edge-indicator") .attr("x1", indicatorPos.x) .attr("y1", indicatorPos.y) .attr("x2", oldPos.x) .attr("y2", oldPos.y) .attr("stroke", oldEdge.strokeColor) .attr("stroke-width", 3) .attr("opacity", 0.8) .transition() .duration(duration) .ease(ease) .attr("x2", indicatorPos.x) .attr("y2", indicatorPos.y) .attr("opacity", 0) .remove(); zoomGroup.append("circle") .attr("class", "removing-edge-indicator-circle") .attr("cx", oldPos.x) .attr("cy", oldPos.y) .attr("r", 10) .attr("fill", oldEdge.strokeColor) .attr("opacity", 1) .transition() .duration(duration) .ease(ease) .attr("cx", indicatorPos.x) .attr("cy", indicatorPos.y) .attr("opacity", 0) .remove(); }); } persistentIndicators.forEach((edge, i) => { const oldPos = oldIndicatorScreenPositions.get(i); const newPos = newIndicatorScreenPositions.get(i); const startX = oldPos ? oldPos.x : newIndicatorPos.x; const startY = oldPos ? oldPos.y : newIndicatorPos.y; zoomGroup.append("line") .attr("class", "edge-indicator") .attr("x1", newIndicatorPos.x) .attr("y1", newIndicatorPos.y) .attr("x2", startX) .attr("y2", startY) .attr("stroke", edge.strokeColor) .attr("stroke-width", 3) .attr("opacity", 0.8) .transition() .duration(duration) .ease(ease) .attr("x2", newPos.x) .attr("y2", newPos.y); zoomGroup.append("circle") .attr("class", "edge-indicator-circle") .attr("cx", startX) .attr("cy", startY) .attr("r", 10) .attr("fill", edge.strokeColor) .style("cursor", "pointer") .style("touch-action", "none") .transition() .duration(duration) .ease(ease) .attr("cx", newPos.x) .attr("cy", newPos.y); }); if (newN > oldN) { addingIndicators.forEach((edge, i) => { const actualIndex = minDim + i; const newPos = newIndicatorScreenPositions.get(actualIndex); zoomGroup.append("line") .attr("class", "edge-indicator") .attr("x1", newIndicatorPos.x) .attr("y1", newIndicatorPos.y) .attr("x2", newIndicatorPos.x) .attr("y2", newIndicatorPos.y) .attr("stroke", edge.strokeColor) .attr("stroke-width", 3) .attr("opacity", 0) .transition() .duration(duration) .ease(ease) .attr("x2", newPos.x) .attr("y2", newPos.y) .attr("opacity", 0.8); zoomGroup.append("circle") .attr("class", "edge-indicator-circle") .attr("cx", newIndicatorPos.x) .attr("cy", newIndicatorPos.y) .attr("r", 10) .attr("fill", edge.strokeColor) .style("cursor", "pointer") .style("touch-action", "none") .attr("opacity", 0) .transition() .duration(duration) .ease(ease) .attr("cx", newPos.x) .attr("cy", newPos.y) .attr("opacity", 1); }); } setTimeout(() => { zoomGroup.selectAll(".edge-indicator-circle").call(indicatorDrag); }, duration); }); layoutSelect.addEventListener('change', () => { layout = layoutSelect.value; edges = generateEdges(n, layout); calculateNodePositions(nodes, links, edges, n, draggedNode, fixedNodes); setScale(); const indicatorPos = getIndicatorPosition(); const scales = getZoomedScales(); const nodeColors = calculateNodeColors(nodes, scales.x, scales.y); zoomGroup.selectAll(".node-group") .select(".node") .transition() .duration(duration) .ease(ease) .attr("cx", d => scales.x(d.x)) .attr("cy", d => scales.y(d.y)) .attr("fill", d => nodeColors.get(d.decimal)); zoomGroup.selectAll(".node-group") .select(".label") .transition() .duration(duration) .ease(ease) .attr("x", d => scales.x(d.x)) .attr("y", d => scales.y(d.y)) .attr("fill", d => calculateTextColor(nodeColors.get(d.decimal))); zoomGroup.selectAll(".link") .transition() .duration(duration) .ease(ease) .attr("x1", d => scales.x(d.source.x)) .attr("y1", d => scales.y(d.source.y)) .attr("x2", d => scales.x(d.target.x)) .attr("y2", d => scales.y(d.target.y)); zoomGroup.selectAll(".edge-indicator") .data(edges, d => d.index) .transition() .duration(duration) .ease(ease) .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }) .attr("stroke", d => d.strokeColor); zoomGroup.selectAll(".edge-indicator-circle") .data(edges, d => d.index) .transition() .duration(duration) .ease(ease) .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }) .attr("fill", d => d.strokeColor); }); zoomModeSelect.addEventListener('change', () => { zoomMode = zoomModeSelect.value; if (zoomMode === "auto" || zoomMode === "zoom") { currentZoomTransform = d3.zoomIdentity; svg.call(zoom.transform, d3.zoomIdentity); setScale(); const scales = getZoomedScales(); const nodeColors = calculateNodeColors(nodes, scales.x, scales.y); const indicatorPos = getIndicatorPosition(); zoomGroup.selectAll(".node-group") .select(".node") .transition() .duration(duration) .ease(ease) .attr("cx", d => scales.x(d.x)) .attr("cy", d => scales.y(d.y)) .attr("fill", d => nodeColors.get(d.decimal)); zoomGroup.selectAll(".node-group") .select(".label") .transition() .duration(duration) .ease(ease) .attr("x", d => scales.x(d.x)) .attr("y", d => scales.y(d.y)) .attr("fill", d => calculateTextColor(nodeColors.get(d.decimal))); zoomGroup.selectAll(".link") .transition() .duration(duration) .ease(ease) .attr("x1", d => scales.x(d.source.x)) .attr("y1", d => scales.y(d.source.y)) .attr("x2", d => scales.x(d.target.x)) .attr("y2", d => scales.y(d.target.y)); zoomGroup.selectAll(".edge-indicator") .transition() .duration(duration) .ease(ease) .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); zoomGroup.selectAll(".edge-indicator-circle") .transition() .duration(duration) .ease(ease) .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); } }); resetButton.addEventListener('click', () => { edges = generateEdges(n, layout); calculateNodePositions(nodes, links, edges, n, draggedNode, fixedNodes); setScale(); currentZoomTransform = d3.zoomIdentity; svg.transition() .duration(duration) .ease(ease) .call(zoom.transform, d3.zoomIdentity); const nodeColors = calculateNodeColors(nodes, xScale, yScale); zoomGroup.selectAll(".node-group") .select(".node") .transition() .duration(duration) .ease(ease) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("fill", d => nodeColors.get(d.decimal)); zoomGroup.selectAll(".node-group") .select(".label") .transition() .duration(duration) .ease(ease) .attr("x", d => xScale(d.x)) .attr("y", d => yScale(d.y)) .attr("fill", d => calculateTextColor(nodeColors.get(d.decimal))); zoomGroup.selectAll(".link") .transition() .duration(duration) .ease(ease) .attr("x1", d => xScale(d.source.x)) .attr("y1", d => yScale(d.source.y)) .attr("x2", d => xScale(d.target.x)) .attr("y2", d => yScale(d.target.y)); const indicatorPos = getIndicatorPosition(); zoomGroup.selectAll(".edge-indicator") .data(edges, d => d.index) .transition() .duration(duration) .ease(ease) .attr("x2", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("y2", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); zoomGroup.selectAll(".edge-indicator-circle") .data(edges, d => d.index) .transition() .duration(duration) .ease(ease) .attr("cx", d => { const scaledX = xScale(d.x) - xScale(0); return indicatorPos.x + scaledX * indicatorScale; }) .attr("cy", d => { const scaledY = yScale(d.y) - yScale(0); return indicatorPos.y + scaledY * indicatorScale; }); }); container.appendChild(controlsDiv); container.appendChild(svg.node()); return container; }