2d:null 2e:["$","title",null,{"children":"WNBA DP Slots Test / Data | elanareb | Observable"}] 33:Tc5f,spiral = { const height = 900; const width = 900; const center={x:width/2,y:height/2}; // const svg = d3.select(DOM.svg(width, height)); const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto"); const container = d3.create("div") .style("position", "relative") container.style("display", "inline-block") .style("width", "100%") .style("height", "auto"); container.append(() => svg.node()); const graph= svg .append('g') .attr('class', 'graph') .attr('transform',`translate(${width / 2}, ${height / 2}) scale(1.5) translate(${-width / 2}, ${-height / 2})`); const v = .05 const f = radius / (20 * v) const games = generateYearData(radius, startAngle, v, f) // each date card const datesPart = graph.append('g').attr('class', 'games') const datePart = datesPart.selectAll('g') .data(games) .enter() .append('g') .attr('class', 'date') .attr('id', (d) => 'i' + d.index) .style("pointer-events", "all"); datePart.append('path').attr('d', (d) => generatePath(d, center, f, v)) .attr('fill', (d) => d.color).attr('stroke', 'rgba(150,150,150,.6)') .attr('opacity', (d) => d.color === "gray" ? .6: 1); const midAngle = ((d) => d.startAngle + d.endAngle) / 2; const rotation = -midAngle * (180 / Math.PI); datePart .append('text') .text((d) => d.teamGame === "ID" ? d.team : null) .attr('text-anchor', 'middle') .attr('font-size', 7) .attr('fill', "white") .attr('transform', d => { const midAngle = (d.startAngle + d.endAngle) / 2; const x = center.x + (d.startRadius - ((radius + 70) / 30)) * Math.sin(midAngle); const y = center.y + (d.startRadius - (radius + 70) / 44) * Math.cos(midAngle); const rot = -midAngle * 180 / Math.PI; const flipped = rot > 90 || rot < -90; return `translate(${x},${y}) rotate(${flipped ? rot + 180 : rot})`; }); const tooltip = container .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", "50") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "all") .style("display", "none"); datePart.on("mouseover", function(event) { const d = d3.select(this).datum(); if (d.teamGame === "ID") return; const [mouseX, mouseY] = d3.pointer(event, container.node()); tooltip .style("display", "block") .style("left", (mouseX + 12) + "px") .style("top", (mouseY + 12) + "px") .html(`${d.team} - Game ${d.teamGame} of 24
${d.playerName || "Not Used"} || ${d.date ? dateFormat(d.date) : "Not Used"}`) .style("visibility",(d.teamGame === "ID" ? "hidden" : "visible")); }) .on("mousemove", function(event) { const [mouseX, mouseY] = d3.pointer(event, container.node()); tooltip .style("left", (mouseX + 15) + "px") .style("top", (mouseY + 15) + "px");}) .on("mouseleave", function() { tooltip.style("display", "none"); }); return container.node(); }34:T6b6, timeline = Plot.plot({ symbol: { domain: ["Released", "Promoted", "Snatched"], range: ["diamond", "triangle", "star"], legend: true}, marginLeft: 90, marks: [ // graph the bars Plot.barX(players, { y: "teamSpot", x1: (d) => (d.startDate), x2: (d) => (d.endDate), fill: (d) => getTeamColors(d.team).color1, sort: {y: "fill"}, rx: 3, }), // player names Plot.text(players, { y: "teamSpot", x: (d) => (d.startDate), dx: 10, text: (d) => (d.player), textAnchor: "start", fontSize: 10, fill: "white", strokeWeight: 1, fontWeight: 500 }), // end date behavior Plot.dot(players.filter(d=> d.transaction), { y: "teamSpot", x: "endDate", r: 6, dx: 5, symbol: "transaction", fill: (d) => getTeamColors(d.team).color2, sort: {y: "fill"}, }), // teams on axis Plot.text(players.filter(d=>d.spot === 1), { y: "teamSpot", frameAnchor: "left", dx: 10, text: "team", textAnchor: "end", fill: "black", }), //tooltip Plot.tip(players, Plot.pointerY({ y: "teamSpot", x1: "startDate", x2: "endDate", dx: 30, title: (d) => { let text = `Player: ${d.player}\n Team: ${d.team}\n Signed ${dateFormat(d.startDate)}`; if (d.transaction) {text += `\n${d.transaction} on ${dateFormat(d.endDate)}`} return text;} })) ], height: 500, width: 928, x: { grid: true}, y: { axis: null }, })35:Tbb4,function playerChart(player) { // Declare the chart dimensions and margins. const tooltip = d3.select("body") .selectAll(".svg-tooltip") .data([null]) .join("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#D5E3E8") .style("color", "black") .style("padding", "1px 10px") .style("border-radius", "2px") .style("border-color", "white") const width = 400; const height = 100; const yHeight = (height/2)-5 const marginTop = 40; const marginRight = 0; const marginBottom = 40; const marginLeft = 40; // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain([1,2,3,4,5,6,7,8,9,10,11,12,13,14]) .range([marginLeft, width - marginRight]) .padding(.001); const y = d3.scalePoint() .domain([1,2]) // The row names D3 looks for .range([marginTop + 10, height - 2*yHeight]); // Spaced out across the actual canvas height // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a rect for each bar. const team = (playersList.find(d=> d.player === player)).team const transaction = (playersList.find(d=> d.player === player)).transaction svg.append("g") .selectAll("rect") .data(playerGames(player)) .join("rect") .attr("x", (d) => x(d.playerNumber)) .attr("fill", (d) => d.gameID !== "Blank Game" ? getTeamColors(team).halfscale(d.playerNumber) : "white") .attr("width", x.bandwidth()) .attr("height", yHeight) .attr("stroke", "black") // Border color .attr("stroke-width", ".5px") // Border thickness .on("mouseover", function(event, d) { const gameCheck = d.gameID !== "Blank Game"; gameCheck === true ? tooltip.html(` ${dateFormat(d.date)}
${d.team} vs ${d.opponent}`) .style("visibility", "visible") : tooltip.html("") .style("visibility", "hidden"); }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); svg.append("g") .attr("transform", `translate(${marginLeft+10},-7)`) // .call(d3.axisLeft(y).tickFormat((y) => devPool[team][(y-1)]?.player || "No Player")) .attr("text-anchor", "start") .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width/2) .attr("y", yHeight+30) .attr("fill", "black") .attr("font-size", 22) .attr("font-family", "baskerville") .attr("text-anchor", "middle") .text(player)) // Return the SVG element. return svg.node(); }36:T14c3,function gamesChart(team) { // Declare the chart dimensions and margins. const tooltip = d3.select("body") .selectAll(".svg-tooltip") .data([null]) .join("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#D5E3E8") .style("color", "black") .style("padding", "1px 10px") .style("border-radius", "2px") .style("border-color", "white") const width = 800; const height = 200; const yHeight = (height/4)-5 const marginTop = 40; const marginRight = 0; const marginBottom = 40; const marginLeft = 40; // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain(teamGames[team].map(d => d.gameNumber)) .range([marginLeft, width - marginRight]) .padding(0.3); const y = d3.scalePoint() .domain([1,2]) // The row names D3 looks for .range([marginTop + 10, height - 2*yHeight]); // Spaced out across the actual canvas height // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .attr("class", "availability-background") .selectAll("rect") .data(devPool[team] || []) .join("rect") .attr("x", (stint) => { // Find the first game number that falls within this player's stint const firstGame = teamGames[team].find(g => g.date >= stint.startDate && g.date <= stint.endDate); return firstGame ? x(firstGame.gameNumber) : marginLeft; }) .attr("y", (stint) => (stint.spot === 1 ? y(1) : y(2)) -5) .attr("width", (stint) => { const activeGames = teamGames[team].filter(g => g.date >= stint.startDate && g.date <= stint.endDate); if (activeGames.length === 0) return 0; const firstGame = activeGames[0]; const lastGame = activeGames[activeGames.length - 1]; const startX = x(firstGame.gameNumber); const endX = x(lastGame.gameNumber) + 2.5*(x.bandwidth()); return (endX-startX)}) .attr("height", yHeight+12) .attr("fill", (stint) => { const colorKey = stint.spot === 1 ? "main1" : "main2"; return chroma(teamColors[team]?.[colorKey]).tint(.75) || "white"; }) .attr("opacity", 1) .attr("rx", 1) // //background tooltip .on("mouseover", function(event, d) { const elementData = d3.select(this).datum(); const active = elementData.player || "Slot Empty" // tooltip.html(`${active}`) tooltip.html(`${active}
${dateFormat(elementData?.startDate)} - ${dateFormat(elementData?.endDate)}`) .style("visibility", "visible"); }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); // Add a rect for each bar. svg.append("g") .selectAll("rect") .data(teamGames[team]) .join("rect") .attr("x", (d) => x(d.gameNumber)) .attr("y", (d) => d.spot === 1 ? y(1) : y(2)) .attr("fill", (d) => { const isMatch = checkGame(d, team) const color = d.spot === 1 ? "main1" : "main2" return isMatch ? teamColors[team][color]: "#CDCDCD"; } ) .attr("opacity", (d) => d.date < new Date() ? 1 : .5) .attr("width", x.bandwidth()) .attr("height", yHeight) .attr("stroke", "black") // Border color .attr("stroke-width", ".5px") // Border thickness //TOOLTIP FEATURES .on("mouseover", function(event, d) { const playerName = (activeDP(d, team))?.player || "Slot Empty" const gameCheck = checkGame(d, team) gameCheck === true ? tooltip.html(` ${dateFormat(d.date)}
${playerName}`) .style("visibility", "visible") : tooltip.html(` ${dateFormat(d.date)}`) .style("visibility", "visible"); }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); // Add the x-axis and label. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.append("text") .attr("y", marginBottom-5) .attr("x", marginLeft) .attr("fill", "black") .attr("text-anchor", "start") .attr("font-size", "22") .attr("font-family", "baskerville") .text("Game Number")); svg.append("g") .attr("transform", `translate(${marginLeft+10},-7)`) // .call(d3.axisLeft(y).tickFormat((y) => devPool[team][(y-1)]?.player || "No Player")) .attr("text-anchor", "start") .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width/2) .attr("y", 28) .attr("fill", "black") .attr("font-size", 22) .attr("font-family", "baskerville") .attr("text-anchor", "middle") .text(team)); // Return the SVG element. return svg.node(); }37:T1392,devPool = ({ Mystics:[ {player: "Alicia Florez Getino", spot: 1, startDate: new Date("5/7/26"), endDate: new Date("6/4/26"), transaction: "Promoted"}, {player: "Darianna Littlepage-Buggs", spot: 2, startDate: new Date("4/17/26"), endDate: new Date("9/24/26")}], Liberty:[ {player: "Marine Fauthoux", spot: 1, startDate: new Date("4/18/26"), endDate: new Date("9/24/26")}, {player: "Alex Fowler", spot: 2, startDate: new Date("5/14/26"), endDate: new Date("5/22/26"), transaction: "Released"}, {player: "Anneli Maley", spot: 2, startDate: new Date("5/23/26"), endDate: new Date("9/24/26")}], Dream:[ {player: "Amy Okonkwo", spot: 1, startDate: new Date("5/12/26"), endDate: new Date("7/8/26"), transaction: "Released"}, {player: "Indya Nivar", spot: 1, startDate: new Date("7/9/26"), endDate: new Date("9/24/26")}, {player: "Jaylyn Sherrod", spot: 2, startDate: new Date("6/29/26"), endDate: new Date("9/24/26")}], Sky:[ {player: "Aicha Coulibaly", spot: 1, startDate: new Date("5/7/26"), endDate: new Date("6/28/26"), transaction: "Promoted"}, {player: "Chloe Bibby", spot: 1, startDate: new Date("6/30/26"), endDate: new Date("9/24/26")}, {player: "Maddy Westbeld", spot: 2, startDate: new Date("4/17/26"), endDate: new Date("9/24/26")}], Lynx:[ {player: "Emese Hof", spot: 1, startDate: new Date("5/2/26"), endDate: new Date("5/27/26"), transaction: "Released"}, {player: "Eliška Hamzová", spot: 1, startDate: new Date("5/28/26"), endDate: new Date("7/10/26"), transaction: "Promoted"}, {player: "Liatu King", spot: 2, startDate: new Date("5/8/26"), endDate: new Date("6/28/26"), transaction: "Promoted"},{player: "Liatu King", spot: 2, startDate: new Date("7/10/26"), endDate: new Date("9/24/26")}], Storm:[ {player: "Taina Mair", spot: 1, startDate: new Date("5/5/26"), endDate: new Date("9/24/26")}, {player: "Taylor Thierry", spot: 2, startDate: new Date("5/14/26"), endDate: new Date("6/8/26"), transaction: "Promoted"}], Aces: [{player: "Ta'niya Latson", spot: 1, startDate: new Date("7/8/26"), endDate: new Date("9/24/26")}], Sun:[ {player: "Ashlon Jackson", spot: 1, startDate: new Date("5/6/26"), endDate: new Date("9/24/26")}, {player: "Hailey Van Lith", spot: 2, startDate: new Date("5/30/26"), endDate: new Date("9/24/26")}], Fever:[ {player: "Justine Pissot", spot: 1, startDate: new Date("4/18/26"), endDate: new Date("7/8/26"), transaction: "Snatched"}, {player: "Bree Hall", spot: 2, startDate: new Date("5/5/26"), endDate: new Date("9/24/26")}], Wings:[ {player: "Costanza Verona", spot: 1, startDate: new Date("5/6/26"), endDate: new Date("9/24/26")}, {player: "Dulcy Fankam Mendjiadeu", spot: 2, startDate: new Date("4/17/26"), endDate: new Date("6/2/26"),transaction: "Released"}, {player: "Haley Jones", spot: 2, startDate: new Date("6/21/26"), endDate: new Date("9/24/26")}], Sparks:[ {player: "Kate Martin", spot: 1, startDate: new Date("5/9/26"), endDate: new Date("7/6/26"), transaction: "Promoted"}, {player: "Tonie Morgan", spot: 1, startDate: new Date("7/16/26"), endDate: new Date("9/24/26")}, {player: "Laura Ziegler", spot: 2, startDate: new Date("4/14/26"), endDate: new Date("7/5/26"), transaction: "Released"}, {player: "Alissa Pili", spot: 2, startDate: new Date("7/6/26"), endDate: new Date("9/24/26")}], Mercury:[ {player: "Shay Ciezki", spot: 1, startDate: new Date("5/7/26"), endDate: new Date("6/4/26"), transaction: "Released"}, {player: "Kiana Williams", spot: 1, startDate: new Date("6/4/26"), endDate: new Date("6/19/26"), transaction: "Snatched"}, {player: "Shay Ciezki", spot: 1, startDate: new Date("6/22/26"), endDate: new Date("9/24/26")}, {player: "Marta Suarez", spot: 2, startDate: new Date("4/17/26"), endDate: new Date("7/9/26"), transaction: "Promoted"}, {player: "Quionche Carter", spot: 2, startDate: new Date("7/9/26"), endDate: new Date("9/24/26")}], Valkyries:[ {player: "Miela Sowah", spot: 1, startDate: new Date("5/5/26"), endDate: new Date("9/24/26")}, {player: "Ashten Prechtel", spot: 2, startDate: new Date("5/21/26"), endDate: new Date("9/24/26")}], Tempo:[ {player: "Mariella Fasoula", spot: 1, startDate: new Date("5/4/26"), endDate: new Date("5/24/26"), transaction: "Released"}, {player: "Ornella Bankole", spot: 1, startDate: new Date("6/29/26"), endDate: new Date("9/24/26")}, {player: "Nikolina Milic", spot: 2, startDate: new Date("5/9/26"), endDate: new Date("5/26/26"), transaction: "Promoted"}], Fire:[ {player: "Frieda Bühner", spot: 1, startDate: new Date("5/5/26"), endDate: new Date("5/20/26"), transaction: "Promoted"}, {player: "Jordan Harrison", spot: 1, startDate: new Date("5/22/26"), endDate: new Date("9/24/26")}, {player: "Holly Winterburn", spot: 2, startDate: new Date("5/12/26"), endDate: new Date("5/21/26"), transaction: "Promoted"}, {player: "Sania Feagin", spot: 2, startDate: new Date("6/24/26"), endDate: new Date("9/24/26")}], })38:T4b3, function generatePath(d, center, f, v) { let path = `M${center.x + d.startRadius * Math.sin(d.startAngle)} ${center.y + d.startRadius * Math.cos(d.startAngle)} ` let angle = d.startAngle let r = d.startRadius while (angle > d.endAngle) { path += `L${center.x + r * Math.sin(angle)} ${center.y + r * Math.cos(angle)} ` angle -= Math.PI / f r -= v } const thickness = 1 * f * v path += `L${center.x + (d.endRadius) * Math.sin(d.endAngle)}${' '} ${center.y + (d.endRadius) * Math.cos(d.endAngle)}` path += `L${center.x + (d.endRadius - thickness) * Math.sin(d.endAngle - 2 * Math.PI)}${' '} ${center.y + (d.endRadius - thickness) * Math.cos(d.endAngle - 2 * Math.PI)}` angle = d.endAngle - 2 * Math.PI r = d.endRadius - thickness while (angle < d.startAngle - 2 * Math.PI) { path += `L${center.x + r * Math.sin(angle)} ${center.y + r * Math.cos(angle)} ` angle += Math.PI / f r += v } path += `L${center.x + (d.startRadius - thickness) * Math.sin(d.startAngle - 2 * Math.PI)}${' '} ${center.y + (d.startRadius - thickness) * Math.cos(d.startAngle - 2 * Math.PI)}` path += 'Z' return path }39:[] 31:{"id":"9952356abf19fc90","slug":"wnba-dp-slots-test-data","title":"WNBA DP Slots Test / Data","thumbnail":"a550dedc5f1c3a2d87ecfec2db8acef476337b892cf62eb642991e3c98d4e0e8","access_level":"public","create_time":"$D2026-06-07T13:12:00.117Z","update_time":"$D2026-07-19T04:59:27.935Z","view_time":null,"first_public_time":"$D2026-06-22T01:03:37.285Z","has_unpublished_edits":null,"fork":{"id":"6d3daa402433a500","slug":"spiral-calendar","title":"Spiral Calendar","owner":{"id":"de1b7c090c00fc3f","login":"mwindson","name":"mwindson"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bf21e523b2a91f03","login":"elanareb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/64bc0d1326d34c6c8dfcf75cc837a8bee3501380caeaf1f00591025706a8f9db","tier":"starter_2024"},"version":3125,"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":"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":2,"collection":null,"type":"notebook","body":{"title":"WNBA DP Slots Test / Data","cells":[{"id":0,"value":"md`# WNBA DP Slots Test / Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"gameCharts = {\n const teams = Object.keys(teamGames);\n const container = html`

`;\n\n teams.forEach(team => {\n const cell = html`

`;\nconst teamChart = gamesChart(team);\n\n cell.appendChild(teamChart);\n container.appendChild(cell);\n });\n\n\n return container;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2173,"value":" playersList = Object.entries(devPool).flatMap(([team, roster]) =>\n roster.map(d => ({\n team,\n player: d.player,\n endDate: d.endDate,\n transaction: d.transaction})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2170,"value":"playerCharts = {\n const players = Object.entries(devPool).flatMap(([team, roster]) =>\n roster.map(d => ({\n team,\n player: d.player\n }))\n).sort((a,b) => (b.team-a.team));;\n const container = html`

`;\n\n players.forEach(d => {\n const cell = html`

`;\nconst teamChart = playerChart(d.player, d.team);\n\n cell.appendChild(teamChart);\n container.appendChild(cell);\n });\n\n\n return container;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2180,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2185,"value":"getTeamColors(\"Sparks\").color1","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2183,"value":"teamColors","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"viewof settings = (\n Inputs.form(\n {\n // plotHeight: 300,\n plotWidth: Inputs.range([100, 900], {label: \"Plot width\", step: 1, value: 900}),\n barHeight: Inputs.range([0, 20], {label: \"Adjust bar height\", step: 1, value: 0}),\n textPosition: Inputs.range([-50, 50], {label: \"Label dodge\", step: 1}),\n fontSize: Inputs.range([8, 24], {label: \"Font size\", step: 1, value: 14}),\n barRoundness: Inputs.range([0, 20], {label: \"Bar roundness\", step: 1, value: 3}),\n gridlines: Inputs.radio([\"x\", \"y\", \"both\", \"none\"], {label: \"Gridlines\", value: \"x\"}),\n panelBorder: Inputs.radio([\"show\", \"hide\"], {label: \"Panel border\", value: \"hide\"})\n },\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2161,"value":"gamesChart(\"Liberty\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2165,"value":"playerChart(\"Kate Martin\", \"Sparks\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2164,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2175,"value":"games[games.length]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2174,"value":"lastDate = {\n const testArray = games.filter(d=> d.date != \"Invalid Date\")\n const last = games[testArray.length-1].date\nreturn last}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"$36","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":" function activeDP(d, team) {\n const gameDate = d.date;\n\n \nconst devPlayer = devPool[team];\n if (!devPlayer) return false;\n\n \n const foundStint = devPlayer.find(stint => {\n return stint.spot === d.spot && gameDate >= stint.startDate && gameDate <= stint.endDate;\n });\n\nif (!foundStint) return false; \n return foundStint\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2167,"value":"playerGames(\"Kate Martin\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2166,"value":"function playerGames (inputPlayer) {\n const playerObject = playersList.find(d=> d.player === inputPlayer);\n const team = playerObject.team;\n const endDate = new Date(playerObject.endDate);\n const playerArray = [];\n\n\n games.forEach(game => {\nif (inputPlayer === game.name) {\nplayerArray.push(game);\n }\n});\n\n while (playerArray.length < 12) {\n playerArray.push({\n gameID: \"Blank Game\",\n team: team,\n name: inputPlayer,\n playerNumber: playerArray.length+1\n });\n }\n return playerArray;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"playerGames(\"Kate Martin\")[9].date","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2067,"value":" function checkGame(d, team) {\n\nconst targetPlayerName = activeDP.player;\n return mergedArray.some(game =>\n String(game.id) === String(d.id) && \n game.playerName === activeDP(d, team).player\n )\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"teamGames = {\n\n const teamGames = {};\nwnbaTeams.forEach(team => {\n \n const homeArray = allGames.filter(d => \n d.homeTeam === team)\n.map(d => ({\n id: +(d.id),\n team: d.homeTeam,\n type: \"home\",\n opponent: d.awayTeam,\n gameNumber: d.homeNumber,\n index: d.homeIndex,\n date:d.date}))\n \n const awayArray = allGames.filter(d => \n d.awayTeam === team)\n.map(d => ({\n id: +(d.id),\n team: d.awayTeam,\n type: \"away\",\n opponent: d.homeTeam,\n gameNumber: d.awayNumber,\n index: d.awayIndex,\n date:d.date}))\n\n const fullSeason = [...homeArray, ...awayArray].sort((a, b) => a.gameNumber - b.gameNumber);\nconst version1 = fullSeason.map(d => ({ ...d, spot: 1 }));\n const version2 = fullSeason.map(d => ({ ...d, spot: 2 }));\n\nteamGames[team] = [...version1, ...version2];\n\n });\n return teamGames;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"devPool = Roster contracts. players = all rosters mapped out","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2172,"value":" players = Object.entries(devPool).flatMap(([team, roster]) =>\n roster.map(d => ({\n team,\n player: d.player,\n startDate: d.startDate,\n endDate: d.endDate,\n transaction: d.transaction,\n spot: d.spot,\n teamSpot: `${team} ${d.spot}`\n }))\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"dateFormat = (date) => {return new Date(date).toLocaleString(\"en-US\", {year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\ntimeZone: \"UTC\"})}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2176,"value":"dateFormat(lastDate)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"IMPORTS AND DATA SOURCES:\n\n_No need to read this part! This is just the mess behind the scenes of the WIP_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1556,"value":" allGames = {\n const data = await d3.csv(getCsvUrl(\"https://docs.google.com/spreadsheets/d/1qYAaXBwQYRSWjCg8C_s33etS95Wukl_1oVq_DiZrmJg/edit?gid=1341845299#gid=1341845299\"))\n\n const allGames = data.map(d => ({\n id: d.espn_id,\n homeTeam: d.home_name,\n homeNumber: d.home_index,\n homeIndex: `${d.home_name} ${d.home_index}`,\n date: new Date (d.date),\n awayTeam: d.away_name,\n awayNumber: d.away_index,\n awayIndex: `${d.away_name} ${d.away_index}`}))\n \n return allGames\n\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"Inspiration taken from https://observablehq.com/@mwindson/spiral-calendar ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function generateYearData(radius, angle, v, f) {\n const gameArray = mergedArray\n const gameCount = gameArray.length\n let prevEndAngle = angle\n let prevEndRadius = radius-60\n let index = 0\n const calEndRadius = (startAngle, startRadius, endAngle) =>startRadius - (startAngle - endAngle) * f * v / (Math.PI)\n\n while (index < (gameCount)) {\n const item = gameArray[index];\n const teamName = item.team;\n const gameNumber = item.teamGame;\n const stepMultiplier = (item.teamGame === \"ID\") ? 2 : 1;\n item.color = item.playerGameNumber >= 1 ? getTeamColors(teamName).scale(gameNumber): (item.teamGame === \"ID\") ? \"black\" : \"gray\";\n item.startAngle = prevEndAngle;\n item.startRadius = prevEndRadius;\n item.endAngle = divSpiralAngle(radius, prevEndAngle, angle, gameCount, stepMultiplier);\n item.endRadius = calEndRadius(item.startAngle, item.startRadius, item.endAngle);\n\n prevEndAngle = item.endAngle;\n prevEndRadius = item.endRadius;\nindex++;\n } \n\n return gameArray\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// radian Not Angle\nstartAngle=18*Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"function divSpiralAngle(radius, startAngle, allAngle, count, num = 1) {\n const cal = (a) => (a * Math.sqrt(1 + a * a) + Math.log(a + Math.sqrt(1 + a * a)))\nconst totalLength = 1.8 * radius * (cal(allAngle) - cal(2 * Math.PI))\nconst target = cal(startAngle) - (totalLength / count) * 0.5 / radius * num\n let left = 2 * Math.PI \n let right = startAngle\nwhile ((right - left) > 0.0001) \n {\n const mid = (left + right) / 2\n if (Math.abs(cal(mid) - target) < 0.001) {\n return mid\n } else if (cal(mid) > target) {\n right = mid\n } else {\n left = mid\n }\n }\n return left\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"import {wnbaTeams, teamColors} from \"a0ab31ef7c658291\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"blankArray = {\n const teams = wnbaTeams;\n const games = [\"ID\",1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];\n const blankArray = wnbaTeams.flatMap(team => \n games.map(game => ({\n id: `${team} ${game}`,\n team: team,\n teamGame: game,\n})));\n return blankArray \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"mergedArray = {\n const sourceGames = games; \n const sourceBlank = blankArray;\n\n return sourceBlank.map(blankItem => {\n const actualGameData = sourceGames.find(g => String(g.id).trim() === String(blankItem.id).trim());\n\n return {\n ...blankItem,\n playerGameNumber: actualGameData ? actualGameData.playerNumber : null,\n opponent: actualGameData ? actualGameData.opponent : \"Not Played\",\n id: actualGameData ? actualGameData.gameID : \"Not Played\",\n result: actualGameData ? actualGameData.result : null,\n date: actualGameData ? new Date(actualGameData.date) : null,\n myId: actualGameData ? actualGameData.myId : null,\n playerName: actualGameData ? actualGameData.name : null,\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"function getTeamColors(teamName) {\n const color1 = teamColors[teamName].main1\n const color2 = teamColors[teamName].main2\n const color3 = teamColors[teamName].main3\n const light = teamColors[teamName].light\n const dark = teamColors[teamName].dark\n const accent = teamColors[teamName].accent\n\n\n const scale24 = d3.scaleLinear()\n .domain([0, 24])\n .range([color1, color2])\n .interpolate(d3.interpolateRgb);\n\n const scale12 = d3.scaleLinear()\n .domain([0, 12])\n .range([color1, color2])\n .interpolate(d3.interpolateRgb);\n\n\n return {scale:scale24,\n halfscale: scale12,\n color1: color1,\n color2: color2,\n color3: color3,\n light: light,\n dark: dark,\n accent: accent}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"import {getCsvUrl} from \"@observablehq/google-sheets-starter\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"url=(\"https://docs.google.com/spreadsheets/d/15H7DQTruqIPOdsQdC27Tw3qCFRqywfDfPkpKqECNQcE/edit?gid=354739236#gid=354739236\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":" games = {\n const data = await d3.csv(getCsvUrl(url))\n\n const games = data.map(d => ({\n myId: +d[\"My ID\"],\n gameID: +d[\"ESPN Game ID\"],\n name: d.Player,\n teamNumber: +d[\"Team Game #\"],\n playerNumber: +d[\"Player Game #\"],\n id: `${d.Team} ${d[\"Team Game #\"]}`,\n date: new Date(d.Date),\n opponent: d.opponent_team_name,\n result: d.team_winner,\n team: d.Team,\n gameIndex: d.game_index}))\n \n return games\n\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":" gamesMap = new Map(\n games.map(g => [`${g.team}_${g.teamNumber}`, g])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"import {addTooltip} from \"@siliconjazz/basic-svg-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2162,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"radius=340","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2186,"value":"Gantt format taken from: https://observablehq.com/@observablehq/build-your-own-gantt-chart , modified","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"2","titling":"auto"}} 32:"$31:body"