import { useState, useEffect, useRef } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; import * as d3 from "d3"; export const REQUIRED_DATABASES = [ { type: 'database', path: 'md:marvel_social_network', alias: 'marvel_social_network' } ]; const N = (v) => (v != null ? Number(v) : 0); const TEAM_COLORS = { Avengers: { stroke:"#378ADD", fill:"#E6F1FB", text:"#0C447C", label:"Avengers" }, "X-Men": { stroke:"#E24B4A", fill:"#FCEBEB", text:"#791F1F", label:"X-Men" }, "Fantastic Four": { stroke:"#1D9E75", fill:"#E1F5EE", text:"#085041", label:"Fantastic Four" }, Defenders: { stroke:"#7F77DD", fill:"#EEEDFE", text:"#26215C", label:"Defenders" }, Villain: { stroke:"#EF9F27", fill:"#FAEEDA", text:"#633806", label:"Villains" }, }; const tc = (t) => TEAM_COLORS[t] || TEAM_COLORS.Avengers; export default function MarvelSocialNetwork() { const [teamFilter, setTeamFilter] = useState("all"); const [minConn, setMinConn] = useState(80); const [search, setSearch] = useState(""); const [mode, setMode] = useState("network"); const [selectedNode, setSelectedNode] = useState(null); const [sixFrom, setSixFrom] = useState(""); const [sixTo, setSixTo] = useState(""); const [sixResult, setSixResult] = useState(null); const [factIdx, setFactIdx] = useState(0); const [tlYear, setTlYear] = useState(2000); const [showHelp, setShowHelp] = useState(false); const svgRef = useRef(null); const canvasRef = useRef(null); const simRef = useRef(null); const simNodesRef = useRef([]); const simEdgesRef = useRef([]); const zoomRef = useRef(d3.zoomIdentity); const { data: nodeData, isLoading: nodesLoading } = useSQLQuery( `SELECT node_id, node_label, connections, co_appearances, team, mcu_actor, mcu_films, mcu_debut, img_xs, in_mcu FROM "marvel_social_network"."main"."network_nodes" ORDER BY connections DESC` ); const { data: edgeData, isLoading: edgesLoading } = useSQLQuery( `SELECT source, target, weight FROM "marvel_social_network"."main"."network_edges" WHERE weight >= 5` ); const { data: factData } = useSQLQuery( `SELECT related_character, fact_text FROM "marvel_social_network"."main"."did_you_know"` ); const nodes = Array.isArray(nodeData) ? nodeData : []; const edges = Array.isArray(edgeData) ? edgeData : []; const facts = Array.isArray(factData) ? factData : []; const isLoading = nodesLoading || edgesLoading; const totalChars = nodes.length; const inMCU = nodes.filter(n => n.in_mcu).length; const mcuPct = totalChars ? Math.round(inMCU * 100 / totalChars) : 0; const heroPct = totalChars ? Math.round(nodes.filter(n => n.team !== "Villain").length * 100 / totalChars) : 0; const topNode = nodes[0]; const topMCU = [...nodes].sort((a,b) => N(b.mcu_films) - N(a.mcu_films))[0]; const visNodes = nodes.filter(n => { if (teamFilter !== "all" && teamFilter !== "mcu" && n.team !== teamFilter) return false; if (teamFilter === "mcu" && !n.in_mcu) return false; if (N(n.connections) < minConn) return false; if (search && !n.node_label.toLowerCase().includes(search.toLowerCase())) return false; if (mode === "timeline") { const ratio = (tlYear - 1961) / (2000 - 1961); const idx = nodes.indexOf(n); if (idx > Math.round(nodes.length * ratio)) return false; } return true; }); const visIds = new Set(visNodes.map(n => n.node_id)); const visEdges = edges.filter(e => visIds.has(e.source) && visIds.has(e.target)); // KPIs that respond to the active filter — must come after visNodes const kpiNodes = teamFilter === "all" ? nodes : visNodes; const kpiTotal = kpiNodes.length; const kpiInMCU = kpiNodes.filter(n => n.in_mcu).length; const kpiMcuPct = kpiTotal ? Math.round(kpiInMCU * 100 / kpiTotal) : 0; const kpiHeroPct = kpiTotal ? Math.round(kpiNodes.filter(n => n.team !== "Villain").length * 100 / kpiTotal) : 0; const kpiTopNode = [...kpiNodes].sort((a,b) => N(b.connections) - N(a.connections))[0]; const kpiTopMCU = [...kpiNodes].filter(n => N(n.mcu_films) > 0).sort((a,b) => N(b.mcu_films) - N(a.mcu_films))[0]; const adjMap = {}; nodes.forEach(n => { adjMap[n.node_id] = []; }); edges.forEach(e => { if (adjMap[e.source]) adjMap[e.source].push(e.target); if (adjMap[e.target]) adjMap[e.target].push(e.source); }); function bfs(fromId, toId) { if (fromId === toId) return [fromId]; const queue = [[fromId]]; const visited = new Set([fromId]); while (queue.length) { const path = queue.shift(); const cur = path[path.length - 1]; for (const nb of (adjMap[cur] || [])) { if (visited.has(nb)) continue; const np = [...path, nb]; if (nb === toId) return np; visited.add(nb); queue.push(np); } } return null; } function findNode(name) { const q = name.toLowerCase().trim(); return nodes.find(n => n.node_label.toLowerCase().includes(q)) || null; } function runSixDeg() { const from = findNode(sixFrom); const to = findNode(sixTo); if (!from || !to) { setSixResult({ error: "Character not found. Try a different name." }); return; } const path = bfs(from.node_id, to.node_id); if (!path) { setSixResult({ error: "No path found between these characters." }); return; } const names = path.map(id => { const nd = nodes.find(x => x.node_id === id); return nd ? nd.node_label.split("/")[0].trim() : id; }); setSixResult({ path: names, degrees: path.length - 1 }); } // Canvas draw function — draws edges + nodes (images blocked by Dive CSP, initials used) function drawCanvas() { const canvas = canvasRef.current; const sn = simNodesRef.current; if (!canvas || !sn.length) return; const ctx = canvas.getContext("2d"); const t = zoomRef.current; const W = canvas.width; const H = canvas.height; ctx.clearRect(0, 0, W, H); ctx.save(); ctx.translate(t.x, t.y); ctx.scale(t.k, t.k); const r = n => Math.max(14, Math.min(42, 8 + N(n.connections) * 0.1)); // Draw edges first const edgeList = simEdgesRef.current; edgeList.forEach(e => { if (!e.source || !e.target || e.source.x == null) return; ctx.beginPath(); ctx.moveTo(e.source.x, e.source.y); ctx.lineTo(e.target.x, e.target.y); ctx.strokeStyle = tc(e.source.team).stroke; ctx.globalAlpha = 0.35; ctx.lineWidth = Math.min(3, 0.5 + N(e.weight) * 0.01); ctx.stroke(); ctx.globalAlpha = 1; }); // Draw nodes on top sn.forEach(n => { const rad = r(n); const col = tc(n.team); // Circle fill ctx.beginPath(); ctx.arc(n.x, n.y, rad, 0, Math.PI * 2); ctx.fillStyle = col.fill; ctx.fill(); ctx.strokeStyle = col.stroke; ctx.lineWidth = 1.8; ctx.stroke(); // Bold initial ctx.fillStyle = col.text; ctx.font = `700 ${Math.max(9, rad * 0.72)}px -apple-system,sans-serif`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(n.node_label[0].toUpperCase(), n.x, n.y); // Name label below all nodes ctx.fillStyle = "rgba(20,20,20,0.6)"; ctx.font = `500 ${Math.max(8, rad * 0.34)}px -apple-system,sans-serif`; ctx.textBaseline = "top"; const shortName = n.node_label.split("/")[0].split("[")[0].trim().split(" ").slice(0,2).join(" "); ctx.fillText(shortName, n.x, n.y + rad + 3); }); ctx.restore(); } useEffect(() => { const svgEl = svgRef.current; const canvas = canvasRef.current; if (!svgEl || !canvas || visNodes.length === 0) return; const W = svgEl.clientWidth || 800; const H = svgEl.clientHeight || 500; canvas.width = W; canvas.height = H; const rFn = n => Math.max(16, Math.min(44, 7 + N(n.connections) * 0.11)); const simNodes = visNodes.map(n => ({ ...n, x: W / 2 + (Math.random() - 0.5) * 80, y: H / 2 + (Math.random() - 0.5) * 80, })); simNodesRef.current = simNodes; const byId = {}; simNodes.forEach(n => { byId[n.node_id] = n; }); // Build edge array — D3 forceLink will mutate .source/.target in place const simEdges = visEdges.slice(0, 2000) .map(e => ({ source: byId[e.source], target: byId[e.target], weight: N(e.weight) })) .filter(e => e.source && e.target); // simEdges is a closure variable — D3 mutates it in place, so draw() always sees live x/y zoomRef.current = d3.zoomIdentity; function draw() { const ctx = canvas.getContext("2d"); const t = zoomRef.current; ctx.clearRect(0, 0, W, H); ctx.save(); ctx.translate(t.x, t.y); ctx.scale(t.k, t.k); // Draw edges with glow simEdges.forEach(e => { const s = e.source, tg = e.target; if (!s || !tg || s.x == null) return; ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(tg.x, tg.y); ctx.strokeStyle = tc(s.team).stroke; ctx.globalAlpha = 0.18; ctx.lineWidth = 1.5; ctx.stroke(); }); ctx.globalAlpha = 1; // Draw nodes — solid fill, white initial simNodes.forEach(n => { const rad = rFn(n); const col = tc(n.team); // Glow ctx.shadowColor = col.stroke; ctx.shadowBlur = 10; ctx.beginPath(); ctx.arc(n.x, n.y, rad, 0, Math.PI * 2); ctx.fillStyle = col.stroke; ctx.fill(); ctx.shadowBlur = 0; // Inner circle ctx.beginPath(); ctx.arc(n.x, n.y, rad - 2.5, 0, Math.PI * 2); ctx.fillStyle = col.fill; ctx.fill(); // Initial ctx.fillStyle = col.text; ctx.font = `800 ${Math.round(rad * 0.62)}px sans-serif`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(n.node_label[0].toUpperCase(), n.x, n.y); // Name label ctx.fillStyle = "rgba(20,20,20,0.65)"; ctx.font = `${Math.max(9, Math.round(rad * 0.3))}px sans-serif`; ctx.textBaseline = "top"; const name = n.node_label.split("/")[0].split("[")[0].trim().split(" ").slice(0,2).join(" "); ctx.fillText(name, n.x, n.y + rad + 3); }); ctx.restore(); } const svg = d3.select(svgEl); svg.selectAll("*").remove(); const g = svg.append("g"); const zoom = d3.zoom().scaleExtent([0.1, 8]).on("zoom", ev => { zoomRef.current = ev.transform; g.attr("transform", ev.transform); draw(); }); svg.call(zoom); const hitNode = g.append("g").selectAll("circle") .data(simNodes).enter().append("circle") .attr("r", d => rFn(d) + 2) .attr("fill", "transparent") .attr("stroke", "none") .style("cursor", "pointer") .on("click", (event, d) => { event.stopPropagation(); setSelectedNode({...d}); }) .call(d3.drag() .on("start", (ev, d) => { if (!ev.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }) .on("drag", (ev, d) => { d.fx = ev.x; d.fy = ev.y; }) .on("end", (ev, d) => { if (!ev.active) sim.alphaTarget(0); d.fx = null; d.fy = null; }) ); svg.on("click", () => setSelectedNode(null)); const sim = d3.forceSimulation(simNodes) .force("link", d3.forceLink(simEdges).id(d => d.node_id).distance(70).strength(0.6)) .force("charge", d3.forceManyBody().strength(-80)) .force("center", d3.forceCenter(W / 2, H / 2)) .force("collide", d3.forceCollide().radius(d => rFn(d) + 3)); simRef.current = sim; sim.on("tick", () => { hitNode.attr("cx", d => d.x).attr("cy", d => d.y); draw(); }); // Warm up sim so graph is visible immediately on mount sim.tick(80); draw(); hitNode.attr("cx", d => d.x).attr("cy", d => d.y); sim.restart(); return () => sim.stop(); }, [visNodes.length, teamFilter, minConn, search, mode, tlYear]); const top20 = [...nodes].sort((a,b) => N(b.connections) - N(a.connections)).slice(0, 20); const sel = selectedNode ? nodes.find(n => n.node_label === selectedNode.node_label) || selectedNode : null; const MODES = [["network","Network view"],["sixdeg","Six degrees"],["top20","Top 20"],["timeline","Timeline"]]; const FILTERS = [["all","All teams"],["Avengers","Avengers"],["X-Men","X-Men"],["Fantastic Four","Fantastic Four"],["Villain","Villains"],["mcu","MCU only"]]; return (

setShowHelp(false)} style={{fontFamily:"-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif",background:"#f8f8f6",color:"#1a1a1a",height:"100vh",display:"flex",flexDirection:"column",overflow:"hidden"}}> {/* TOPBAR */}

● The Marvel Social Network

327 characters · 9,891 connections · 1961–2000 · Built with DuckDB + MotherDuck ·{" "} FiveThirtyEight{" "}·{" "} Marvel Social Network{" "}·{" "} Superhero API · Note: character images not shown — MotherDuck Dive sandbox restricts external image loading in canvas

{FILTERS.map(([f,l]) => ( ))}

{showHelp && (

e.stopPropagation()} style={{position:"absolute",top:28,right:0,width:244,background:"#fff",border:"1px solid #e0e0da",borderRadius:10,padding:"12px 13px",zIndex:300,boxShadow:"0 4px 16px rgba(0,0,0,.1)"}}>

How to use this dashboard

{[ ["→","Click any character node to see stats, MCU films, and connections"], ["→","Use Six degrees to find the shortest path between two characters"], ["→","Filter by team or drag the connections slider to simplify the network"], ["→","Drag the timeline to watch the universe grow from 1961"], ["→","Hit Next in the Did you know panel for wild Marvel facts"], ].map(([icon,text]) => (

{icon}{text}

))}

)}

{/* KPI BAR */}

{[ { v: isLoading?"—":(kpiTopNode ? N(kpiTopNode.connections).toLocaleString() : "—"), l: isLoading?"—":(kpiTopNode ? kpiTopNode.node_label.split("/")[0].trim()+" connections" : "—"), s:"Most connected in view" }, { v: isLoading?"—":kpiHeroPct+"%", l:"Heroes in view", s:`Only ${isLoading?"—":(100-kpiHeroPct)}% are villains`, c:"#378ADD" }, { v: isLoading?"—":kpiMcuPct+"%", l:"Made it to MCU", s:`${isLoading?"—":kpiInMCU} of ${isLoading?"—":kpiTotal} on screen`, c:"#1D9E75" }, { v: isLoading?"—":kpiTotal, l:"Characters in view", s:teamFilter==="all"?"Full network":"Filtered set" }, { v: isLoading?"—":(kpiTopMCU ? N(kpiTopMCU.mcu_films) : "—"), l: isLoading?"—":(kpiTopMCU ? kpiTopMCU.node_label.split("/")[0].trim()+" MCU films" : "No MCU match"), s:"Most appearances in view" }, ].map((k, i) => (

{k.v}

{k.l}

{k.s}

))}

{/* BODY */}

{/* SIDEBAR */}

Search setSearch(e.target.value)} placeholder="Spider-Man, Hulk..." style={{width:"100%",fontSize:11,padding:"5px 7px",border:"1px solid #e0e0da",borderRadius:7,background:"#f8f8f6",outline:"none"}} />

Team {Object.entries(TEAM_COLORS).map(([team, col]) => { const count = nodes.filter(n => n.team === team).length; return (

setTeamFilter(t => t === team ? "all" : team)} style={{display:"flex",alignItems:"center",gap:6,fontSize:11,padding:"2px 4px",borderRadius:5,cursor:"pointer",marginBottom:2,opacity:teamFilter!=="all"&&teamFilter!==team?0.35:1}}>

{col.label} {isLoading?"—":count}

); })}

Min. connections setMinConn(Number(e.target.value))} style={{width:"100%",accentColor:"#378ADD"}} />

{minConn === 1 ? `Showing all ${isLoading?"—":visNodes.length}` : `Min ${minConn} (${visNodes.length} nodes)`}

Quick stats {[ {v:"1,156 days", l:"To read every Marvel comic"}, {v:"39 years", l:"Network span (1961–2000)"}, {v:"$22B+", l:"MCU worldwide box office"}, ].map(s => (

{s.v}

{s.l}

))}

{/* CANVAS */}

{/* MODE BAR */}

{MODES.map(([m,l]) => ( ))}

{/* CANVAS — draws nodes with images */} {(mode === "network" || mode === "timeline") && (

The Marvel Social Network

Comments