import { useEffect, useMemo, useRef, useState } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/josh_johnson_qbs/eb3df885-2288-420a-ae89-3527a6150bcd', alias: 'josh_johnson_qbs' } ]; // 6 Degrees of Josh Johnson — force-directed graph of every QB who shared an // NFL roster with Josh Johnson, and all their connections to each other. // Hand-rolled canvas renderer (no three.js / react-force-graph) so it runs // in the MotherDuck Dive runtime. const JJ_GREEN = "#2d6a4f"; const JJ_LIGHT = "#52b788"; const MUTED = "#6b7280"; const BG_DARK = "#0d1b2a"; const BG_LIGHT = "#f8fafc"; const RED = "#dc2626"; const DRAWER_W = 320; const GRAPH_H = 600; const hexA = (hex, a) => { const n = parseInt(hex.replace("#", ""), 16); return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`; }; const yrs = (first, last) => first === last ? `${first}` : `${first}–${last}`; const N = (v) => (v == null ? 0 : Number(v)); export default function JoshJohnsonDive() { const qbsQ = useSQLQuery( `SELECT name, is_jj, teams_count, degree_from_jj, image_b64 FROM "josh_johnson_qbs".main.quarterbacks` ); const edgesQ = useSQLQuery( `SELECT qb_a, qb_b, shared_count, first_year, last_year FROM "josh_johnson_qbs".main.edges` ); const stintsQ = useSQLQuery( `SELECT qb, team, year FROM "josh_johnson_qbs".main.stints ORDER BY qb, year` ); const qbs = useMemo( () => (qbsQ.data ?? []).map((r) => ({ ...r, teams_count: N(r.teams_count), degree_from_jj: N(r.degree_from_jj) })), [qbsQ.data] ); const edges = useMemo( () => (edgesQ.data ?? []).map((r) => ({ ...r, shared_count: N(r.shared_count), first_year: N(r.first_year), last_year: N(r.last_year) })), [edgesQ.data] ); const stints = useMemo(() => stintsQ.data ?? [], [stintsQ.data]); const loading = qbsQ.isLoading || edgesQ.isLoading || stintsQ.isLoading; const [render, setRender] = useState("2d"); const [focusId, setFocusId] = useState(null); const [history, setHistory] = useState([]); const [resetSignal, setResetSignal] = useState(0); const byName = useMemo(() => new Map(qbs.map((q) => [q.name, q])), [qbs]); const stintsOf = useMemo(() => { const m = new Map(); for (const s of stints) { if (!m.has(s.qb)) m.set(s.qb, []); m.get(s.qb).push(s); } return m; }, [stints]); const adj = useMemo(() => { const m = new Map(); const add = (a, b) => { if (!m.has(a)) m.set(a, new Set()); m.get(a).add(b); }; for (const e of edges) { add(e.qb_a, e.qb_b); add(e.qb_b, e.qb_a); } return m; }, [edges]); const edgeMap = useMemo(() => { const m = new Map(); for (const e of edges) m.set(`${e.qb_a}|||${e.qb_b}`, e); return m; }, [edges]); const getEdge = (a, b) => { const key = [a, b].sort().join("|||"); return edgeMap.get(key) ?? null; }; const view = useMemo(() => { if (!focusId) return { nodes: qbs, edges }; const ids = new Set([focusId]); for (const nb of adj.get(focusId) ?? []) ids.add(nb); return { nodes: qbs.filter((q) => ids.has(q.name)), edges: edges.filter((e) => ids.has(e.qb_a) && ids.has(e.qb_b)), }; }, [focusId, qbs, edges, adj]); const hostRef = useRef(null); const [graphW, setGraphW] = useState(900); const [graphH, setGraphH] = useState(GRAPH_H); const imgCache = useRef(new Map()); useEffect(() => { for (const q of qbs) { if (!q.image_b64 || imgCache.current.has(q.name)) continue; const im = new Image(); im.src = q.image_b64; imgCache.current.set(q.name, im); } }, [qbs]); useEffect(() => { const el = hostRef.current; if (!el) return; const measure = () => { setGraphW(Math.max(320, el.clientWidth)); setGraphH(Math.max(320, el.clientHeight)); }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, [focusId]); const goTo = (id) => { if (id !== focusId) { setHistory((h) => [...h, focusId ?? "__ALL__"]); setFocusId(id); } }; const back = () => setHistory((h) => { if (!h.length) return h; const p = h[h.length - 1]; setFocusId(p === "__ALL__" ? null : p); return h.slice(0, -1); }); const showAll = () => { setFocusId(null); setHistory([]); }; const jjTeamCount = stints.length > 0 ? [...new Set(stints.filter((s) => s.qb === "Josh Johnson").map((s) => s.team))].length : 0; const crumb = focusId ? `${focusId}'s connections (${(adj.get(focusId) ?? new Set()).size} teammates)` : `All ${qbs.length} QBs · ${edges.length} connections`; return (

6 Degrees of Josh Johnson

Every QB who shared an NFL roster with Josh Johnson — the most-traveled QB in NFL history {jjTeamCount > 0 ? ` (${qbs.length > 0 ? qbs.length - 1 : "…"} roster-mates across ${jjTeamCount} teams, 2008–2024)` : ""}. Click any face to explore their connections.

{["2d", "3d"].map((m) => ( ))}

{crumb}

Josh Johnson Direct roster-mate · Thicker lines = shared multiple rosters

{loading ? (

Loading data…

) : ( )}

{focusId && byName.get(focusId) && (

({ name: n, edge: getEdge(focusId, n) }))} go={goTo} />

)}

Click any face to focus · ← Back / ⌂ Show all to navigate · drag to pan/orbit · scroll to zoom. Josh Johnson is highlighted in gold. NFL teams only (excludes CFL/XFL stints). Data from Wikipedia & Pro Football Reference. Built with MotherDuck + Claude.

); } // ── Force-directed canvas graph ──────────────────────────────────────────────── const REP = 3600, SPRING = 0.06, L0 = 40, CENTER = 0.03, DAMP = 0.84, A_MIN = 0.015; const nodeR = (q) => q.is_jj ? 20 : 10; function GraphCanvas({ nodes, edges, mode, focusId, width, height, imagesRef, onNodeClick, resetSignal }) { const canvasRef = useRef(null); const posRef = useRef(new Map()); const cam = useRef({ yaw: 0.4, pitch: -0.2, dist: 700, zoom: 1, panx: 0, pany: 0 }); const alphaRef = useRef(1); const projRef = useRef([]); const drag = useRef({ active: false, moved: false, x: 0, y: 0 }); const R = { nodes, edges, mode, focusId, width, height, imagesRef, onNodeClick }; const ref = useRef(R); ref.current = R; const stepSim = () => { const { nodes: ns, edges: ls, mode: md } = ref.current; const P = posRef.current, a = alphaRef.current, planar = md === "2d"; for (let i = 0; i < ns.length; i++) { const pi = P.get(ns[i].name); if (!pi) continue; for (let j = i + 1; j < ns.length; j++) { const pj = P.get(ns[j].name); if (!pj) continue; const dx = pi.x - pj.x, dy = pi.y - pj.y, dz = planar ? 0 : pi.z - pj.z; const d2 = dx*dx + dy*dy + dz*dz + 0.01; const f = (REP * a) / d2, inv = 1 / Math.sqrt(d2); const fx = f*dx*inv, fy = f*dy*inv, fz = f*dz*inv; pi.vx += fx; pi.vy += fy; pi.vz += fz; pj.vx -= fx; pj.vy -= fy; pj.vz -= fz; } } for (const e of ls) { const p = P.get(e.qb_a), q = P.get(e.qb_b); if (!p || !q) continue; const dx = q.x-p.x, dy = q.y-p.y, dz = planar ? 0 : q.z-p.z; const d = Math.sqrt(dx*dx + dy*dy + dz*dz) + 0.001; const f = (SPRING * a * (d - L0)) / d; const fx = f*dx, fy = f*dy, fz = f*dz; p.vx += fx; p.vy += fy; p.vz += fz; q.vx -= fx; q.vy -= fy; q.vz -= fz; } for (const n of ns) { const p = P.get(n.name); if (!p) continue; const pull = n.is_jj ? 0.15 : CENTER; p.vx += -pull * a * p.x; p.vy += -pull * a * p.y; if (!planar) p.vz += -CENTER * a * p.z; p.vx *= DAMP; p.vy *= DAMP; p.vz *= DAMP; p.x += p.vx; p.y += p.vy; if (planar) { p.z = 0; p.vz = 0; } else p.z += p.vz; } alphaRef.current = a > A_MIN ? a * 0.988 : a; }; const project = (p) => { const { width: w, height: h, mode: md } = ref.current; if (md === "2d") { const z = cam.current.zoom; return { sx: w/2 + p.x*z + cam.current.panx, sy: h/2 + p.y*z + cam.current.pany, scale: z, depth: 0 }; } const { yaw, pitch, dist } = cam.current; const cyaw = Math.cos(yaw), syaw = Math.sin(yaw); const x = p.x*cyaw + p.z*syaw, zr = -p.x*syaw + p.z*cyaw; const cp = Math.cos(pitch), sp = Math.sin(pitch); const y2 = p.y*cp - zr*sp, z2 = p.y*sp + zr*cp; const viewZ = Math.max(1, dist - z2); const F = Math.min(w, h) * 0.9, k = F/viewZ; return { sx: w/2 + x*k, sy: h/2 - y2*k, scale: k, depth: z2 }; }; const fit = (resetAngles) => { const ps = [...posRef.current.values()]; if (!ps.length) return; const { width: w, height: h, mode: md } = ref.current; if (md === "2d") { let maxR = 1; for (const p of ps) maxR = Math.max(maxR, Math.hypot(p.x, p.y)); cam.current.zoom = (Math.min(w, h)/2*0.88)/maxR; cam.current.panx = 0; cam.current.pany = 0; } else { let maxR = 1; for (const p of ps) maxR = Math.max(maxR, Math.hypot(p.x, p.y, p.z)); if (resetAngles) { cam.current.yaw = 0.4; cam.current.pitch = -0.2; } const F = Math.min(w, h)*0.9, target = Math.min(w, h)/2*0.82; cam.current.dist = Math.max(maxR*1.8, (maxR*F)/target); } }; const nodeKey = nodes.map((n) => n.name).join("|") + "|" + mode; useEffect(() => { const P = new Map(); const n = nodes.length || 1, RAD = 220; nodes.forEach((nd, i) => { if (nd.is_jj) { P.set(nd.name, { x: 0, y: 0, z: 0, vx: 0, vy: 0, vz: 0 }); return; } const ang = i * 2.399963, t = (i + 0.5) / n, rr = RAD * Math.cbrt(t), yy = 1 - 2*t; const ring = Math.sqrt(Math.max(0, 1 - yy*yy)); P.set(nd.name, { x: rr*Math.cos(ang)*ring, y: rr*yy, z: mode === "2d" ? 0 : rr*Math.sin(ang)*ring, vx: 0, vy: 0, vz: 0 }); }); posRef.current = P; alphaRef.current = 1; for (let t = 0; t < 260; t++) stepSim(); fit(true); // eslint-disable-next-line react-hooks/exhaustive-deps }, [nodeKey]); useEffect(() => { fit(true); }, [resetSignal]); useEffect(() => { fit(false); }, [width, height]); useEffect(() => { let raf = 0; const loop = () => { const cv = canvasRef.current; if (cv) { const { width: w, height: h, mode: md, focusId: fid, nodes: ns, edges: ls, imagesRef: imgs } = ref.current; if (alphaRef.current > A_MIN) { stepSim(); stepSim(); } const dpr = Math.min(2, window.devicePixelRatio || 1); if (cv.width !== Math.round(w*dpr) || cv.height !== Math.round(h*dpr)) { cv.width = Math.round(w*dpr); cv.height = Math.round(h*dpr); } const ctx = cv.getContext("2d"); if (ctx) { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const dark = md === "3d"; ctx.fillStyle = dark ? BG_DARK : BG_LIGHT; ctx.fillRect(0, 0, w, h); const proj = new Map(); let zmin = Infinity, zmax = -Infinity; for (const nd of ns) { const p = posRef.current.get(nd.name); if (!p) continue; const pr = project(p); proj.set(nd.name, pr); if (pr.depth < zmin) zmin = pr.depth; if (pr.depth > zmax) zmax = pr.depth; } const zspan = Math.max(1, zmax - zmin); for (const e of ls) { const a = proj.get(e.qb_a), b = proj.get(e.qb_b); if (!a || !b) continue; const alpha = dark ? 0.45 : 0.35; const isJJEdge = e.qb_a === "Josh Johnson" || e.qb_b === "Josh Johnson"; ctx.strokeStyle = isJJEdge ? hexA(JJ_LIGHT, dark ? 0.7 : 0.5) : (dark ? `rgba(148,163,184,${alpha})` : `rgba(100,116,139,${alpha})`); ctx.lineWidth = Math.min(e.shared_count * 1.2, 4); ctx.beginPath(); ctx.moveTo(a.sx, a.sy); ctx.lineTo(b.sx, b.sy); ctx.stroke(); } const order = ns.filter((nd) => proj.has(nd.name)).sort((p, q) => proj.get(p.name).depth - proj.get(q.name).depth); projRef.current = []; for (const nd of order) { const pr = proj.get(nd.name); const r = Math.max(4, nodeR(nd) * pr.scale); const fade = dark ? 0.5 + 0.5 * ((pr.depth - zmin) / zspan) : 1; ctx.globalAlpha = fade; const ring = nd.name === fid ? RED : nd.is_jj ? "#f59e0b" : JJ_LIGHT; const im = imgs.current.get(nd.name); if (im && im.complete && im.naturalWidth) { ctx.save(); ctx.beginPath(); ctx.arc(pr.sx, pr.sy, r, 0, 2*Math.PI); ctx.clip(); ctx.drawImage(im, pr.sx-r, pr.sy-r, r*2, r*2); ctx.restore(); ctx.beginPath(); ctx.arc(pr.sx, pr.sy, r, 0, 2*Math.PI); ctx.lineWidth = nd.is_jj ? 4 : (nd.name === fid ? 3 : 2); ctx.strokeStyle = ring; ctx.stroke(); } else { ctx.beginPath(); ctx.arc(pr.sx, pr.sy, r, 0, 2*Math.PI); ctx.fillStyle = ring; ctx.fill(); } ctx.globalAlpha = 1; projRef.current.push({ id: nd.name, sx: pr.sx, sy: pr.sy, r }); if (nd.is_jj || nd.name === fid || r > 12) { const label = nd.is_jj ? "Josh Johnson" : nd.name.split(" ").slice(-1)[0]; ctx.fillStyle = dark ? "rgba(226,232,240,0.95)" : "#1e293b"; ctx.font = `${nd.is_jj ? 700 : 500} ${nd.is_jj ? 12 : 10}px ui-sans-serif`; ctx.textAlign = "center"; ctx.fillText(label, pr.sx, pr.sy + r + 10); } } } } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { const cv = canvasRef.current; if (!cv) return; const down = (e) => { drag.current = { active: true, moved: false, x: e.clientX, y: e.clientY }; }; const move = (e) => { if (!drag.current.active) return; const dx = e.clientX - drag.current.x, dy = e.clientY - drag.current.y; if (Math.abs(dx) + Math.abs(dy) > 3) drag.current.moved = true; drag.current.x = e.clientX; drag.current.y = e.clientY; if (ref.current.mode === "3d") { cam.current.yaw += dx*0.008; cam.current.pitch = Math.max(-1.4, Math.min(1.4, cam.current.pitch + dy*0.008)); } else { cam.current.panx += dx; cam.current.pany += dy; } }; const up = (e) => { if (drag.current.active && !drag.current.moved) { const rect = cv.getBoundingClientRect(), mx = e.clientX - rect.left, my = e.clientY - rect.top; let best = null, bd = 1e9; for (const q of projRef.current) { const d = Math.hypot(q.sx - mx, q.sy - my); if (d <= q.r + 6 && d < bd) { bd = d; best = q.id; } } if (best) ref.current.onNodeClick(best); } drag.current.active = false; }; const wheel = (e) => { e.preventDefault(); if (ref.current.mode === "3d") cam.current.dist = Math.max(60, Math.min(5000, cam.current.dist*(1 + e.deltaY*0.0012))); else cam.current.zoom = Math.max(0.05, Math.min(20, cam.current.zoom*(1 - e.deltaY*0.0012))); }; cv.addEventListener("pointerdown", down); window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); cv.addEventListener("wheel", wheel, { passive: false }); return () => { cv.removeEventListener("pointerdown", down); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); cv.removeEventListener("wheel", wheel); }; }, []); return

6 Degrees of Josh Johnson

Comments