chart = { // 1. Construct the DOM Container const container = html`

`; // 2. Select DOM elements const chartDiv = container.querySelector("#viz-canvas"); const reorgBtn = container.querySelector("#reorg-btn"); const resetBtn = container.querySelector("#reset-btn"); // 3. Setup core variables for Side-by-Side const width = 1000, height = 550; const networkWidth = 500, networkHeight = 550; const matrixSize = 340; const matrixOffset = { x: 550, y: 100 }; let nodes = Array.from({length: 12}, (_, i) => ({ id: i })); let activeNodes = new Set(nodes.map(n => n.id)); const originalLinksData = [ { source: 0, target: 1 }, { source: 0, target: 2 }, { source: 0, target: 3 }, { source: 1, target: 2 }, { source: 1, target: 3 }, { source: 2, target: 3 }, { source: 4, target: 6 }, { source: 4, target: 7 }, { source: 5, target: 6 }, { source: 5, target: 7 }, { source: 8, target: 9 }, { source: 9, target: 10 }, { source: 10, target: 11 }, { source: 11, target: 8 }, { source: 8, target: 10 }, { source: 3, target: 4 }, { source: 7, target: 8 } ]; let currentLinks = JSON.parse(JSON.stringify(originalLinksData)); let originalLinks = JSON.parse(JSON.stringify(originalLinksData)); let currentStructures = []; let originalStructures = []; let currentOrder = nodes.map(n => n.id); let isReorganizing = false; const xScale = d3.scaleBand().range([0, matrixSize]).padding(0.05); const yScale = d3.scaleBand().range([0, matrixSize]).padding(0.05); const structureColors = { clique: '#ff6b6b', biclique: '#51cf66', cluster: '#845ef7' }; // 4. Create SVG Layers with Zoom Support const svg = d3.select(chartDiv).append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`); // --- STATIC LEGEND --- const legendData = [ { label: "Clique", color: structureColors.clique }, { label: "Biclique", color: structureColors.biclique }, { label: "Cluster", color: structureColors.cluster }, { label: "Direct Edge", color: "#333" }, { label: "No Edge", color: "#eee" } ]; const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(20, 20)"); const legendItems = legend.selectAll(".legend-item") .data(legendData) .enter().append("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 25})`); legendItems.append("rect") .attr("width", 15) .attr("height", 15) .style("fill", d => d.color) .style("stroke", "#ccc") .style("stroke-width", "0.5px") .attr("rx", 3); legendItems.append("text") .attr("x", 25) .attr("y", 12) .style("font-size", "12px") .style("fill", "#555") .style("font-family", "sans-serif") .text(d => d.label); // Master group for zooming const zoomGroup = svg.append("g"); const zoom = d3.zoom() .scaleExtent([0.2, 4]) .on("zoom", (event) => { zoomGroup.attr("transform", event.transform); }); svg.call(zoom) .call(zoom.transform, d3.zoomIdentity); const networkLayer = zoomGroup.append("g").attr("class", "network"); const matrixArcsTop = zoomGroup.append("g").attr("transform", `translate(${matrixOffset.x}, ${matrixOffset.y})`); const matrixArcsLeft = zoomGroup.append("g").attr("transform", `translate(${matrixOffset.x}, ${matrixOffset.y})`); const matrixLayer = zoomGroup.append("g").attr("transform", `translate(${matrixOffset.x}, ${matrixOffset.y})`); const ghostHullGroup = networkLayer.append("g").attr("class", "ghost-hulls"); const hullGroup = networkLayer.append("g").attr("class", "hulls"); const ghostLinkGroup = networkLayer.append("g").attr("class", "ghost-links"); const linkGroup = networkLayer.append("g").attr("class", "links"); const nodeGroup = networkLayer.append("g").attr("class", "nodes"); const simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-200)) .force("center", d3.forceCenter(networkWidth / 2, networkHeight / 2)) .force("collide", d3.forceCollide().radius(30)); // 5. Topology Engine function detectTopologies(linkSet, validNodes) { let activeNodeIds = validNodes.map(n => n.id); let adj = Array(nodes.length).fill(null).map(() => Array(nodes.length).fill(0)); let adjList = Array(nodes.length).fill(null).map(() => []); linkSet.forEach(l => { let u = l.source.id ?? l.source; let v = l.target.id ?? l.target; if (activeNodes.has(u) && activeNodes.has(v)) { adj[u][v] = 1; adj[v][u] = 1; adjList[u].push(v); adjList[v].push(u); } }); let unassigned = new Set(activeNodeIds); let found = []; const getDensity = (group) => { let edges = 0; for(let i=0; i { if (!unassigned.has(n)) return; let potential = [n]; unassigned.forEach(cand => { if (cand !== n && potential.every(p => adj[p][cand])) potential.push(cand); }); if (potential.length >= 3) { // BUG FIX: Generate stable unique IDs for Cliques found.push({ id: `clique-${potential.slice().sort().join('-')}`, type: 'clique', nodes: potential, color: structureColors.clique }); potential.forEach(p => unassigned.delete(p)); } }); let tempUnassigned = Array.from(unassigned); for(let i=0; i unassigned.has(v)); if(setB.length < 2) continue; let setA = tempUnassigned.filter(v => setB.every(b => adj[v][b])); if (setA.length >= 2 && setB.length >= 2 && getDensity(setA) === 0 && getDensity(setB) === 0) { let merged = [...setA, ...setB]; // BUG FIX: Generate stable unique IDs for Bicliques found.push({ id: `biclique-${merged.slice().sort().join('-')}`, type: 'biclique', nodes: merged, setA, setB, color: structureColors.biclique }); merged.forEach(p => unassigned.delete(p)); } } while(unassigned.size > 0) { let start = Array.from(unassigned)[0]; let cluster = [start]; let queue = [start]; unassigned.delete(start); while(queue.length > 0) { let curr = queue.shift(); adjList[curr].forEach(neighbor => { if(unassigned.has(neighbor)) { cluster.push(neighbor); queue.push(neighbor); unassigned.delete(neighbor); } }); } if (cluster.length >= 3 && getDensity(cluster) > 0.4) { // BUG FIX: Generate stable unique IDs for Clusters found.push({ id: `cluster-${cluster.slice().sort().join('-')}`, type: 'cluster', nodes: cluster, color: structureColors.cluster }); } } return found; } originalStructures = detectTopologies(originalLinks, nodes); // 6. Main Render Loop function updateVisualization() { let activeLinks = currentLinks.filter(l => activeNodes.has(l.source.id ?? l.source) && activeNodes.has(l.target.id ?? l.target)); let simNodes = nodes.filter(n => activeNodes.has(n.id)); currentStructures = detectTopologies(activeLinks, simNodes); xScale.domain(currentOrder); yScale.domain(currentOrder); let matrixData = []; nodes.forEach(source => { nodes.forEach(target => { let idxS = currentOrder.indexOf(source.id); let idxT = currentOrder.indexOf(target.id); let isUpper = idxS < idxT; let isLower = idxS > idxT; let isDiag = idxS === idxT; let isNodeActive = activeNodes.has(source.id) && activeNodes.has(target.id); let targetLinks = isUpper ? currentLinks : originalLinks; let targetStructs = isUpper ? currentStructures : originalStructures; let isLinked = targetLinks.some(l => ((l.source.id ?? l.source) === source.id && (l.target.id ?? l.target) === target.id) || ((l.source.id ?? l.source) === target.id && (l.target.id ?? l.target) === source.id) ); let struct = targetStructs.find(s => s.nodes.includes(source.id) && s.nodes.includes(target.id)); let fillColor = isLinked ? (struct ? struct.color : '#333') : '#eee'; matrixData.push({ source: source.id, target: target.id, isLinked, struct, fillColor, isUpper, isLower, isDiag, isNodeActive }); }); }); const cells = matrixLayer.selectAll(".cell").data(matrixData, d => `${d.source}-${d.target}`); cells.enter().append("rect") .attr("class", d => `cell ${d.isDiag ? 'diagonal' : (d.isUpper ? 'upper-triangle' : 'lower-triangle')} ${d.isLinked ? 'matrix-cell' : 'matrix-empty'} ${!d.isNodeActive && !d.isDiag ? 'inactive-cell' : ''} ${d.isDiag && !d.isNodeActive ? 'inactive' : ''}`) .attr("x", d => xScale(d.target)).attr("y", d => yScale(d.source)) .attr("width", xScale.bandwidth()).attr("height", yScale.bandwidth()) .style("fill", d => d.isDiag ? "" : (d.isLinked ? d.fillColor : "")) .on("click", handleCellClick) .on("mouseover", (e, d) => handleMatrixHover(d, true)) .on("mouseout", (e, d) => handleMatrixHover(d, false)) .merge(cells) .transition().duration(isReorganizing ? 600 : 0) .attr("x", d => xScale(d.target)).attr("y", d => yScale(d.source)) .attr("class", d => `cell ${d.isDiag ? 'diagonal' : (d.isUpper ? 'upper-triangle' : 'lower-triangle')} ${d.isLinked ? 'matrix-cell' : 'matrix-empty'} ${!d.isNodeActive && !d.isDiag ? 'inactive-cell' : ''} ${d.isDiag && !d.isNodeActive ? 'inactive' : ''}`) .style("fill", d => d.isDiag ? "" : (d.isLinked ? d.fillColor : "")); cells.exit().remove(); const bottomLabels = matrixLayer.selectAll(".col-label").data(nodes, d => d.id); bottomLabels.enter().append("text").attr("class", "axis-label col-label").attr("text-anchor", "middle").text(d => d.id) .merge(bottomLabels).transition().duration(isReorganizing ? 600 : 0) .style("opacity", d => activeNodes.has(d.id) ? 1 : 0.2) .attr("x", d => xScale(d.id) + xScale.bandwidth() / 2).attr("y", matrixSize + 15); const rightLabels = matrixLayer.selectAll(".row-label").data(nodes, d => d.id); rightLabels.enter().append("text").attr("class", "axis-label row-label").attr("alignment-baseline", "middle").text(d => d.id) .merge(rightLabels).transition().duration(isReorganizing ? 600 : 0) .style("opacity", d => activeNodes.has(d.id) ? 1 : 0.2) .attr("y", d => yScale(d.id) + yScale.bandwidth() / 2).attr("x", matrixSize + 10); drawArcs(); const netLinks = linkGroup.selectAll("line").data(activeLinks, d => `${d.source.id || d.source}-${d.target.id || d.target}`); netLinks.enter().append("line").attr("class", "link").merge(netLinks); netLinks.exit().remove(); const netNodes = nodeGroup.selectAll("circle").data(simNodes, d => d.id); const newNodes = netNodes.enter().append("circle").attr("class", "node").attr("r", 10) .on("mouseover", (e, d) => handleNodeHover(d, true)) .on("mouseout", (e, d) => handleNodeHover(d, false)) .call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)); newNodes.merge(netNodes); netNodes.exit().remove(); // BUG FIX: Ensure path fill/stroke updates after the merge const netHulls = hullGroup.selectAll("path").data(currentStructures, d => d.id); netHulls.enter().append("path").attr("class", "hull") .merge(netHulls) .attr("fill", d => d.color) .attr("stroke", d => d.color); netHulls.exit().remove(); const gLinks = ghostLinkGroup.selectAll("line").data(originalLinks, d => `${d.source.id || d.source}-${d.target.id || d.target}`); gLinks.enter().append("line").attr("class", "ghost-link").merge(gLinks); gLinks.exit().remove(); // BUG FIX: Ensure path fill/stroke updates after the merge const gHulls = ghostHullGroup.selectAll("path").data(originalStructures, d => d.id); gHulls.enter().append("path").attr("class", "ghost-hull") .merge(gHulls) .attr("fill", d => d.color) .attr("stroke", d => d.color); gHulls.exit().remove(); simulation.nodes(simNodes); simulation.force("link", d3.forceLink(activeLinks).id(d => d.id).distance(50)); simulation.alpha(0.3).restart(); } function drawArcs() { let currentArcData = []; currentLinks.forEach(l => { let u = l.source.id ?? l.source; let v = l.target.id ?? l.target; if(u !== v && activeNodes.has(u) && activeNodes.has(v)) { let x1 = xScale(u) + xScale.bandwidth()/2; let x2 = xScale(v) + xScale.bandwidth()/2; currentArcData.push({u, v, x1, x2}); } }); let originalArcData = []; originalLinks.forEach(l => { let u = l.source.id ?? l.source; let v = l.target.id ?? l.target; if(u !== v) { let y1 = yScale(u) + yScale.bandwidth()/2; let y2 = yScale(v) + yScale.bandwidth()/2; originalArcData.push({u, v, y1, y2}); } }); const topArcs = matrixArcsTop.selectAll(".arc-top").data(currentArcData, d => `${d.u}-${d.v}`); topArcs.enter().append("path").attr("class", "arc arc-top").merge(topArcs) .transition().duration(isReorganizing ? 600 : 0) .attr("d", d => { let left = Math.min(d.x1, d.x2); let right = Math.max(d.x1, d.x2); let r = (right - left) / 2; return `M ${left},0 A ${r},${r} 0 0,1 ${right},0`; }); topArcs.exit().remove(); const leftArcs = matrixArcsLeft.selectAll(".arc-left").data(originalArcData, d => `${d.u}-${d.v}`); leftArcs.enter().append("path").attr("class", "arc arc-left arc-original").merge(leftArcs) .transition().duration(isReorganizing ? 600 : 0) .attr("d", d => { let top = Math.min(d.y1, d.y2); let bottom = Math.max(d.y1, d.y2); let r = (bottom - top) / 2; return `M 0,${top} A ${r},${r} 0 0,0 0,${bottom}`; }); leftArcs.exit().remove(); } // 7. Interaction Handlers function handleCellClick(event, d) { if(d.isDiag) { if(activeNodes.has(d.source)) activeNodes.delete(d.source); else activeNodes.add(d.source); updateVisualization(); return; } if(d.isLower || !d.isNodeActive) return; if(d.isLinked) { currentLinks = currentLinks.filter(l => !(((l.source.id ?? l.source) === d.source && (l.target.id ?? l.target) === d.target) || ((l.source.id ?? l.source) === d.target && (l.target.id ?? l.target) === d.source)) ); } else { currentLinks.push({ source: d.source, target: d.target }); } updateVisualization(); } function reorganiseMatrix() { isReorganizing = true; let newOrder = []; let mapped = new Set(); currentStructures.forEach(s => { let nodesToAdd = s.type === 'biclique' ? [...s.setA, ...s.setB] : s.nodes; nodesToAdd.forEach(n => { if(!mapped.has(n)) { newOrder.push(n); mapped.add(n); } }); }); nodes.forEach(n => { if(!mapped.has(n.id)) newOrder.push(n.id); }); currentOrder = newOrder; updateVisualization(); setTimeout(() => isReorganizing = false, 650); } function resetGraph() { activeNodes = new Set(nodes.map(n => n.id)); currentLinks = JSON.parse(JSON.stringify(originalLinksData)); currentOrder = nodes.map(n => n.id); updateVisualization(); simulation.alpha(1).restart(); } reorgBtn.onclick = reorganiseMatrix; resetBtn.onclick = resetGraph; function handleNodeHover(d, isHovering) { if(isReorganizing) return; let neighbors = new Set(); currentLinks.forEach(l => { let u = l.source.id ?? l.source; let v = l.target.id ?? l.target; if(u === d.id && activeNodes.has(v)) neighbors.add(v); if(v === d.id && activeNodes.has(u)) neighbors.add(u); }); nodeGroup.selectAll(".node") .style("stroke-width", n => isHovering && (n.id === d.id || neighbors.has(n.id)) ? "4px" : "2px") .style("opacity", n => isHovering && !(n.id === d.id || neighbors.has(n.id)) ? 0.3 : 1); linkGroup.selectAll(".link") .style("stroke", l => isHovering && (l.source.id === d.id || l.target.id === d.id) ? "#000" : "#999") .style("stroke-width", l => isHovering && (l.source.id === d.id || l.target.id === d.id) ? "3px" : "1.5px") .style("opacity", l => isHovering && !(l.source.id === d.id || l.target.id === d.id) ? 0.1 : 0.6); matrixLayer.selectAll(".cell").style("opacity", cell => { if (!isHovering) return cell.isNodeActive ? 1 : 0.05; if (!cell.isNodeActive) return 0.05; if ((cell.source === d.id && neighbors.has(cell.target)) || (cell.target === d.id && neighbors.has(cell.source))) return 1; if (cell.source === d.id || cell.target === d.id) return 0.6; return 0.15; }); matrixLayer.selectAll(".axis-label").style("font-weight", l => isHovering && (l.id === d.id || neighbors.has(l.id)) ? "bold" : "normal"); } function handleMatrixHover(d, isHovering) { if(isReorganizing) return; let isStruct = d.struct !== undefined; matrixLayer.selectAll(".cell").style("opacity", cell => { if (!cell.isNodeActive && !cell.isDiag) return 0.05; if (isHovering) { return ((cell.source === d.source && cell.target === d.target) || (isStruct && cell.struct && cell.struct.id === d.struct.id && cell.isUpper === d.isUpper)) ? 1 : 0.2; } return 1; }); if(d.isLower && isHovering) { linkGroup.selectAll(".link").style("opacity", 0.05); hullGroup.selectAll(".hull").style("opacity", 0); nodeGroup.selectAll(".node").style("opacity", n => activeNodes.has(n.id) ? 0.2 : 0); ghostLinkGroup.selectAll(".ghost-link") .style("opacity", l => ((l.source.id === d.source && l.target.id === d.target) || (l.source.id === d.target && l.target.id === d.source)) ? 1 : 0.3) .style("stroke", l => ((l.source.id === d.source && l.target.id === d.target) || (l.source.id === d.target && l.target.id === d.source)) ? "#000" : "#bbb"); ghostHullGroup.selectAll(".ghost-hull").style("opacity", h => isStruct && h.id === d.struct.id ? 0.6 : 0.1); } else { nodeGroup.selectAll(".node").style("opacity", 1); linkGroup.selectAll(".link").style("opacity", 0.6).style("stroke", "#999").style("stroke-width", "1.5px"); hullGroup.selectAll(".hull").style("opacity", 0.25); ghostLinkGroup.selectAll(".ghost-link").style("opacity", 0); ghostHullGroup.selectAll(".ghost-hull").style("opacity", 0); if (isHovering && d.isUpper) { linkGroup.selectAll(".link") .style("stroke", l => ((l.source.id === d.source && l.target.id === d.target) || (l.source.id === d.target && l.target.id === d.source)) ? "#000" : "#999") .style("stroke-width", l => ((l.source.id === d.source && l.target.id === d.target) || (l.source.id === d.target && l.target.id === d.source)) ? "3px" : "1.5px"); hullGroup.selectAll(".hull").style("opacity", h => isStruct && h.id === d.struct.id ? 0.6 : 0.25); nodeGroup.selectAll(".node").style("stroke-width", n => (n.id === d.source || n.id === d.target) ? "4px" : "2px"); } } } // 8. Physics Ticks simulation.on("tick", () => { linkGroup.selectAll(".link").attr("x1", d => d.source.x).attr("y1", d => d.source.y).attr("x2", d => d.target.x).attr("y2", d => d.target.y); const getNode = id => nodes.find(n => n.id === id); ghostLinkGroup.selectAll(".ghost-link") .attr("x1", d => getNode(d.source.id ?? d.source).x).attr("y1", d => getNode(d.source.id ?? d.source).y) .attr("x2", d => getNode(d.target.id ?? d.target).x).attr("y2", d => getNode(d.target.id ?? d.target).y); nodeGroup.selectAll(".node").attr("cx", d => d.x).attr("cy", d => d.y); const buildHullPath = (structList) => function(d) { let pts = d.nodes.map(nId => getNode(nId)).map(n => [n.x, n.y]); return pts.length >= 3 ? `M${d3.polygonHull(pts).join("L")}Z` : null; }; hullGroup.selectAll(".hull").attr("d", buildHullPath(currentStructures)); ghostHullGroup.selectAll(".ghost-hull").attr("d", buildHullPath(originalStructures)); }); function dragstarted(event, d) { event.sourceEvent.stopPropagation(); if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } updateVisualization(); return container; }