Star Wars · Episode Networks

\n Force-directed character interaction graphs per episode. Node size ∝ degree\n centrality; edge width/opacity ∝ interaction weight.\n

\n\n {error &&

Failed to load dataset: {error}

}\n\n {!error && !rows.length &&

Loading dataset…

}\n\n {rows.length > 0 && (\n <>\n

Episodes

\n Toggle episodes on/off. Click a character to highlight its ego-network.\n

e.stopPropagation()}>\n {episodeNumbers.map((ep) => {\n const on = visibleEpisodes.includes(ep);\n return (\n toggleEpisode(ep)}\n style={{ borderColor: EPISODE_COLORS[ep] || '#888' }}\n >\n \n Episode {ep}\n \n );\n })}\n {focusedCharacter && (\n {\n e.stopPropagation();\n setFocusedCharacter(null);\n }}\n >\n Clear focus: {focusedCharacter}\n \n )}\n

\n\n

Force-directed networks

e.stopPropagation()}>\n {graphs\n .filter(({ episode }) => visibleEpisodes.includes(episode))\n .map(({ episode, graph }) => (\n \n setFocusedCharacter((cur) => (cur === name ? null : name))\n }\n />\n ))}\n

\n {graphs.filter(({ episode }) => visibleEpisodes.includes(episode)).length === 0 && (\n

All episodes hidden. Toggle one on to view its network.

\n )}\n

\n \n )}\n

\n );\n};\n\nconst EpisodePanel = ({ episode, graph, color, focusedCharacter, onFocusCharacter }) => {\n const svgRef = useRef(null);\n const [hoveredLink, setHoveredLink] = useState(null);\n const [tick, setTick] = useState(0);\n\n // Nodes/links kept in refs so the simulation can mutate them without\n // forcing React re-renders on every tick.\n const nodesRef = useRef([]);\n const linksRef = useRef([]);\n\n // Build simulation once per graph.\n useEffect(() => {\n const { nodes, links } = graph;\n\n // Copy nodes so simulation state is local to this panel.\n const simNodes = nodes.map((n) => ({ ...n }));\n const nodeById = new Map(simNodes.map((n) => [n.id, n]));\n\n const simLinks = links.map((l) => ({\n ...l,\n source: nodeById.get(l.source) || l.source,\n target: nodeById.get(l.target) || l.target,\n }));\n\n nodesRef.current = simNodes;\n linksRef.current = simLinks;\n\n const sim = forceSimulation(simNodes)\n .force(\n 'link',\n forceLink(simLinks)\n .id((d) => d.id)\n .distance(60)\n .strength((l) => Math.min(1, 0.2 + Math.log(1 + l.value) / 6)),\n )\n .force('charge', forceManyBody().strength(-140))\n .force('center', forceCenter(PANEL_WIDTH / 2, PANEL_HEIGHT / 2))\n .force('collide', forceCollide().radius((d) => 6 + Math.sqrt(d.degree) * 1.1))\n .on('tick', () => setTick((t) => (t + 1) % 100000));\n\n // Pre-tick to settle a bit before first paint.\n sim.tick(60);\n\n return () => sim.stop();\n }, [graph]);\n\n const maxDegree = Math.max(1, ...graph.nodes.map((n) => n.degree));\n const maxValue = Math.max(1, ...graph.links.map((l) => l.value));\n\n const radiusScale = scaleSqrt().domain([0, maxDegree]).range([4, 14]).clamp(true);\n const widthScale = scaleLinear().domain([0, maxValue]).range([0.8, 5]).clamp(true);\n const opacityScale = scaleLinear().domain([0, maxValue]).range([0.25, 0.95]).clamp(true);\n\n // Determine highlighted node set / edges once per render (cheap for these sizes).\n const focusNeighbors = useMemo(() => {\n if (!focusedCharacter) return null;\n const neighbors = new Set([focusedCharacter]);\n graph.links.forEach((l) => {\n if (l.source === focusedCharacter) neighbors.add(l.target);\n if (l.target === focusedCharacter) neighbors.add(l.source);\n });\n return neighbors;\n }, [focusedCharacter, graph.links]);\n\n const isNodeHighlighted = (id) => !focusNeighbors || focusNeighbors.has(id);\n const isLinkHighlighted = (l) => {\n if (!focusNeighbors) return true;\n const sId = typeof l.source === 'object' ? l.source.id : l.source;\n const tId = typeof l.target === 'object' ? l.target.id : l.target;\n return focusNeighbors.has(sId) && focusNeighbors.has(tId);\n };\n\n // eslint-disable-next-line no-unused-vars\n const _tick = tick; // referenced to re-render on simulation ticks\n\n return (\n

\n \n Episode {episode}\n \n {graph.nodes.length} nodes · {graph.links.length} edges\n \n

\n \n \n {linksRef.current.map((l, i) => {\n const s = l.source;\n const t = l.target;\n if (typeof s !== 'object' || typeof t !== 'object') return null;\n const highlighted = isLinkHighlighted(l);\n return (\n {\n e.stopPropagation();\n const sId = typeof s === 'object' ? s.id : s;\n const tId = typeof t === 'object' ? t.id : t;\n setHoveredLink({ source: sId, target: tId, value: l.value });\n }}\n onMouseLeave={() => setHoveredLink(null)}\n style={{ cursor: 'pointer' }}\n />\n );\n })}\n {nodesRef.current.map((n) => {\n const highlighted = isNodeHighlighted(n.id);\n const isFocused = focusedCharacter === n.id;\n return (\n {\n e.stopPropagation();\n onFocusCharacter(n.id);\n }}\n style={{ cursor: 'pointer' }}\n >\n \n \n {n.id} · degree {formatNumber(n.degree)}\n \n \n {radiusScale(n.degree) > 7 && (\n \n {n.id}\n \n )}\n \n );\n })}\n \n \n

\n {hoveredLink ? (\n \n {hoveredLink.source} → {hoveredLink.target} · weight{' '}\n {formatNumber(hoveredLink.value)}\n \n ) : (\n Hover an edge for weight · click a node to focus its ego-network\n )}\n

\n );\n};","viz.js","styles.css",":root {\n --bg: #0f1116;\n --card: #181b23;\n --card-2: #1f2330;\n --text: #e8eaed;\n --muted: #9aa1ad;\n --accent: #ffd166;\n --accent-2: #7cc4ff;\n --border: #2b3040;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n background: var(--bg);\n color: var(--text);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif;\n}\n\ncode {\n font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;\n background: rgba(255, 255, 255, 0.06);\n padding: 0.1em 0.35em;\n border-radius: 4px;\n font-size: 0.9em;\n}\n\n.page {\n max-width: 1200px;\n margin: 0 auto;\n padding: 32px 24px 64px;\n}\n\n.header h1 {\n margin: 0 0 6px;\n font-size: 1.9rem;\n letter-spacing: 0.01em;\n}\n\n.subtitle {\n margin: 0 0 24px;\n color: var(--muted);\n max-width: 720px;\n}\n\n.card {\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 20px 22px;\n margin-bottom: 24px;\n}\n\n.card h2 {\n margin: 0 0 12px;\n font-size: 1.15rem;\n letter-spacing: 0.02em;\n}\n\n.muted {\n color: var(--muted);\n margin: 0 0 12px;\n}\n\n.error {\n color: #ff8a8a;\n}\n\n/* ---- Episode legend ---- */\n.legend {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 12px;\n}\n\n.legend-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 999px;\n border: 1px solid var(--border);\n background: var(--card-2);\n color: var(--text);\n font-size: 0.9rem;\n font-weight: 600;\n cursor: pointer;\n transition: background 120ms ease, border-color 120ms ease, color 120ms ease;\n}\n\n.legend-btn .swatch {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 2px solid;\n background: transparent;\n}\n\n.legend-btn.off {\n color: var(--muted);\n opacity: 0.75;\n}\n\n.legend-btn.off .swatch {\n background: transparent !important;\n}\n\n.legend-btn.on {\n border-color: rgba(255, 255, 255, 0.18);\n}\n\n.legend-btn.clear {\n border-color: rgba(255, 138, 138, 0.6);\n color: #ff8a8a;\n background: rgba(255, 138, 138, 0.08);\n}\n\n/* ---- Panels ---- */\n.panels {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));\n gap: 18px;\n}\n\n.panel {\n background: var(--card-2);\n border: 1px solid var(--border);\n border-radius: 10px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-bottom: 1px solid var(--border);\n font-size: 0.9rem;\n}\n\n.episode-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: inline-block;\n}\n\n.panel-title {\n font-weight: 700;\n}\n\n.panel-meta {\n margin-left: auto;\n color: var(--muted);\n font-size: 0.8rem;\n}\n\n.panel-svg {\n display: block;\n background: radial-gradient(\n circle at 50% 45%,\n rgba(255, 255, 255, 0.03),\n transparent 70%\n );\n}\n\n.panel-footer {\n padding: 8px 14px;\n border-top: 1px solid var(--border);\n font-size: 0.85rem;\n color: var(--text);\n min-height: 36px;\n display: flex;\n align-items: center;\n}\n\n.panel-footer .muted {\n margin: 0;\n font-size: 0.82rem;\n}\n\n.footer {\n color: var(--muted);\n font-size: 0.88rem;\n text-align: center;\n margin-top: 8px;\n}\n\n@media (max-width: 720px) {\n .page {\n padding: 24px 14px 48px;\n }\n .card {\n padding: 16px;\n }\n .panels {\n grid-template-columns: 1fr;\n }\n}","index.jsx","import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { App } from './App.jsx';\nconst root = createRoot(document.getElementById('root'));\nroot.render();","README.md","index.html","\n\n \n Star Wars Edges — Dataset Explorer\n \n \n \n \n

\n \n \n","slug","lz7UqooXRhjP","Fork from AI: Implement Visualization Idea 1","description","Loads and documents the starwars_edges.csv project dataset (1013 rows, 4 columns).","ownerType","ownerId","projectId","XaoPaPVcDianLUytniVF7","visibility","public","isTemplate","headCommitId","0pAwl6MJJ8xLjraPrurds","startCommitId","forkedFrom","forkedFromVisibility","unlisted",1791304254267,1791313553481,"publishedAt",1791313553478,"isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]