2b:null 2c:["$","title",null,{"children":"WNBA 2026 Roster Connections | elanareb | Observable"}] 31:T1e0f,chart = { // Specify the dimensions of the chart. const width = 928 const height = 800 // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeDark2); // filter by team + set up variables const activeTeams = selectedTeams.includes("All") ? teamNames : selectedTeams; const source = activeTeams?.length ? allTeams.filter(t => activeTeams.includes(t.name)) : allTeams; const nodes = source .flatMap(t => t.nodes) .map(d => ({...d})); const filteredNodes = pastPlayers === false ? nodes.filter(d => d.status === "Current") : nodes; const links = source.flatMap(t => t.links).map(d => ({...d})); // to account for players being duplicated const idCounts = {}; filteredNodes.forEach(n => { idCounts[n.id] = (idCounts[n.id] || 0) + 1; }); filteredNodes.forEach(n => { if (idCounts[n.id] > 1) n.id = `${n.id} (${n.team})`; }); links.forEach(l => { if (idCounts[l.source] > 1) l.source = `${l.source} (${l.team})`; if (idCounts[l.target] > 1) l.target = `${l.target} (${l.team})`; }); const strokeScale = d3.scaleLinear() .domain([0, 100]) .range([1, 10]); // Create a simulation with several forces. const nodeCount = nodes.length const chargeStrength = -500 + (2 / Math.sqrt(nodeCount)) * 500 const collisionRadius = Math.max(10, 100 - (nodeCount)/2) const simulation = d3.forceSimulation(nodes) .force("forceInABox", forceInABox() .strength(.5) .template("force") .groupBy("team") .forceNodeSize(10) .size([width, height]) ) .force("link", d3.forceLink(links) .id(d => d.id) .strength(d => { const thickness = strokeScale(d.value.length); return thickness / 5; // thicker = pulls harder (0.1 to 1.0) }) ) .force("charge", d3.forceManyBody().strength(chargeStrength)) .force("collision", d3.forceCollide((collisionRadius))) .force("x", d3.forceX(928 / 2).strength(1)) .force("y", d3.forceY(800 / 2).strength(1)) .on("tick", ticked) .alpha(0.4); const scale = Math.max(1, Math.sqrt(allTeams.flatMap(t => t.nodes).length / nodes.length) + 1) const r = nodes.length < 30 ? 8 : 5 // Create the SVG container. const svg = d3.create("svg") .attr("width", 928) .attr("height", 800) .attr("viewBox", [0, 0, 1000, 800]) .attr("style", "max-width: 100%; height: 100%;"); // Add a line for each link, and a circle for each node. const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("line") .attr("stroke-width", d => strokeScale(+d.value.length)) .attr("stroke", d => color(allData.linkGroup(d.value))) //create nodes const node = svg.append("g") .attr("stroke", "#010101") .attr("stroke-width", 1.5) .selectAll() .data(filteredNodes) .join("g") node.append("circle") .attr("r", (1.5*r)) .attr("fill", d =>{ const colors = allData.teamColors[d.team] let nodeColor = colors.main3 if (d.type === "Player") {nodeColor = colors.main1} if (d.type === "Coach") {nodeColor = colors.main2} if (d.status === "Past") {return chroma(nodeColor).tint(.25)} return chroma(nodeColor) }) node.append("text") .text(d => d.id) .attr ("x", 15) .attr ("y", 4) .attr("font-size","15px") .attr("fill", "#000000") .attr("letter-spacing", "1px") .attr("font-family","verdana") .attr("visibility", nodes.length > 30 ? "hidden" : "visible") link.append("text") .text(d => d.value) .attr ("x", 15) .attr ("y", 4) .attr("font-size","15px") .attr("fill", "#000000") .attr("letter-spacing", "1px") .attr("font-family","verdana") const padding = 200 const zoomedWidth = Math.max(width, (width / scale)) const zoomedHeight = Math.max(height, (height / scale)) node.on("click", (event, d) => { node.select("circle") .attr("opacity", n => { if (n === d) return 1 return links.some(l => (l.source === d && l.target === n) || (l.target === d && l.source === n) ) ? 1 : 0.05 }) node.select("text") .attr("opacity", n => { if (n === d) return 1 return links.some(l => (l.source === d && l.target === n) || (l.target === d && l.source === n) ) ? 1 : 0.1 }) svg.on("click", (event) => { if (event.target.tagName !== "circle") { link.style("stroke", d => color(allData.linkGroup(d.value))) .attr("opacity", 1) node.select("circle").attr("opacity", 1) // add this line node.select("text").attr("opacity", 1) node.attr("opacity", 1) // add this to reset the g element too } }) link .attr("opacity", l => l.source.id === d.id || l.target.id === d.id ? .9 : 0.1) .style("pointer-events", l => l.source.id === d.id || l.target.id === d.id ? "all" : "none") }) const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); node.on("mouseover", (event, d) => { tooltip .style("opacity", 1) .html(` ${d.id}
${d.team || "N/A"} || ${d.type || "N/A"} `); }) .on("mousemove", (event) => { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px"); }) .on("mouseout", () => { tooltip.style("opacity", 0); }); link.on("mouseover", (event, d) => { tooltip .style("opacity", 1) .html(` ${d.source.id}→ ${d.target.id}
${d.value || "N/A"} `); }) .on("mousemove", (event) => { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px"); }) .on("mouseout", () => { tooltip.style("opacity", 0); }); // Add a drag behavior. node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Set the position attributes of links and nodes each time the simulation ticks. function ticked() { 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); node.attr("transform", d => `translate(${d.x},${d.y})`) } // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.1).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended() { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; nodes.attr("cursor", "grab"); } function zoomed({transform}) { svg.attr("transform", transform);} // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); simulation.tick(50); simulation.alpha(0.1); return svg.node(); }32:[] 2f:{"id":"00947202cba6688e","slug":null,"title":"WNBA 2026 Roster Connections","thumbnail":"c6b19651eb6df9540da4364abe6cbad48b9fe994e4bd8394ed11af28a9f78eb2","access_level":"public","create_time":"$D2026-05-12T01:35:40.343Z","update_time":"$D2026-06-10T21:25:02.616Z","view_time":null,"first_public_time":"$D2026-05-29T21:24:01.326Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bf21e523b2a91f03","login":"elanareb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/64bc0d1326d34c6c8dfcf75cc837a8bee3501380caeaf1f00591025706a8f9db","tier":"starter_2024"},"version":1105,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e765e26c04173392","login":"elana-rebitzer","name":"Elana Rebitzer","avatar_url":"https://avatars-next.observableusercontent.com/86c640fd93660a2960948f8d6891372ec9da9c56705de19e8e89123fefe15036","tier":null}],"members":[{"type":"team","id":"bf21e523b2a91f03","login":"elanareb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/64bc0d1326d34c6c8dfcf75cc837a8bee3501380caeaf1f00591025706a8f9db","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e765e26c04173392","login":"elana-rebitzer","name":"Elana Rebitzer","avatar_url":"https://avatars-next.observableusercontent.com/86c640fd93660a2960948f8d6891372ec9da9c56705de19e8e89123fefe15036","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"44a4d9cdda66cd75","slug":"completed-graphics","title":"Completed Graphics","owner":{"id":"bf21e523b2a91f03","login":"elanareb","name":""}},"type":"notebook","body":{"title":"WNBA 2026 Roster Connections","cells":[{"id":0,"value":"# WNBA 2026 Roster Connections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"**What is this?**\nA visualization of how the 2026 WNBA teams and front offices are connected. \n\n**How do I read this?**\nPlayers/Coaches/Front Office are color coded based on their team's primary/secondary/tertiary colors. Links mean a past connection (before this season), with thicker lines representing more connections between players. Links are colored based on the league (W, Unrivaled, AU, Overseas, International, etc).\n\nHover over any player or link to see more information. Use the \"select\" option to zoom in by team.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"

WNBA PLAYER CONNECTIONS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"viewof selectedTeams = Inputs.select(teamOptions,\n { label: \"Select team\",multiple: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"viewof pastPlayers = Inputs.toggle({label: \"Include Past Players?\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"

BY THE NUMBERS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"**Average Connections per Team**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"Inputs.table(allData.ratios, {\n columns: [\"team\", \"count\"],\n header: {\n team: \"Team\",\n count: \"Links Per Person\"\n },\n sort: \"count\", reverse: true}\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"**Most Popular Players**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":948,"value":"Inputs.table(allData.playerCounts, {\n columns: [\"player\", \"team\", \"count\"],\n header: {\n player: \"Person\",\n team: \"Team\",\n count: \"Links Per Person\"\n },\n sort: \"count\", reverse: true}\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"**SOURCES**:\nData sourced from [Across the Timeline](https://acrossthetimeline.com/wnba/transactions.html#), Wikipedia (player pages), FIBA Basketball (player pages)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":658,"value":"**DATA IMPORTS**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1043,"value":"playerMap = d3.index(allData.players, d => d.team, d=> d.id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":" teamNames = allTeams.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":" teamOptions = [\"All\", ...teamNames]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {allData, allTeams} from \"a0ab31ef7c658291\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"allTeams","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"import {forceInABox} from \"@john-guerra/custom-cluster-force-layout-using-force-in-a-box\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"import {chroma} from \"@gka/chroma-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"chroma('#ff3399').brighten()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"