31:T1193,nets = ms.map((widgets) => { // Configuration // Helper to get absolute coordinates considering parent hierarchy const getAbsolutePosition = (widget, widgetsMap) => { let x = widget.x || 0; let y = widget.y || 0; let currentWidget = widget; while (currentWidget.parentId) { const parent = widgetsMap.get(currentWidget.parentId); if (!parent) break; x += parent.x || 0; y += parent.y || 0; currentWidget = parent; } return { x, y }; }; // Create widget lookup map for parent resolution const widgetsMap = new Map(widgets.map((w) => [w.id, w])); // Filter widgets to those within bounds after calculating absolute positions const filteredWidgets = widgets.filter((widget) => { const pos = getAbsolutePosition(widget, widgetsMap); const withinX = pos.x >= bounds.x[0] && pos.x <= bounds.x[1]; const withinY = pos.y >= bounds.y[0] && pos.y <= bounds.y[1]; return withinX && withinY; }); // Extract nodes (shapes with text) const nodes = filteredWidgets .filter( (w) => w.type === "shape" && ["circle", "square", "ellipse", "rectangle", "rounded_square"].includes( w.shape ) ) .map((shape) => { const pos = getAbsolutePosition(shape, widgetsMap); return { id: shape.id, text: shape.htmlText ? shape.htmlText.replace(/<[^>]*>/g, "").trim() : "", shape: shape.shape, x: pos.x, y: pos.y, width: shape.width || 0, height: shape.height || 0, rotation: shape.rotation || 0, style: shape.style }; }); // Helper to check if a point is near a shape const isPointNearShape = (px, py, node, tolerance) => { // Simple rectangular boundary check (can be refined for circles/ellipses) const halfWidth = node.width / 2; const halfHeight = node.height / 2; const centerX = node.x + halfWidth; const centerY = node.y + halfHeight; // For rotation, we'd need to transform the point - keeping simple for now // This is a bounding box check with tolerance const xDist = Math.abs(px - centerX); const yDist = Math.abs(py - centerY); if (node.shape === "circle" || node.shape === "ellipse") { // Elliptical distance check const normalizedX = xDist / (halfWidth + tolerance); const normalizedY = yDist / (halfHeight + tolerance); return normalizedX * normalizedX + normalizedY * normalizedY <= 1; } else { // Rectangular shapes return xDist <= halfWidth + tolerance && yDist <= halfHeight + tolerance; } }; // Extract links from arrows const links = filteredWidgets .filter((w) => w.type === "arrow" && w.points && w.points.length >= 2) .map((arrow) => { const arrowPos = getAbsolutePosition(arrow, widgetsMap); // Get arrow endpoints in absolute coordinates const startPoint = { x: arrowPos.x + (arrow.points[0]?.x || 0), y: arrowPos.y + (arrow.points[0]?.y || 0) }; const endPoint = { x: arrowPos.x + (arrow.points[arrow.points.length - 1]?.x || 0), y: arrowPos.y + (arrow.points[arrow.points.length - 1]?.y || 0) }; // Find nodes near start and end points const sourceNode = nodes.find((node) => isPointNearShape(startPoint.x, startPoint.y, node, PROXIMITY_TOLERANCE) ); const targetNode = nodes.find((node) => isPointNearShape(endPoint.x, endPoint.y, node, PROXIMITY_TOLERANCE) ); return { id: arrow.id, source: sourceNode?.id || null, target: targetNode?.id || null, sourcePoint: startPoint, targetPoint: endPoint, style: arrow.style }; }) .filter((link) => link.source && link.target); // Only keep links that connect two nodes // Summary statistics const stats = { totalWidgets: widgets.length, filteredWidgets: filteredWidgets.length, totalShapes: nodes.length, totalArrows: filteredWidgets.filter((w) => w.type === "arrow").length, connectedLinks: links.length, unconnectedArrows: filteredWidgets.filter((w) => w.type === "arrow").length - links.length, tolerance: PROXIMITY_TOLERANCE, bounds: bounds }; console.log("Network Statistics:", stats); console.log("Nodes:", nodes.length); console.log("Links:", links.length); // Export the network const network = { nodes, links, stats }; return network; })32:T19e1,mergedNet = { // Step 1: Collect all nodes from all networks with network source tracking const allNodesWithSource = nets.flatMap((net, netIndex) => net.nodes.map((node) => ({ ...node, originalId: node.id, networkIndex: netIndex, networkId: `network-${netIndex}` })) ); // Step 2: Group nodes by similar text using fuzzball const nodeGroups = allNodesWithSource.reduce((groups, node) => { // Clean text for comparison (remove HTML tags if any remain, trim whitespace) const nodeText = (node.text || "") .replace(/<[^>]*>/g, "") .trim() .toLowerCase(); // Skip empty text nodes if (!nodeText) { return groups; } // Find existing group with similar text const existingGroupIndex = groups.findIndex( (group) => fuzzball.token_sort_ratio(group.representativeText, nodeText) >= SIMILARITY_THRESHOLD ); if (existingGroupIndex >= 0) { // Add to existing group groups[existingGroupIndex].nodes.push(node); } else { // Create new group groups.push({ representativeText: nodeText, nodes: [node] }); } return groups; }, []); // Step 3: Create merged nodes with new IDs and proper tracking const mergedNodes = nodeGroups.map((group, index) => { const mergedId = `merged-node-${index}`; // Aggregate properties from all nodes in the group const allTexts = group.nodes.map((n) => n.text).filter(Boolean); const avgX = group.nodes.reduce((sum, n) => sum + n.x, 0) / group.nodes.length; const avgY = group.nodes.reduce((sum, n) => sum + n.y, 0) / group.nodes.length; const avgWidth = group.nodes.reduce((sum, n) => sum + n.width, 0) / group.nodes.length; const avgHeight = group.nodes.reduce((sum, n) => sum + n.height, 0) / group.nodes.length; // Store network-specific original IDs const networkOriginalIds = group.nodes.map((n) => ({ networkIndex: n.networkIndex, originalId: n.originalId })); return { id: mergedId, text: allTexts[0] || "", // Use first occurrence as representative text allTexts: [...new Set(allTexts)], // All unique text variations originalIds: group.nodes.map((n) => n.originalId), networkOriginalIds: networkOriginalIds, // Keep network-specific mapping networks: [...new Set(group.nodes.map((n) => n.networkId))], nodeCount: group.nodes.length, // Average positioning (useful for visualization) x: avgX, y: avgY, width: avgWidth, height: avgHeight, // Keep first node's visual properties shape: group.nodes[0].shape, style: group.nodes[0].style, rotation: group.nodes[0].rotation || 0 }; }); // Step 4: Create ID mapping for link updates (network-specific) const idMapping = new Map(); mergedNodes.forEach((mergedNode) => { mergedNode.networkOriginalIds.forEach(({ networkIndex, originalId }) => { idMapping.set(`${networkIndex}-${originalId}`, mergedNode.id); }); }); // Debug: Check if C-SHARP is in the mapping const csharpEntries = [...idMapping.entries()].filter( ([key, value]) => key.includes("6-1665068637895") || value.includes("c-sharp") || mergedNodes.find( (n) => n.id === value && n.text.toLowerCase().includes("c-sharp") ) ); if (csharpEntries.length > 0) { console.log("C-SHARP mapping found:", csharpEntries); } // Step 5: Collect and update all links const allLinks = nets .flatMap((net, netIndex) => net.links.map((link) => ({ ...link, originalSource: link.source, originalTarget: link.target, networkIndex: netIndex, networkId: `network-${netIndex}`, // Map to merged node IDs source: idMapping.get(`${netIndex}-${link.source}`), target: idMapping.get(`${netIndex}-${link.target}`) })) ) .filter((link) => link.source && link.target); // Only keep links where both nodes exist // Step 6: Deduplicate links between same node pairs const uniqueLinks = allLinks.reduce((unique, link) => { const linkKey = `${link.source}->${link.target}`; const existing = unique.find((l) => `${l.source}->${l.target}` === linkKey); if (existing) { // Track that this connection exists in multiple networks existing.networks = [ ...(existing.networks || [existing.networkId]), link.networkId ]; existing.count = (existing.count || 1) + 1; } else { unique.push({ ...link, networks: [link.networkId], count: 1 }); } return unique; }, []); // Step 7: Create merged network const mergedNetwork = { nodes: mergedNodes, links: uniqueLinks, stats: { originalNetworkCount: nets.length, originalNodeCount: allNodesWithSource.length, mergedNodeCount: mergedNodes.length, nodeReductionRatio: ( 1 - mergedNodes.length / allNodesWithSource.length ).toFixed(2), originalLinkCount: allLinks.length, mergedLinkCount: uniqueLinks.length, similarityThreshold: SIMILARITY_THRESHOLD, nodesPerNetwork: nets.map((net, i) => ({ network: `network-${i}`, nodes: net.nodes.length, links: net.links.length })) } }; // Summary output console.log("=== Network Merge Summary ==="); console.log(`Networks merged: ${nets.length}`); console.log( `Nodes: ${allNodesWithSource.length} → ${mergedNodes.length} (${mergedNetwork.stats.nodeReductionRatio}% reduction)` ); console.log(`Links: ${allLinks.length} → ${uniqueLinks.length}`); console.log(`Similarity threshold: ${SIMILARITY_THRESHOLD}%`); // Validation: Check that all original links are preserved const originalLinkCount = nets.reduce( (sum, net) => sum + net.links.length, 0 ); const mappedLinkCount = allLinks.length; const preservedLinkCount = allLinks.filter( (l) => l.source && l.target ).length; console.log( `Link preservation: ${originalLinkCount} original → ${preservedLinkCount} preserved (${ mappedLinkCount - preservedLinkCount } dropped due to missing nodes)` ); console.log(""); console.log("Top merged nodes (by occurrence):"); mergedNodes .sort((a, b) => b.nodeCount - a.nodeCount) .slice(0, 5) .forEach((node) => { console.log( ` "${node.text}" - appears ${node.nodeCount} times across ${node.networks.length} networks` ); }); // Export the merged network return mergedNetwork; }33:T4ef,flatLinks = linkages.flat().map((l) => { // let sourceMatch = mergeable.find((m) => m.str == l.source); // let targetMatch = mergeable.find((m) => m.str == l.target); let source = flatNodes.find((d) => d.id == l.source)?.id; let target = flatNodes.find((d) => d.id == l.target)?.id; if (!source) { source = mergeable.find((m) => m.str == l.source).mergeable; } if (!target) { target = mergeable.find((m) => m.str == l.target).mergeable; } return { source, target, value: 1 }; // if ( // sourceMatch.mergeable && // sourceMatch.str.length > sourceMatch.mergeable.length // ) { // return [l, sourceMatch]; // } else if ( // targetMatch.mergeable && // targetMatch.str.length > targetMatch.mergeable.length // ) { // return [l, targetMatch]; // } else { // return false; // } // let source = l.source; // let target = l.target; // if ( // sourceMatch.mergeable && // sourceMatch.str.length > sourceMatch.mergeable.length // ) { // source = sourceMatch.mergeable; // } // if ( // targetMatch.mergeable && // targetMatch.str.length > targetMatch.mergeable.length // ) { // target = targetMatch.mergeable; // } // return { source, target, value: 1 }; })34:[{"id":"6bb6ca80cd92050a75ac5879ef2073e207357fc2cb03802805ab2af591c4dab426374386c11180bdfae8a2a344af6b67ac1870a7f3ed1f1145eaf05b4d9cae45","href":"https://static.observableusercontent.com/files/6bb6ca80cd92050a75ac5879ef2073e207357fc2cb03802805ab2af591c4dab426374386c11180bdfae8a2a344af6b67ac1870a7f3ed1f1145eaf05b4d9cae45","name":"mural_all_widgets_comprehensive.csv.zip","type":"application/zip","lastModified":1755610319935.106,"size":2431571}] 2f:{"title":"Studio Network Data","cells":[{"id":0,"value":"# Studio Network Data","pinned":false,"hidden":false,"mode":"md"},{"id":871,"value":"ws = widgets\n .map((d) =>\n Object.assign(JSON.parse(d.widget_raw_data), {\n muralCreationOn: d.mural_created_on,\n muralID: d.mural_id,\n muralTitle: d.mural_title\n })\n )\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"ms = Object.entries(Object.groupBy(ws, (d) => d.muralID)).map((d) => d[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"viewof PROXIMITY_TOLERANCE = Inputs.range([0, 200], {\n label: \"Proximity Tolerance in Pixels\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"nets\n .map((d) => d.nodes)\n .flat()\n .filter((e) => e.text == \"C-SHARP team\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"viewof SIMILARITY_THRESHOLD = Inputs.range([0, 100], {\n value: 75,\n label: \"Fuzzy Matching Tolerance [0-100]\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"fuzzball = import(\n \"https://unpkg.com/fuzzball@2.2.3/dist/esm/fuzzball.esm.min.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"zippedFile = FileAttachment(\"mural_all_widgets_comprehensive.csv.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"widgets = zippedFile.file(zippedFile.filenames[0]).csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"murals = Object.groupBy(widgets, (d) => d.mural_id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"formattedMurals = Object.entries(murals)\n .filter(\n (m) =>\n m[1].filter(\n (d) =>\n d.widget_html_text.includes(\"Stakeholder mapping\") ||\n d.widget_text.includes(\"Stakeholder mapping\")\n ).length\n )\n .map((d) =>\n d[1].map((e) => ({\n ...JSON.parse(e.widget_raw_data),\n muralId: d[0],\n muralTitle: d[1][0].mural_title\n }))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"networks = formattedMurals.map((m) =>\n m\n .map((w) => {\n let item = structuredClone(w);\n\n while (item.parentId) {\n let parent = m.find((d) => d.id == item.parentId);\n if (!parent) break;\n item.x += parent.x;\n item.y += parent.y;\n item.parentId = parent.parentId;\n }\n\n if (item.type == \"arrow\") {\n item.points[0].x += item.x;\n item.points[0].y += item.y;\n\n item.points[1].x += item.x;\n item.points[1].y += item.y;\n }\n\n return item;\n })\n\n .filter(\n (w) =>\n w.x >= bounds.x[0] &&\n w.x <= bounds.x[1] &&\n w.y >= bounds.y[0] &&\n w.y <= bounds.y[1]\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"nodes = networks\n .map((m) => m.filter((w) => w.type == \"shape\")) // exclude rects\n .map((m) =>\n m\n .filter((d) => d.text !== \"2\")\n .filter((d) => d.text || d.htmlText)\n .map((d) => {\n let t;\n if (d.text) {\n t = d.text;\n } else {\n var el = document.createElement(\"html\");\n el.innerHTML = d.htmlText;\n\n t = el.innerText;\n }\n\n return {\n ...d,\n group: groups.findIndex((g) => g == d.muralId),\n widgetId: d.id,\n id: t.trim().toLowerCase()\n };\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"uniqueNodeList = [...new Set(nodes.flat().map((d) => d.id))].map((d) =>\n nodes.flat().find((e) => e.id == d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"threshold = 0.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"minCount = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"mergeable = uniqueNodeList\n .map((d) => d.id)\n .map((str) => ({ str, words: new Set(str.split(\" \")) }))\n .map((item, i) => ({\n ...item,\n mergeable: uniqueNodeList\n .map((d) => d.id)\n .filter((other, j) => j !== i)\n .filter((other) => {\n const otherWords = new Set(other.split(\" \"));\n const intersection = new Set(\n [...item.words].filter((word) => otherWords.has(word))\n );\n const minLength = Math.min(item.words.size, otherWords.size);\n return (\n intersection.size > minCount && intersection.size / minLength >= threshold\n );\n })\n .reduce((acc, other) => {\n const otherWords = new Set(other.split(\" \"));\n if (!acc || otherWords.size < new Set(acc.split(\" \")).size) {\n return other;\n }\n return acc;\n }, null)\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"mergedNodes = mergeable.map((d, i) => {\n if (!d.mergeable) {\n return uniqueNodeList[i];\n } else if (d.str.length < d.mergeable.length) {\n return uniqueNodeList[i];\n } else {\n return uniqueNodeList.find((n) => n.id == d.mergeable);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"flatNodes = [...new Set(mergedNodes.flat().map((d) => d.id))].map((d) =>\n mergedNodes.flat().find((e) => e.id == d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"links = networks.map((m) =>\n m.filter((w) => w.type == \"arrow\").map((w) => w.points)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"linkages = {\n const threshold = 30;\n\n {\n const isNearNode = (point, node) => {\n const dx = point.x - (node.x + node.width / 2);\n const dy = point.y - (node.y + node.height / 2);\n const rx = node.width / 2;\n const ry = node.height / 2;\n const distance = Math.sqrt((dx * dx) / (rx * rx) + (dy * dy) / (ry * ry));\n return Math.abs(distance - 1) * Math.min(rx, ry) <= threshold;\n };\n\n return links.map((m, i) =>\n m\n .map(([p1, p2]) => {\n const n1 = nodes[i].find((n) => isNearNode(p1, n));\n const n2 = nodes[i].find((n) => isNearNode(p2, n));\n return n1 && n2 && n1.id !== n2.id ? [n1.id, n2.id] : null;\n })\n .filter(Boolean)\n .map((p) => ({ source: p[0], target: p[1], value: 1 }))\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"mergeCount = linkages.flat().reduce(\n (a, l) => {\n let source = flatNodes.find((d) => d.id == l.source)?.id;\n let target = flatNodes.find((d) => d.id == l.target)?.id;\n\n if (!source) {\n a.source++;\n }\n if (!target) {\n a.target++;\n }\n\n return a;\n },\n { source: 0, target: 0 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"data = ({ nodes: flatNodes, links: flatLinks })","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"groups = [...new Set(networks.map((d) => d[0].muralId))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"bounds = ({ x: [-10000, -2000], y: [-10000, -3000] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"left = {\n const item = formattedMurals\n .find((d) => d[0].muralId == \"radc2496.1755528628252\")\n .find(\n (d) =>\n d.text?.includes(\"Mexican Museum of Art\") ||\n d.htmlText?.includes(\"Mexican Museum of Art\")\n );\n\n return [item.x, item.y, item.parentId];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"right = {\n const item = formattedMurals\n .find((d) => d[0].muralId == \"radc2496.1755528628252\")\n .find(\n (d) =>\n d.text?.includes(\n \"People disconnected with real life events but are on social media\"\n ) ||\n d.htmlText?.includes(\n \"People disconnected with real life events but are on social media\"\n )\n );\n return [item.x, item.y, item.parentId];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"top = {\n const item = structuredClone(\n formattedMurals\n .find((d) => d[0].muralId == \"radc2496.1755528628252\")\n .find(\n (d) =>\n d.text?.includes(\n \"Geriatricians and Hospitals giving care to seniors\"\n ) ||\n d.htmlText?.includes(\n \"Geriatricians and Hospitals giving care to seniors\"\n )\n )\n );\n\n let parent;\n\n if (item.parentId) {\n parent = formattedMurals\n .find((d) => d[0].muralId == \"radc2496.1755528628252\")\n .find((d) => d.id == item.parentId);\n\n item.x += parent.x;\n item.y += parent.y;\n }\n\n return [item.x, item.y, item.parentId, parent];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"bottom = {\n const item = formattedMurals\n .find((d) => d[0].muralId == \"radc2496.1755528628252\")\n .find(\n (d) =>\n d.text?.includes(\"Mexican Museum of Art\") ||\n d.htmlText?.includes(\"Mexican Museum of Art\")\n );\n\n let parent;\n\n if (item.parentId) {\n parent = formattedMurals\n .find((d) => d[0].muralId == \"radc2496.1755528628252\")\n .find((d) => d.id == item.parentId);\n\n item.x += parent.x;\n item.y += parent.y;\n }\n\n return [item.x, item.y, item.parentId, parent];\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}