2d:null 2e:["$","title",null,{"children":"Delaware 2s Scheduling Demo | Sam Zagrobelny | Observable"}] 33:Tc74,viewof pools = { const root = d3.create("div").attr("class", "vb"); const node = root.node(); const titles = [...new Set(schedule.map(d => d.pool))]; const byPool = t => schedule.filter(d => d.pool === t).sort((a, b) => a.order - b.order).map(d => d.team); const all = titles.flatMap(byPool); const slices = (names, sizes) => { let i = 0; return sizes.map(s => names.slice(i, i += s)); }; const order = [], values = new Map(); const sync = () => { node.value = order.map(id => values.get(id)); node.dispatchEvent(new Event("input", { bubbles: true })); }; const mount = (svg, { id, key, names, cx, cy, r }) => { order.push(id); makeRing.buildRing(svg, { key, names, slider: false, cx, cy, r, onChange: pairs => { const playing = new Set(pairs.flat()); values.set(id, { title: id, names, pairs, waiting: names.filter(t => !playing.has(t)) }); sync(); } }); }; // pack a list of groups into one panel's svg as a d3 grid of rings const packRings = (parent, title, groups, keyPrefix, cols) => { const n = groups.length; cols = cols || Math.ceil(Math.sqrt(n)); const rows = Math.ceil(n / cols); const R = 105, slotW = 2 * R + 250, slotH = 2 * R + 96, W = slotW * cols, H = slotH * rows; const panel = parent.append("div").attr("class", "vb panel").style("width", Math.min(1040, 320 * cols) + "px"); if (title) panel.append("div").attr("class", "cap").text(title); const svg = panel.append("svg").attr("viewBox", `0 0 ${W} ${H}`); const x = d3.scaleBand().domain(d3.range(cols)).range([0, W]); const y = d3.scaleBand().domain(d3.range(rows)).range([0, H]); groups.forEach((names, i) => { const cx = x(i % cols) + x.bandwidth() / 2, top = y(Math.floor(i / cols)), size = names.length; svg.append("text").attr("class", "subcap").attr("x", cx).attr("y", top + 26).attr("text-anchor", "middle") .text(`${size} teams${size % 2 ? " · one waits" : " · nobody waits"}`); mount(svg, { id: `${keyPrefix}#${i}`, key: `${keyPrefix}.${i}`, names, cx, cy: top + slotH / 2 + 14, r: R }); }); }; // "optimal" chooses the divisions; "hypothetical" decides whether each is broken into rings of 4+ const divisions = optimal ? slices(all, evenGroups(all.length, titles.length)).map((names, i) => ({ title: `Group ${i + 1} · ${names.length} teams`, names, key: `vb.opt.${i}`, subKey: `vb.optsub.${i}` })) : titles.map((t, i) => ({ title: t, names: byPool(t), key: `vb.pool.${t}`, subKey: `vb.hyp.${i}` })); const wrap = root.append("div").attr("class", "vb wrap"); divisions.forEach(d => { if (hypothetical) { const sizes = splitGroups(d.names.length, 4); packRings(wrap, d.title, slices(d.names, sizes), d.subKey, sizes.length); } else { const panel = wrap.append("div").attr("class", "vb panel wide"); panel.append("div").attr("class", "cap").text(d.title); panel.append("div").attr("class", "cap2").text(`${d.names.length} teams · ${d.names.length % 2 ? "one waits" : "nobody waits"}`); mount(panel.append("svg"), { id: d.key, key: d.key, names: d.names }); } }); sync(); return node; }34:T2a92,makeRing = { const MIN = 4, MAX = 16, DEFAULT = 8; const clamp = (v,a,b) => Math.max(a, Math.min(b, v)); const lowBits = b => (1 << b) - 1; const matchingMask = n => { let m=0; for (let k=0; k+1 localStorage.setItem(key, `${n}:${mask}`); save(); const labelOf = k => fixed ? names[k] : 'T' + (k+1); const currentPairs = () => { const out = []; for (let k=0; k>k)&1) out.push([labelOf(k), labelOf((k+1)%n)]); return out; }; const emit = () => { if (opts.onChange) opts.onChange(currentPairs()); }; let sliderLabel; if (useSlider) { const ctrl = d3.select(svgSel.node().parentNode).insert('div','svg').attr('class','ctrl'); sliderLabel = ctrl.append('label'); ctrl.append('input').attr('type','range') .attr('min',MIN).attr('max',MAX).attr('step',1).attr('value',n) .on('input', function() { const newN = +this.value; mask &= lowBits(Math.min(n, newN) - 1); n = newN; save(); sliderLabel.text(`Teams: ${n}`); draw(); emit(); }); sliderLabel.text(`Teams: ${n}`); } // draw into a caller-positioned group (compact, shared svg) or take over the whole svg let root; if (opts.cx != null) { root = svgSel.append('g').attr('transform', `translate(${opts.cx},${opts.cy})`); } else { const SIZE = fixed ? 600 : 380; root = svgSel.attr('viewBox', `0 0 ${SIZE} ${SIZE}`) .append('g').attr('transform', `translate(${SIZE/2},${SIZE/2-4})`); } function draw() { root.selectAll('*').remove(); const otherOf = k => (k+1)%n; const POS = d3.range(n).map(k => { const a = -Math.PI/2 + k*2*Math.PI/n; return { k, x: R*Math.cos(a), y: R*Math.sin(a), label: labelOf(k) }; }); const EDGES = d3.range(n); const on = k => (mask >> k) & 1; const A = k => POS[k], B = k => POS[otherOf(k)]; const mid = k => [ (A(k).x+B(k).x)/2, (A(k).y+B(k).y)/2 ]; const ex1=k=>A(k).x, ey1=k=>A(k).y, ex2=k=>B(k).x, ey2=k=>B(k).y; const shown = new Array(n).fill(false); const setEdge = e => { mask &= ~(1<<((e-1+n)%n)); mask &= ~(1<<((e+1)%n)); mask |= 1< { const g = enter.append('g').attr('class','pair').style('display','none'); g.append('line').attr('class','half h1'); g.append('line').attr('class','half h2'); return g; }); pairs.each(function(k){ const a=[A(k).x,A(k).y], b=[B(k).x,B(k).y], g=d3.select(this); g.select('.h1').attr('x1',a[0]).attr('y1',a[1]).attr('x2',a[0]).attr('y2',a[1]); g.select('.h2').attr('x1',b[0]).attr('y1',b[1]).attr('x2',b[0]).attr('y2',b[1]); }); root.append('g').selectAll('line').data(EDGES).join('line') .attr('x1',ex1).attr('y1',ey1).attr('x2',ex2).attr('y2',ey2) .attr('stroke','transparent').attr('stroke-width',18).style('cursor','pointer') .on('mouseenter', (ev,k) => highlightEdge(k, true)) .on('mouseleave', (ev,k) => highlightEdge(k, false)) .on('click', (ev,k) => { if (on(k)) mask &= ~(1<`translate(${d.x},${d.y})`); const dot = nodeG.append('circle').attr('r',RNODE).classed('team-out', true); nodeG.append('title'); // hover tooltip (filled in by update) if (fixed) { nodeG.append('text').attr('class','name').each(function(d){ const ux=d.x/R, uy=d.y/R, pad=RNODE+9; d3.select(this) .attr('x', ux*pad).attr('y', uy*pad) .attr('text-anchor', ux>0.25 ? 'start' : ux<-0.25 ? 'end' : 'middle') .attr('dominant-baseline', uy>0.3 ? 'hanging' : uy<-0.3 ? 'auto' : 'middle') .text(d.label); }); } else { nodeG.append('text').attr('class','tlabel').text(d=>d.label); } const colorTeam = (team, live) => dot.filter(d => d.k === team).classed('team-ok', live).classed('team-out', !live); // hover tooltip text: who team k plays first, then second (or "either" when unmatched) const titleFor = k => { const me = labelOf(k), prevT = labelOf((k-1+n)%n), nextT = labelOf((k+1)%n); if (on(k)) return `${me} plays ${nextT} THEN ${prevT}`; // right link set if (on((k-1+n)%n)) return `${me} plays ${prevT} THEN ${nextT}`; // left link set return `${me} plays ${nextT} OR ${prevT}`; // unmatched }; // click a team to connect one of its two links, then the other; hover highlights the team nodeG.style('cursor','pointer') .on('click', (ev,d) => { const k = d.k, R = k, L = (k-1+n)%n; // team k's right / left link const occupied = j => on(j) || on((j-1+n)%n); if (on(R)) setEdge(L); // already matched on the right → toggle to the left else if (on(L)) setEdge(R); // already matched on the left → toggle to the right else { // unmatched → take an unoccupied neighbour first const rFree = !occupied((k+1)%n), lFree = !occupied((k-1+n)%n); setEdge(rFree || !lFree ? R : L); } save(); update(true); emit(); }) .on('mouseenter', (ev,d) => highlightTeam(d.k, true)) .on('mouseleave', (ev,d) => highlightTeam(d.k, false)); // hover a link → highlight the link plus both of its teams function highlightEdge(k, hl) { ringLines.filter(e => e === k).classed('hl', hl); pairs.filter(e => e === k).selectAll('.half').classed('hl', hl); dot.filter(d => d.k === k || d.k === (k+1)%n).classed('hl', hl); } // hover a team → highlight it, and (when it's paired) its link + the other team function highlightTeam(k, hl) { dot.filter(d => d.k === k).classed('hl', hl); const e = on(k) ? k : on((k-1+n)%n) ? (k-1+n)%n : -1; if (e >= 0) highlightEdge(e, hl); } function update(animate) { pairs.each(function(k){ const want = !!on(k); if (want === shown[k]) return; shown[k] = want; const g = d3.select(this), h1 = g.select('.h1'), h2 = g.select('.h2'); const a=[A(k).x,A(k).y], b=[B(k).x,B(k).y], m=mid(k); h1.classed('live',false).classed('pending',true); h2.classed('live',false).classed('pending',true); if (want) { g.style('display',null); const arrive = (half, team) => { half.classed('pending',false).classed('live',true); colorTeam(team,true); }; if (animate) { const grow = (half, fromPt, team) => { const len = Math.hypot(m[0]-fromPt[0], m[1]-fromPt[1]); const thr = len > 9 ? 1 - 4.5/len : 1; half.interrupt().transition().duration(DUR).ease(d3.easeCubicOut) .attr('x2',m[0]).attr('y2',m[1]) .tween('flip', function(){ let done=false; return t => { if (!done && t>=thr) { done=true; arrive(half,team); } }; }); }; grow(h1, a, k); grow(h2, b, otherOf(k)); } else { h1.interrupt().attr('x2',m[0]).attr('y2',m[1]); arrive(h1,k); h2.interrupt().attr('x2',m[0]).attr('y2',m[1]); arrive(h2,otherOf(k)); } } else { colorTeam(k,false); colorTeam(otherOf(k),false); const hide = () => g.style('display','none'); if (animate) { h1.interrupt().transition().duration(DUR).ease(d3.easeCubicOut).attr('x2',a[0]).attr('y2',a[1]); h2.interrupt().transition().duration(DUR).ease(d3.easeCubicOut).attr('x2',b[0]).attr('y2',b[1]).on('end',hide); } else { h1.interrupt().attr('x2',a[0]).attr('y2',a[1]); h2.interrupt().attr('x2',b[0]).attr('y2',b[1]); hide(); } } }); nodeG.select('title').text(d => titleFor(d.k)); } update(false); } draw(); emit(); } // Observable wrapper: build a self-contained container node and return it AS A VIEW — // node.value holds the current selection and an 'input' event fires whenever it changes, // so `viewof ring = makeRing(...)` exposes a live, reactive value. function makeRing(opts = {}) { const container = d3.create("div").attr("class", "vb panel" + (opts.names ? " wide" : "")); if (opts.title) container.append("div").attr("class","cap").text(opts.title); if (opts.subtitle) container.append("div").attr("class","cap2").text(opts.subtitle); container.append("svg"); const node = container.node(); buildRing(container.select("svg"), Object.assign({}, opts, { onChange: pairs => { const playing = new Set(pairs.flat()); const waiting = (opts.names || []).filter(t => !playing.has(t)); node.value = { title: opts.title, pairs, waiting }; node.dispatchEvent(new Event("input", { bubbles: true })); } })); return node; } makeRing.buildRing = buildRing; // expose the lower-level builder for compact packing return makeRing; } 35:T603,html``36:[] 31:{"id":"ebf6313ef3b93a4a","slug":"delaware-2s-scheduling-demo","title":"Delaware 2s Scheduling Demo","thumbnail":"91872348a519356ed345f9a40f8c1bf8fdc5dad64d904e0ebc997832fe8bf04d","access_level":"public","create_time":"$D2026-06-09T15:31:06.672Z","update_time":"$D2026-06-09T18:12:03.177Z","view_time":null,"first_public_time":"$D2026-06-09T18:12:42.247Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae408ec4ab3ed80b","login":"strangesast","name":"Sam Zagrobelny","avatar_url":"https://avatars-next.observableusercontent.com/e9d8fdb30b8bcafc3546da19751b0da7a17fb4fcf6ac4a9e0683b75e1e4d9706","tier":"starter_2024"},"version":140,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1fb93b8ce9ad9d2e","login":"strangesast","name":"Sam Zagrobelny","avatar_url":"https://avatars-next.observableusercontent.com/e9d8fdb30b8bcafc3546da19751b0da7a17fb4fcf6ac4a9e0683b75e1e4d9706","tier":null}],"members":[{"type":"individual","id":"1fb93b8ce9ad9d2e","login":"strangesast","name":"Sam Zagrobelny","avatar_url":"https://avatars-next.observableusercontent.com/e9d8fdb30b8bcafc3546da19751b0da7a17fb4fcf6ac4a9e0683b75e1e4d9706","tier":null,"role":"editor"},{"type":"team","id":"ae408ec4ab3ed80b","login":"strangesast","name":"Sam Zagrobelny","avatar_url":"https://avatars-next.observableusercontent.com/e9d8fdb30b8bcafc3546da19751b0da7a17fb4fcf6ac4a9e0683b75e1e4d9706","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Delaware 2s Scheduling Demo","cells":[{"id":0,"value":"# Delaware 2s Scheduling Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"Each pool of teams is shown as a ring where every team plays its two neighbours; you may click the\nlinks between teams to choose who plays whom first, and a live table shows the resulting schedule.\nBecause no team can play two games at once, it's a quick way to see who plays and who has to wait.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"viewof teams = Inputs.range(\n [4, 16],\n { step: 1, label: \"Teams\",\n value: Math.min(16, Math.max(4, +((localStorage.getItem(\"vb.ring\") || \"\").split(\":\")[0]) || 8)) }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof split = Inputs.toggle({ label: \"Split ≥4\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"demo = {\n if (!split)\n return makeRing({ key: \"vb.ring\", n: teams, slider: false, title: `Demo Ring (${teams} teams)` });\n const wrap = d3.create(\"div\").attr(\"class\", \"vb wrap\");\n splitGroups(teams, 4).forEach((size, i) =>\n wrap.node().appendChild(\n makeRing({ key: `vb.ring.${i}`, n: size, slider: false, title: `Ring ${i + 1} (${size} teams)` })\n )\n );\n return wrap.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"If _Split ≥4_ is enabled, fewer teams will arrive with no team available to play.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"## Monday 6/8/2026\nHere are the teams from this day and who they were scheduled to play. As there are three 9-team pools, at least one team must wait in each configuration.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"playOrder = Inputs.table(\n pools.flatMap(p => {\n const L = p.names.length;\n return p.names.map((team, i) => {\n const prev = p.names[(i - 1 + L) % L], next = p.names[(i + 1) % L];\n const pair = p.pairs.find(([a, b]) => a === team || b === team);\n const first = pair ? (pair[0] === team ? pair[1] : pair[0]) : null;\n return { Team: team,\n Plays: first ? `${first} THEN ${first === prev ? next : prev}` : `${prev} OR ${next}` };\n });\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"One ring per pool from the schedule above. Click links to choose who each team plays first. Enable the split toggle to see a hypothetical optimization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"viewof hypothetical = Inputs.toggle({ label: \"Division Subgroups\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof optimal = Inputs.toggle({ label: \"Resize divisions\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"schedule = [\n [\"Pool 1\", [\"Gina/Chris\",\"Angelene Belle/Nick\",\"Carly/Alex\",\"Michele/Justin\",\"Laura/Jeff\",\"Julie/Thom\",\"Angela/Justin\",\"Molly/Chris\",\"Brittany/Shane\"]],\n [\"Pool 2\", [\"Ashley/Dylan\",\"Lauren/Greg\",\"Haley/Anthony\",\"Lindsay/Calvin\",\"Kayla/Josh\",\"Zoey/Shawn\",\"Viktorija/Matt\",\"Tori/Larry\",\"Kaylee/Sam\"]],\n [\"Pool 3\", [\"Jakki/Caan\",\"Molly/Ryan\",\"Sara/Shaun\",\"Caitlyn/Joshua\",\"Madi/Troy\",\"Sofia/Jordan\",\"Hannah/Taylor\",\"Rebecca/Bryan\",\"Sophia/Damian\"]],\n].flatMap(([pool, teams]) => teams.map((team, order) => ({\n pool, order, team,\n plays: [teams[(order + teams.length - 1) % teams.length], teams[(order + 1) % teams.length]],\n})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"splitGroups = (total, target) => {\n const g = Math.max(1, Math.floor(total / target));\n return Array.from({ length: g }, (_, i) => i < g - 1 ? target : total - target * (g - 1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"evenGroups = (total, divisions) => {\n const D = Math.max(1, Math.min(divisions, Math.floor(total / 4)));\n let base = Math.max(4, 4 * Math.round(total / D / 4));\n while (D > 1 && total - base * (D - 1) < 4) base -= 4;\n return Array.from({ length: D }, (_, i) => i < D - 1 ? base : total - base * (D - 1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"poolRing = (title, key) => makeRing({\n key, title, slider: false, subtitle: \"9 teams · one waits each round\",\n names: schedule.filter(d => d.pool === title)\n .sort((a, b) => a.order - b.order)\n .map(d => d.team)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"