34:["$","title",null,{"children":"High school girls historical basketball stats by team | Takoma Design | Observable"}] 3c:Tf55,chartDivergingDotHomeAwayWinsLoss = Plot.plot({ title: `${mySchool} girls varsity basketball: wins and losses, home/away, 2013-2024`, subtitle: md`

vs. MCPS teams, regular and playoff games
hover over each circle for game info
○ indicates home game

`, //caption caption: "Source: countysports.zone", x: {}, y: { type: "band", domain: gamesBySchool.season, padding: 0.2 }, marginTop: 20, marginLeft: 80, marginBottom: 50, insetLeft: 10, color: { // domain: ["home win", "away win", "home loss", "away loss"], // range: ["#a9b8c6", "#d0dbe7", "#c77a7a", "#e7acac"], domain: ["loss", "win"], range: ["#DD6D6D", "#96B9DC"], type: "categorical", legend: true, // see css declared in separate HTML cell className: "large-font" }, marks: [ //frame // Plot.frame({ fill: "#f9f9f9", fillOpacity: 1 }), // stacked dots Plot.dot( gamesBySchool.filter((d) => d.myTeam == mySchool), Plot.stackX2({ channels: { date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" }, opponent: { value: "opponent", label: "vs." }, result: { value: "result", label: "score" }, homeAway: { value: "homeOrAway", label: "home/away" } }, x: (d) => (d.winOrLoss == "win" ? 1 : -1), y: "season", r: 5, fill: "winOrLoss", stroke: "#181818", // stroke: (d) => (d.winOrLoss == "win" ? "#848f9a" : "#9b5f5f"), strokeOpacity: (d) => (d.homeOrAway == "home" ? 1 : 0), tip: { format: { px: false, x: false, y: false, date: true, result: true, opponent: true, homeAway: true, strokeOpacity: false, fill: false } } }) ), // Plot.tip( // gamesBySchool.filter((d) => d.myTeam == mySchool), // Plot.pointerX({ // y: "season", // channels: { // homeAway: { // value: "homeOrAway", // label: "home/away" // }, // result: { // value: "result", // label: "score" // }, // date: { // value: // //format date object as string // (d) => // d.date.toLocaleString(undefined, { // month: "short", // day: "numeric", // year: "numeric" // }), // label: "date" // } // }, // format: { // px: false, // x: false, // y: false, // date: true, // result: true, // homeAway: true // } // }) // ), // y axis Plot.axisY({ fill: "#333333", tickSize: 0, fontSize: 12, labelOffset: 75 }), // x axis Plot.axisX({ tickFormat: Math.abs, tickSize: 0, fill: "#333333", tickSize: 0, fontSize: 12 }), // x axis - zero mark Plot.ruleX([0], { stroke: "#333333", strokeOpacity: 1, strokeWidth: 1, interval: 1 }), //x axis label Plot.text([`← losses wins →`], { x: 0, frameAnchor: "top", dx: -5, dy: -13, fill: "#333333", fontSize: 12 }) ] })3d:T7c4,chartWinLossPercentageBySeason = Plot.plot({ title: `${mySchool} girls varsity basketball: winning percentage by season, 2013-2024`, //subtitle formatted to match rest of chart // includes sparkline to replicate MCPS average line subtitle: md`

vs. MCPS teams, regular and playoff games
${sparkline([6, 6, 6, 6], "#181818")}MCPS average by season

`, //caption caption: "Source: countysports.zone", x: { type: "band", domain: teamScoringStatsBySeason.season }, y: {}, marginBottom: 50, marks: [ //bars Plot.barY( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "winningPercentage", fill: "#9a848f" } ), //bars for county average Plot.tickY(meanWinningPercentageArray, { x: "season", y: "mean", stroke: "#181818", strokeWidth: 2, legend: true }), //bar number labels Plot.text( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "winningPercentage", text: (d) => d.winningPercentage.toFixed(3), dy: 5, lineAnchor: "top", fontSize: 14, fill: "white", fontWeight: "bold" } ), // x axis Plot.axisX({ fill: "#333333", tickSize: 0, fontSize: 12, labelOffset: 35 }), // y axis Plot.axisY({ fill: "#333333", tickSize: 0, fontSize: 12, label: "winning percentage", labelAnchor: "center", labelArrow: "none", labelOffset: "40", dx: 12, interval: 0.1 // tickFormat: (d) => `d.toFixed(3)` }), // y grid Plot.gridY({ stroke: "#F9F9F9", strokeWidth: 2, interval: 0.1 }) ] })3e:T74d,chartGamesPlayedBySeason = Plot.plot({ title: `${mySchool} girls varsity basketball: games played by season, 2013-2024`, //subtitle formatted to match rest of chart // includes sparkline to replicate MCPS average line subtitle: md`

vs. MCPS teams, regular and playoff games
${sparkline([6, 6, 6, 6], "#181818")}MCPS average by season

`, //caption caption: "Source: countysports.zone", x: { type: "band", domain: teamScoringStatsBySeason.season }, y: {}, marginBottom: 50, marks: [ //bars Plot.barY( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "gamesPlayed", fill: "#9a8f84" } ), //bars for county average Plot.tickY(meanGamesPlayedArray, { x: "season", y: "mean", stroke: "#181818", strokeWidth: 2, legend: true }), //bar number labels Plot.text( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "gamesPlayed", text: (d) => d.gamesPlayed, dy: 5, lineAnchor: "top", fontSize: 14, fill: "white", fontWeight: "bold" } ), // x axis Plot.axisX({ fill: "#333333", tickSize: 0, fontSize: 12, labelOffset: 35 }), // y axis Plot.axisY({ fill: "#333333", tickSize: 0, fontSize: 12, label: "games played", labelAnchor: "center", labelArrow: "none", labelOffset: "40", dx: 12 }), // y grid Plot.gridY({ stroke: "#F9F9F9", strokeWidth: 2, interval: 4 }) ] })3f:T743,chartPPGBySeason = Plot.plot({ title: `${mySchool} girls varsity basketball: points per game (PPG) by season, 2013-2024`, //subtitle formatted to match rest of chart // includes sparkline to replicate MCPS average line subtitle: md`

vs. MCPS teams, regular and playoff games
${sparkline([6, 6, 6, 6], "#181818")}MCPS average by season

`, //caption caption: "Source: countysports.zone", x: { type: "band", domain: teamScoringStatsBySeason.season }, y: {}, marginBottom: 50, marks: [ //bars Plot.barY( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "PPG", fill: "#84849a" } ), //bar number labels Plot.text( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "PPG", text: (d) => d.PPG.toFixed(1), dy: 5, lineAnchor: "top", fontSize: 14, fill: "white", fontWeight: "bold" } ), // x axis Plot.axisX({ fill: "#333333", tickSize: 0, fontSize: 12, labelOffset: 35 }), // y axis Plot.axisY({ fill: "#333333", tickSize: 0, fontSize: 12, label: "points per game (PPG)", labelAnchor: "center", labelArrow: "none", labelOffset: "30", dx: 12 }), // y grid Plot.gridY({ stroke: "#F9F9F9", strokeWidth: 2, interval: 10 }), //bars for county average Plot.tickY(meanPPGArray, { x: "season", y: "mean", stroke: "#181818", strokeWidth: 2, legend: true }) ] })40:T74f,chartTotalPointsBySeason = Plot.plot({ title: `${mySchool} girls varsity basketball: total points by season, 2013-2024`, //subtitle formatted to match rest of chart // includes sparkline to replicate MCPS average line subtitle: md`

vs. MCPS teams, regular and playoff games
${sparkline([6, 6, 6, 6], "#181818")}MCPS average by season

`, //caption caption: "Source: countysports.zone", x: { type: "band", domain: teamScoringStatsBySeason.season }, y: {}, marginBottom: 50, marks: [ //bars Plot.barY( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "totalPoints", fill: "#848f9a" } ), //bar number labels Plot.text( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "totalPoints", text: (d) => d.totalPoints, dy: 5, lineAnchor: "top", fontSize: 14, fill: "white", fontWeight: "bold" } ), // x axis Plot.axisX({ fill: "#333333", tickSize: 0, fontSize: 12, labelOffset: 35 }), // y axis Plot.axisY({ fill: "#333333", tickSize: 0, fontSize: 12, label: "total points", labelAnchor: "center", labelArrow: "none", labelOffset: "40", dx: 12 }), // y grid Plot.gridY({ stroke: "#F9F9F9", strokeWidth: 2, interval: 200 }), //bars for county average Plot.tickY(meanTotalPointsArray, { x: "season", y: "mean", stroke: "#181818", strokeWidth: 2, legend: true }) ] })41:Ta08,chartWinLossScoringMarginBySeason = Plot.plot({ title: `${mySchool} girls varsity basketball: Scoring margin by season, 2013-2024`, subtitle: md`

vs. MCPS teams, regular and playoff games

`, caption: "Source: countysports.zone", marginLeft: 90, marginBottom: 10, insetBottom: 30, x: { type: "band", domain: teamScoringStatsBySeason.season }, y: {}, color: { domain: ["avg. winning margin", "avg. losing margin"], range: ["#9CB7D3", "#BF7777"], type: "categorical", legend: true, // see css declared in separate HTML cell className: "large-font" }, marks: [ // bars - winning margin Plot.barY( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "meanScoreMarginWin", fill: "#9CB7D3" } ), // bars - losing margin Plot.barY( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "meanScoreMarginLose", fill: "#BF7777" } ), // text labels //bar number labels - winning Plot.text( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "meanScoreMarginWin", text: (d) => `+${d.meanScoreMarginWin.toFixed(1)}`, dy: 5, lineAnchor: "top", fontSize: 14, fill: "white", fontWeight: "bold" } ), //bar number labels - losing Plot.text( teamScoringStatsBySeason.filter((d) => d.TeamShortname == mySchool), { x: "season", y: "meanScoreMarginLose", text: (d) => d.meanScoreMarginLose.toFixed(1), dy: -5, lineAnchor: "bottom", fontSize: 14, fill: "white", fontWeight: "bold" } ), Plot.axisX({ textAnchor: "season", fill: "#333333", dy: -24, tickSize: 0, fontSize: 12 }), Plot.axisY({ fill: "#333333", tickSize: 0, fontSize: 12 }), //Y axis label Plot.textY([`← avg. losing margin avg. winning margin →`], { y: 0, frameAnchor: "left", textAnchor: "middle", fill: "#333333", fontSize: 12, rotate: 270, dx: -40, dy: -7 }), // divider axis Plot.ruleY([0], { stroke: "#ffffff", strokeWidth: 2 }) ] })42:T292c,// RESPONSIVE FACETED CHART FOR MCPS BASKETBALL // This function renders a faceted chart that adapts to different screen sizes // It transforms from a 3x8 grid on desktop to 2x12 on tablet to 1x24 on mobile chartWinsLossesByOpponent = function (options = {}) { // RESPONSIVE CODE #1: Get container width from options const containerWidth = options.width || 960; // RESPONSIVE CODE #2: Determine columns based on width // This creates the responsive layout transformation const facetColumns = containerWidth < 500 ? 1 : containerWidth < 875 ? 2 : 3; return Plot.plot( (() => { // RESPONSIVE CODE #3: Use our responsive column count instead of hard-coded value // const n = 3; // REMOVED - replaced with dynamic facetColumns const n = facetColumns; const keys = Array.from( d3.union(d3.sort(gamesToUse.map((d) => d.opponent))) ); const index = new Map(keys.map((key, i) => [key, i])); const fx = (key) => index.get(key) % n; const fy = (key) => Math.floor(index.get(key) / n); // RESPONSIVE CODE #4: Calculate facet dimensions with increased size across all layouts // First calculate available width per facet based on container width and columns const facetWidth = (containerWidth - (options.marginLeft || 40) - (options.marginRight || 40)) / n; // Apply 1:5 ratio but with a minimum height to ensure facets are never too small // The multiplier (0.3 instead of 0.2) gives us a 50% height increase compared to the 1:5 ratio const facetHeight = Math.max(facetWidth * 0.3, 120); // Minimum height of 120px // RESPONSIVE CODE #5: Calculate total chart height with the increased facet heights const totalRows = Math.ceil(keys.length / n); // Add a bit of extra space between rows to prevent crowding with larger facets const chartHeight = totalRows * (facetHeight + 40) + 80; // Increased buffer between rows (40px) and margins (80px) // RESPONSIVE CODE #8: Reduced padding values for larger facets const calculatePadding = () => { // Reduced padding values across all layouts if (n === 1) { return 0.25 + Math.min(0.08, (containerWidth - 300) / 2500); } else if (n === 2) { return 0.25 + Math.min(0.1, (containerWidth - 500) / 2000); } else { return 0.3 + Math.min(0.1, (containerWidth - 875) / 1500); } }; return { title: `${mySchool} girls varsity basketball: Wins and losses by opponent, 2013-2024`, subtitle: md`

${bar( 0.5, 15, "#96B9DC" )} ${bar( 0.5, 15, "#DD6D6D" )} bar heights correspond to margin of win or loss
▢ border shows home game (if checked above)
hover over each colored bar for specific game info

`, caption: "Source: countysports.zone", // RESPONSIVE CODE #6: Adjusted margins for larger facets marginTop: 40, // Increased from 30 marginBottom: 35, // Increased from 25 marginLeft: n === 1 ? 35 : n === 2 ? 40 : 45, // Increased all values marginRight: n === 1 ? 25 : n === 2 ? 35 : 45, // Increased all values // RESPONSIVE CODE #7: Set explicit width and height width: containerWidth, height: chartHeight, x: { axis: null }, y: { axis: null }, padding: 0.2, // RESPONSIVE CODE #11: Add explicit aspect ratio control for facets facet: { label: null, aspectRatio: 0.2 // Directly enforce 1:5 height:width ratio }, fx: { padding: 0.03, axis: null }, fy: { padding: calculatePadding(), axis: null }, color: { domain: ["win", "loss"], range: ["#96B9DC", "#DD6D6D"], legend: false }, className: "large-font", marks: [ // Frame for each facet Plot.frame({ fill: "#f7f7f7", insetTop: -30, insetBottom: -10 }), // Bars - games won Plot.barY( gamesToUse.filter((d) => d.winTeamShortname == mySchool), { x: "seriesGameNumber", y: "winMargin", sort: { x: "x" }, sort: "seriesGameNumber", fx: (d) => fx(d.opponent), fy: (d) => fy(d.opponent), channels: { opponent: { value: "opponent", label: "opponent" }, win: { value: "winMargin", label: "margin of win" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, fill: "#96B9DC", stroke: (d) => showHome && d.homeOrAway == "home" ? "#000000" : "#96B9DC" } ), // Bars - games lost Plot.barY( gamesToUse.filter((d) => d.loseTeamShortname == mySchool), { x: "seriesGameNumber", y: "loseMargin", sort: { x: "x" }, fx: (d) => fx(d.opponent), fy: (d) => fy(d.opponent), channels: { opponent: { value: "opponent", label: "opponent" }, loss: { value: "loseMargin", label: "margin of loss" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, fill: "#DD6D6D", stroke: (d) => showHome && d.homeOrAway == "home" ? "#000000" : "#DD6D6D" } ), // X axis Plot.ruleY([0], { stroke: "#9e9e9e" }), // Opponent labels for each facet // RESPONSIVE CODE #9: Adjust text size for small screens Plot.text(keys, { fx, fy, frameAnchor: "top-left", dx: 6, dy: -24, fontSize: containerWidth < 500 ? 11 : 13, fill: "#444444" }), // Tooltip for games won Plot.tip( gamesToUse.filter((d) => d.winTeamShortname == mySchool), Plot.pointerX({ x: "seriesGameNumber", fx: (d) => fx(d.opponent), fy: (d) => fy(d.opponent), dy: -10, maxRadius: 5, channels: { result: { value: "result", label: "score" }, homeAway: { value: "homeOrAway", label: "home/away" }, win: { value: "winMargin", label: "won by" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, format: { px: false, x: false, y: false, date: true, win: true, fx: false, fy: false } }) ), // Tooltip for games lost Plot.tip( gamesToUse.filter((d) => d.loseTeamShortname == mySchool), Plot.pointerX({ x: "seriesGameNumber", fx: (d) => fx(d.opponent), fy: (d) => fy(d.opponent), dy: -10, maxRadius: 5, channels: { result: { value: "result", label: "score" }, homeAway: { value: "homeOrAway", label: "home/away" }, loss: { value: "loseMargin", label: "lost by" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, format: { px: false, x: false, y: false, date: true, loss: true, fx: false, fy: false } }) ) ] }; })() ); } // RESPONSIVE CODE #10: Create reactive cells for viewport tracking // In your Observable dashboard, add these cells: // This uses Observable's reactive capabilities to track window width // viewportWidth = width // This creates a responsive chart that updates when viewport changes // responsiveOpponentChart = chartWinsLossesByOpponent({width: viewportWidth}) // USAGE INSTRUCTIONS: // 1. Import this function into your dashboard notebook // 2. Create a viewportWidth cell that tracks container width // 3. Create a responsiveOpponentChart cell that calls this function with the width // 4. The chart will automatically adjust its layout as the screen size changes43:T2a44,// RESPONSIVE FACETED CHART FOR MCPS BASKETBALL // This function renders a faceted chart that adapts to different screen sizes // It transforms from a 3x8 grid on desktop to 2x12 on tablet to 1x24 on mobile chartWinsLossesBySeason = function (options = {}) { // RESPONSIVE CODE #1: Get container width from options const containerWidth = options.width || 960; // RESPONSIVE CODE #2: Determine columns based on width // This creates the responsive layout transformation const facetColumns = containerWidth < 500 ? 1 : containerWidth < 875 ? 2 : 3; return Plot.plot( (() => { // RESPONSIVE CODE #3: Use our responsive column count instead of hard-coded value // const n = 3; // REMOVED - replaced with dynamic facetColumns const n = facetColumns; const keys = Array.from( d3.union(d3.sort(gamesToUse.map((d) => d.season))) ); const index = new Map(keys.map((key, i) => [key, i])); const fx = (key) => index.get(key) % n; const fy = (key) => Math.floor(index.get(key) / n); // RESPONSIVE CODE #4: Calculate facet dimensions with increased size across all layouts // First calculate available width per facet based on container width and columns const facetWidth = (containerWidth - (options.marginLeft || 40) - (options.marginRight || 40)) / n; // Apply 1:5 ratio but with a minimum height to ensure facets are never too small // The multiplier (0.3 instead of 0.2) gives us a 50% height increase compared to the 1:5 ratio const facetHeight = Math.max(facetWidth * 0.3, 120); // Minimum height of 120px // RESPONSIVE CODE #5: Calculate total chart height with the increased facet heights const totalRows = Math.ceil(keys.length / n); // Add a bit of extra space between rows to prevent crowding with larger facets const chartHeight = totalRows * (facetHeight + 40) + 80; // Increased buffer between rows (40px) and margins (80px) // RESPONSIVE CODE #8: Reduced padding values for larger facets const calculatePadding = () => { // Reduced padding values across all layouts if (n === 1) { return 0.25 + Math.min(0.08, (containerWidth - 300) / 2500); } else if (n === 2) { return 0.25 + Math.min(0.1, (containerWidth - 500) / 2000); } else { return 0.3 + Math.min(0.1, (containerWidth - 875) / 1500); } }; return { title: `${mySchool} girls varsity basketball: Wins and losses by season, 2013-2024`, subtitle: md`

`, caption: "Source: countysports.zone", // RESPONSIVE CODE #6: Adjusted margins for larger facets marginTop: 40, // Increased from 30 marginBottom: 35, // Increased from 25 marginLeft: n === 1 ? 35 : n === 2 ? 40 : 45, // Increased all values marginRight: n === 1 ? 25 : n === 2 ? 35 : 45, // Increased all values // RESPONSIVE CODE #7: Set explicit width and height width: containerWidth, height: chartHeight, x: { axis: null }, y: { axis: null }, padding: 0.2, // RESPONSIVE CODE #11: Add explicit aspect ratio control for facets facet: { label: null, aspectRatio: 0.2 // Directly enforce 1:5 height:width ratio }, fx: { padding: 0.03, axis: null }, fy: { padding: calculatePadding(), axis: null }, color: { domain: ["win", "loss"], range: ["#96B9DC", "#DD6D6D"], legend: false }, className: "large-font", marks: [ // Frame for each facet Plot.frame({ fill: "#f7f7f7", insetTop: -30, insetBottom: -10 }), // Bars - games won Plot.barY( gamesToUse.filter((d) => d.winTeamShortname == mySchool), { x: "seasonGameNumber", y: "winMargin", sort: { x: "x" }, sort: "seasonGameNumber", fx: (d) => fx(d.season), fy: (d) => fy(d.season), channels: { season: { value: "season", label: "season" }, win: { value: "winMargin", label: "margin of win" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, fill: "#96B9DC", stroke: (d) => showHomeBySeason && d.homeOrAway == "home" ? "#000000" : "#96B9DC" } ), // Bars - games lost Plot.barY( gamesToUse.filter((d) => d.loseTeamShortname == mySchool), { x: "seasonGameNumber", y: "loseMargin", sort: { x: "x" }, fx: (d) => fx(d.season), fy: (d) => fy(d.season), channels: { season: { value: "season", label: "season" }, loss: { value: "loseMargin", label: "margin of loss" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, fill: "#DD6D6D", stroke: (d) => showHomeBySeason && d.homeOrAway == "home" ? "#000000" : "#DD6D6D" } ), // X axis Plot.ruleY([0], { stroke: "#9e9e9e" }), // Season labels for each facet // RESPONSIVE CODE #9: Adjust text size for small screens Plot.text(keys, { fx, fy, frameAnchor: "top-left", dx: 6, dy: -24, fontSize: containerWidth < 500 ? 11 : 13, fill: "#444444" }), // Tooltip for games won Plot.tip( gamesToUse.filter((d) => d.winTeamShortname == mySchool), Plot.pointerX({ x: "seasonGameNumber", fx: (d) => fx(d.season), fy: (d) => fy(d.season), dy: -10, maxRadius: 5, channels: { opponent: { value: "opponent", label: "vs" }, result: { value: "result", label: "score" }, homeAway: { value: "homeOrAway", label: "home/away" }, win: { value: "winMargin", label: "won by" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, format: { px: false, x: false, y: false, date: true, win: true, fx: false, fy: false } }) ), // Tooltip for games lost Plot.tip( gamesToUse.filter((d) => d.loseTeamShortname == mySchool), Plot.pointerX({ x: "seasonGameNumber", fx: (d) => fx(d.season), fy: (d) => fy(d.season), dy: -10, maxRadius: 5, channels: { opponent: { value: "opponent", label: "vs" }, result: { value: "result", label: "score" }, homeAway: { value: "homeOrAway", label: "home/away" }, loss: { value: "loseMargin", label: "lost by" }, date: { value: //format date object as string (d) => d.date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" }), label: "date" } }, format: { px: false, x: false, y: false, date: true, loss: true, fx: false, fy: false } }) ) ] }; })() ); } // RESPONSIVE CODE #10: Create reactive cells for viewport tracking // In your Observable dashboard, add these cells: // This uses Observable's reactive capabilities to track window width // viewportWidth = width // This creates a responsive chart that updates when viewport changes // responsiveOpponentChart = chartWinsLossesByOpponent({width: viewportWidth}) // USAGE INSTRUCTIONS: // 1. Import this function into your dashboard notebook // 2. Create a viewportWidth cell that tracks container width // 3. Create a responsiveOpponentChart cell that calls this function with the width // 4. The chart will automatically adjust its layout as the screen size changes44:T28eb,// // RESPONSIVE FACETED CHART FOR MCPS BASKETBALL BY SEASON // // This function renders a faceted chart that adapts to different screen sizes // // It transforms from a 3x4 grid on desktop to 2x6 on tablet to 1x12 on mobile // chartWinsLossesBySeason = function (options = {}) { // // RESPONSIVE CODE #1: Get container width from options // const containerWidth = options.width || 960; // // RESPONSIVE CODE #2: Determine columns based on width // // This creates the responsive layout transformation // const facetColumns = containerWidth < 500 ? 1 : containerWidth < 875 ? 2 : 3; // return Plot.plot( // (() => { // // RESPONSIVE CODE #3: Use our responsive column count instead of hard-coded value // const n = facetColumns; // const keys = Array.from( // d3.union(d3.sort(gamesToUse.map((d) => d.season))) // ); // const index = new Map(keys.map((key, i) => [key, i])); // const fx = (key) => index.get(key) % n; // const fy = (key) => Math.floor(index.get(key) / n); // // RESPONSIVE CODE #4: Calculate facet height based on column count // // This ensures proper spacing as we adjust columns // const facetHeight = n === 1 ? 200 : n === 2 ? 150 : 180; // // RESPONSIVE CODE #5: Calculate total chart height based on rows needed // const totalRows = Math.ceil(keys.length / n); // const chartHeight = totalRows * facetHeight + 60; // Add 60px for margins // return { // title: `${mySchool} girls varsity basketball: Wins and losses by season, 2013-2024`, // subtitle: md`

${bar( // 0.5, // 15, // "#96B9DC" // )} ${bar( // 0.5, // 15, // "#DD6D6D" // )} bar heights correspond to margin of win or loss
▢ border shows home game (if checked above)
hover over each colored bar for specific game info

`, // caption: "Source: countysports.zone", // // RESPONSIVE CODE #6: Adjust margins based on screen size // marginTop: 30, // marginBottom: 25, // marginLeft: n === 1 ? 30 : 40, // marginRight: n === 1 ? 20 : 40, // // RESPONSIVE CODE #7: Set explicit width and height // width: containerWidth, // height: chartHeight, // x: { axis: null }, // y: { axis: null }, // padding: 0.2, // facet: { // label: null // }, // fx: { // padding: 0.03, // axis: null // }, // fy: { // // RESPONSIVE CODE #8: Adjust vertical padding based on column count // padding: n === 1 ? 0.25 : 0.3, // Reduced from 0.4 to 0.25 for 1-column layout // axis: null // }, // color: { // domain: ["win", "loss"], // range: ["#96B9DC", "#DD6D6D"], // legend: false // }, // className: "large-font", // marks: [ // // Frame for each facet // Plot.frame({ // fill: "#f7f7f7", // insetTop: -30, // insetBottom: -10 // }), // // Bars - games won // Plot.barY( // gamesToUse.filter((d) => d.winTeamShortname == mySchool), // { // x: "seasonGameNumber", // y: "winMargin", // sort: { x: "x" }, // sort: "seasonGameNumber", // fx: (d) => fx(d.season), // fy: (d) => fy(d.season), // channels: { // season: { // value: "season", // label: "season" // }, // win: { // value: "winMargin", // label: "margin of win" // }, // date: { // value: // //format date object as string // (d) => // d.date.toLocaleString(undefined, { // month: "short", // day: "numeric", // year: "numeric" // }), // label: "date" // } // }, // fill: "#96B9DC", // stroke: (d) => // showHomeBySeason && d.homeOrAway == "home" // ? "#000000" // : "#96B9DC" // } // ), // // Bars - games lost // Plot.barY( // gamesToUse.filter((d) => d.loseTeamShortname == mySchool), // { // x: "seasonGameNumber", // y: "loseMargin", // sort: { x: "x" }, // fx: (d) => fx(d.season), // fy: (d) => fy(d.season), // channels: { // season: { // value: "season", // label: "season" // }, // loss: { // value: "loseMargin", // label: "margin of loss" // }, // date: { // value: // //format date object as string // (d) => // d.date.toLocaleString(undefined, { // month: "short", // day: "numeric", // year: "numeric" // }), // label: "date" // } // }, // fill: "#DD6D6D", // stroke: (d) => // showHomeBySeason && d.homeOrAway == "home" // ? "#000000" // : "#DD6D6D" // } // ), // // X axis // Plot.ruleY([0], { stroke: "#9e9e9e" }), // // Season labels for each facet // // RESPONSIVE CODE #9: Adjust text size for small screens // Plot.text(keys, { // fx, // fy, // frameAnchor: "top-left", // dx: 6, // dy: -24, // fontSize: containerWidth < 500 ? 11 : 13, // fill: "#444444" // }), // // Tooltip for games won // Plot.tip( // gamesToUse.filter((d) => d.winTeamShortname == mySchool), // Plot.pointerX({ // x: "seasonGameNumber", // fx: (d) => fx(d.season), // fy: (d) => fy(d.season), // dy: -10, // maxRadius: 5, // channels: { // opponent: { // value: "opponent", // label: "vs" // }, // result: { // value: "result", // label: "score" // }, // homeAway: { // value: "homeOrAway", // label: "home/away" // }, // win: { // value: "winMargin", // label: "won by" // }, // date: { // value: // //format date object as string // (d) => // d.date.toLocaleString(undefined, { // month: "short", // day: "numeric", // year: "numeric" // }), // label: "date" // } // }, // format: { // px: false, // x: false, // y: false, // date: true, // win: true, // fx: false, // fy: false // } // }) // ), // // Tooltip for games lost // Plot.tip( // gamesToUse.filter((d) => d.loseTeamShortname == mySchool), // Plot.pointerX({ // x: "seasonGameNumber", // fx: (d) => fx(d.season), // fy: (d) => fy(d.season), // dy: -10, // maxRadius: 5, // channels: { // opponent: { // value: "opponent", // label: "vs" // }, // result: { // value: "result", // label: "score" // }, // homeAway: { // value: "homeOrAway", // label: "home/away" // }, // loss: { // value: "loseMargin", // label: "lost by" // }, // date: { // value: // //format date object as string // (d) => // d.date.toLocaleString(undefined, { // month: "short", // day: "numeric", // year: "numeric" // }), // label: "date" // } // }, // format: { // px: false, // x: false, // y: false, // date: true, // loss: true, // fx: false, // fy: false // } // }) // ) // ] // }; // })() // ); // } // // RESPONSIVE CODE #10: Create reactive cells for viewport tracking // // In your Observable dashboard, add these cells: // // This uses Observable's reactive capabilities to track window width // // viewportWidth = width // // This creates a responsive chart that updates when viewport changes // // responsiveSeasonChart = chartWinsLossesBySeason({width: viewportWidth}) // // USAGE INSTRUCTIONS: // // 1. Import this function into your dashboard notebook // // 2. Create a viewportWidth cell that tracks container width (if not already created for opponent chart) // // 3. Create a responsiveSeasonChart cell that calls this function with the width // // 4. The chart will automatically adjust its layout as the screen size changes45:T400,arrow = function(direction){ var x1,y1,x2,y2; switch(direction){ case 'n': x1=15, y1=25, x2=15, y2=10; break; case 's': x1=15, y1=0, x2=15, y2=10; break; case 'e': x1=25, y1=10, x2=10, y2=10; break; case 'w': x1=5, y1=10, x2=20, y2=10; break; case 'ne': x1=5, y1=15, x2=15, y2=5; break; case 'se': x1=5, y1=5, x2=15, y2=15; break; case 'nw': x1=15, y1=15, x2=5, y2=5; break; case 'sw': x1=15, y1=5, x2=5, y2=15; break; } return `` }46:T810,teamScoringStatsBySeason = FileAttachment( "03-Basketball Girls Varsity_TeamScoringStatsBySeason_March2025@3.csv" ) .csv() // no `{typed: true}` in `csv()` .then((teamScoringStatsBySeason) => { teamScoringStatsBySeason.forEach((d) => { d.totalScoreLose = Number(d.totalScoreLose); d.totalPoints = Number(d.totalPoints); d.maxScoreLose = Number(d.maxScoreLose); d.minScoreLose = Number(d.minScoreLose); d.meanScoreLose = Number(d.meanScoreLose); d.totalScoreMarginLose = Number(d.totalScoreMarginLose); d.totalScoreMarginLose = Number(d.totalScoreMarginLose); d.maxScoreMarginLose = Number(d.maxScoreMarginLose); d.minScoreMarginLose = Number(d.minScoreMarginLose); d.meanScoreMarginLose = Number(d.meanScoreMarginLose); d.totalScoreWin = Number(d.totalScoreWin); d.maxScoreWin = Number(d.maxScoreWin); d.minScoreWin = Number(d.minScoreWin); d.meanScoreWin = Number(d.meanScoreWin); d.totalScoreMarginWin = Number(d.totalScoreMarginWin); d.maxScoreMarginWin = Number(d.maxScoreMarginWin); d.minScoreMarginWin = Number(d.minScoreMarginWin); d.meanScoreMarginWin = Number(d.meanScoreMarginWin); d.wins = Number(d.wins); d.losses = Number(d.losses); d.gamesPlayed = Number(d.gamesPlayed); d.winningPercentage = Number(d.winningPercentage); d.homeWins = Number(d.homeWins); d.awayWins = Number(d.awayWins); d.homeLoss = Number(d.homeLoss); d.awayLoss = Number(d.awayLoss); d.homeGames = Number(d.homeGames); d.awayGames = Number(d.awayGames); d.totalPoints = Number(d.totalPoints); d.PPG = Number(d.PPG); d.totalScoreMarginAllGames = Number(d.totalScoreMarginAllGames); d.meanScoreMarginAllGames = Number(d.meanScoreMarginAllGames); d.season = String(d.season); // ... convert dates from string to Date object // ... convert temperature from Fahrenheit to Celsius. Formula: (fahrenheit / 1.8) - 32 }); return teamScoringStatsBySeason; })47:[{"id":"a513cd3517621119ba0461ab49c4bcbc0883d86b30e19be158c4de5839fb33c1c245129c0c560db662f568918e2a802e34c6ea0eb6fdcbe01191c26077633f4b","href":"https://static.observableusercontent.com/files/a513cd3517621119ba0461ab49c4bcbc0883d86b30e19be158c4de5839fb33c1c245129c0c560db662f568918e2a802e34c6ea0eb6fdcbe01191c26077633f4b","name":"schoolShortNamesFinalList.csv","type":"text/csv","lastModified":1742532229918.714,"size":305},{"id":"d7a53f19811474239355e1ff41e6d6df1fd25beb562dd1780855fdb142b23ebde39846f2b03ea24692b3b51f2de2065b5fd482a467a5a3cbbb5ff6fe925a2597","href":"https://static.observableusercontent.com/files/d7a53f19811474239355e1ff41e6d6df1fd25beb562dd1780855fdb142b23ebde39846f2b03ea24692b3b51f2de2065b5fd482a467a5a3cbbb5ff6fe925a2597","name":"02-Basketball Girls Varsity_GamesBySchool_All_March2025.csv","type":"text/csv","lastModified":1742532229918.714,"size":1819012},{"id":"13b7d2d80a584f86e8db19c03cc6979625d4a3abe263e966279974c8ea8b5150b22d12755d60d833d9988d8bdde4559fb6af1071620974d55cf098e7b447eaac","href":"https://static.observableusercontent.com/files/13b7d2d80a584f86e8db19c03cc6979625d4a3abe263e966279974c8ea8b5150b22d12755d60d833d9988d8bdde4559fb6af1071620974d55cf098e7b447eaac","name":"03-Basketball Girls Varsity_TeamScoringStatsBySeason_March2025.csv","type":"text/csv","lastModified":1742532229918.714,"size":52574},{"id":"07e7380958ae974436df518584249f5e1b261e9522e141ca5f737002c7c0ba59d433b4727eb3f100a0b9d5f0ed9e21202e4d2b4146952bd6068b0fa29f2e8365","href":"https://static.observableusercontent.com/files/07e7380958ae974436df518584249f5e1b261e9522e141ca5f737002c7c0ba59d433b4727eb3f100a0b9d5f0ed9e21202e4d2b4146952bd6068b0fa29f2e8365","name":"03-Basketball Girls Varsity_TeamScoringStatsBySeason_March2025@1.csv","type":"text/csv","lastModified":1745898098895.727,"size":52588},{"id":"07e7380958ae974436df518584249f5e1b261e9522e141ca5f737002c7c0ba59d433b4727eb3f100a0b9d5f0ed9e21202e4d2b4146952bd6068b0fa29f2e8365","href":"https://static.observableusercontent.com/files/07e7380958ae974436df518584249f5e1b261e9522e141ca5f737002c7c0ba59d433b4727eb3f100a0b9d5f0ed9e21202e4d2b4146952bd6068b0fa29f2e8365","name":"03-Basketball Girls Varsity_TeamScoringStatsBySeason_March2025@2.csv","type":"text/csv","lastModified":1745898672277.076,"size":52588},{"id":"4f211551f1f54e1391b8eeec76483a215b736e67cb3f44212c56c2d8f5251a6f8a1e7b6fc4097e36912115d5722a68e8853dedbf14a619ff463fc81a9bfbc123","href":"https://static.observableusercontent.com/files/4f211551f1f54e1391b8eeec76483a215b736e67cb3f44212c56c2d8f5251a6f8a1e7b6fc4097e36912115d5722a68e8853dedbf14a619ff463fc81a9bfbc123","name":"02-Basketball Girls Varsity_GamesBySchool_All_March2025@1.csv","type":"text/csv","lastModified":1745898700739.875,"size":1819024},{"id":"4f211551f1f54e1391b8eeec76483a215b736e67cb3f44212c56c2d8f5251a6f8a1e7b6fc4097e36912115d5722a68e8853dedbf14a619ff463fc81a9bfbc123","href":"https://static.observableusercontent.com/files/4f211551f1f54e1391b8eeec76483a215b736e67cb3f44212c56c2d8f5251a6f8a1e7b6fc4097e36912115d5722a68e8853dedbf14a619ff463fc81a9bfbc123","name":"02-Basketball Girls Varsity_GamesBySchool_All_March2025@2.csv","type":"text/csv","lastModified":1745898971353.857,"size":1819024},{"id":"537fb7583c4e7d0cf9297b355fedf9b80708bab637c19e21abc4bf54fdd58c50ccafe48f59f04d36395b10273747161e4930236acef13c6eee170de66c0b2cf7","href":"https://static.observableusercontent.com/files/537fb7583c4e7d0cf9297b355fedf9b80708bab637c19e21abc4bf54fdd58c50ccafe48f59f04d36395b10273747161e4930236acef13c6eee170de66c0b2cf7","name":"03-Basketball Girls Varsity_TeamScoringStatsBySeason_March2025@3.csv","type":"text/csv","lastModified":1745898977879.4,"size":52752}] 38:{"id":"22182005294cbce4","slug":"mcps-girls-basketball-stats-by-team-v-2-2","title":"High school girls historical basketball stats by team","thumbnail":"78730aa9937f537f6a70e797d22da5e4e097797528bba856d0505f33f69a6b81","access_level":"public","create_time":"$D2025-03-21T04:43:49.918Z","update_time":"$D2025-04-29T04:48:33.556Z","view_time":null,"first_public_time":"$D2025-04-15T22:50:59.508Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5bc0cab3ab12dc1f","login":"takoma-design","name":"Takoma Design","avatar_url":"https://avatars-next.observableusercontent.com/b7f18f12747f2f2afb520398dd32671dff352ea94365c0b4375e8816465785df","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3395,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d1bd4be4e87b6b19","login":"takoma-design","name":"Takoma Design","avatar_url":"https://avatars-next.observableusercontent.com/794f513c08661f295d02932d0a12e4dc4ddf2f80e6a0caa80f7c940a9c0c4e5f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d1bd4be4e87b6b19","login":"takoma-design","name":"Takoma Design","avatar_url":"https://avatars-next.observableusercontent.com/794f513c08661f295d02932d0a12e4dc4ddf2f80e6a0caa80f7c940a9c0c4e5f","tier":null,"role":"editor"},{"type":"team","id":"5bc0cab3ab12dc1f","login":"takoma-design","name":"Takoma Design","avatar_url":"https://avatars-next.observableusercontent.com/b7f18f12747f2f2afb520398dd32671dff352ea94365c0b4375e8816465785df","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"High school girls historical basketball stats by team","cells":[{"id":0,"value":"# High school girls historical basketball stats by team \nPrototype v. 2.2 of a project to show team win/loss history and scoring stats using official game data from [countysports.zone](https://countysports.zone). \n- Results are from game versus Montgomery County Public Schools (MCPS) opponents only (no schools from other counties)\n- Includes regular and playoff games\n\nPlease also check out my related [work comparing historical win-loss stats to MCPS demographic data.](https://observablehq.com/@takoma-design/mcps-girls-varsity-basketball-win-loss-demographic) Feedback and corrections welcome to Christopher Wajda, [christopher@takomadesign.com.](mailto:christopher@takomadesign.com)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3160,"value":"## First, select your school:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"viewof mySchool = Inputs.select(\n schoolShortNames.map((d) => d.schoolShortname),\n {\n label: html`Select your school:`,\n sort: true,\n unique: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3185,"value":"# Section 1: Win/Loss Records","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2607,"value":"## Chart 1.1: Wins and Losses by Opponent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2453,"value":"viewof showHome = Inputs.toggle({\n label: html`Check here to show home games >`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3272,"value":"// This cell depends on both the function and currentWidth\nresponsiveOpponentChart = chartWinsLossesByOpponent({ width: currentWidth })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3149,"value":"## Chart 1.2: Wins and Losses by Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3153,"value":"viewof showHomeBySeason = Inputs.toggle({\n label: html`Check here to show home games >`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3288,"value":"// This cell depends on both the function and currentWidth\nresponsiveSeasonChart = chartWinsLossesBySeason({ width: currentWidth })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"## Chart 1.3: Another way of looking at wins/losses by season ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2060,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"# Section 2: Win/Loss and Scoring Stats by Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3192,"value":"## Chart 2.1: Winning Percentage by Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1751,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"## Chart 2.2: Games Played by Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":931,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"## Chart 2.3: Points Per Game (PPG) Per Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"## Chart 2.4: Total Points Per Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2326,"value":"## Chart 2.5: Average Scoring Margin by Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":704,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3325,"value":"### changelog\n#### 2.3 - 4/29/25:\n - fix issues with PPG and total points not working properly with seasons with 0 wins or 0 losses\n - change facet ratio to 1:5\n\n#### 2.2 - As of 3/21/2025, now includes:\n - responsive layout for facet charts\n\n#### 2.1 - As of 3/17/2025, now includes:\n - final games of 2023-24 season\n - chart 1.2, _Wins and Losses by Season_ bar chart\n - reordered the charts in section 2\n - added numbered labels for all charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3327,"value":"### next steps:\n- add 2024-25 season data\n- add county averages to chart 2.5\n- make it easier to change selected school\n- add link to github with coding notebooks and datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3311,"value":"## base facet charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3379,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3144,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"## calculations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1307,"value":"### calculate county averages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1039,"value":"meanPPG = d3.flatRollup(\n teamScoringStatsBySeason,\n (v) => d3.mean(v, (d) => d.PPG),\n (d) => d.season\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"meanPPGArray = meanPPG.map(([season, mean]) => ({ season, mean }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"meanTotalPoints = d3.flatRollup(\n teamScoringStatsBySeason,\n (v) => d3.mean(v, (d) => d.totalPoints),\n (d) => d.season\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"meanTotalPointsArray = meanTotalPoints.map(([season, mean]) => ({\n season,\n mean\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"meanWinningPercentage = d3.flatRollup(\n teamScoringStatsBySeason,\n (v) => d3.mean(v, (d) => d.winningPercentage),\n (d) => d.season\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"meanWinningPercentageArray = meanWinningPercentage.map(([season, mean]) => ({\n season,\n mean\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"meanGamesPlayed = d3.flatRollup(\n teamScoringStatsBySeason,\n (v) => d3.mean(v, (d) => d.gamesPlayed),\n (d) => d.season\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"meanGamesPlayedArray = meanGamesPlayed.map(([season, mean]) => ({\n season,\n mean\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"## input from select school dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"schoolShortNames = FileAttachment(\"schoolShortNamesFinalList.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"gamesToUse = gamesBySchool.filter((d) => d.myTeam == mySchool)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2338,"value":"## style sheets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1983,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3305,"value":"## responsive elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3270,"value":"// This is a separate cell that tracks the current width\ncurrentWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"## imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1311,"value":"### sparkline used for county average legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2751,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2752,"value":"circle = function(radius, color){return ``}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2753,"value":"bar = function(length, thickness, color){\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2754,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2755,"value":"sparkline = function(values, color){\n let sPath = 'M0,' + (20 - values[0]);\n for(let i = 1; i `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"## data imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1489,"value":"### team scoring stats by season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"FileAttachment(\n \"03-Basketball Girls Varsity_TeamScoringStatsBySeason_March2025@3.csv\"\n).csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"### games by school","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"parseTime = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// gamesBySchool = FileAttachment(\"GirlsBasketball_GamesBySchool_All.csv\").csv({\n// typed: true\n// })\n\ngamesBySchool = FileAttachment(\n \"02-Basketball Girls Varsity_GamesBySchool_All_March2025@2.csv\"\n)\n .csv() // no `{typed: true}` in `csv()`\n .then((gamesBySchool) => {\n gamesBySchool.forEach((d) => {\n d.date = parseTime(d.date);\n d.winTeamScore = Number(d.winTeamScore);\n d.loseTeamScore = Number(d.loseTeamScore);\n d.winMargin = Number(d.winMargin);\n d.totalPoints = Number(d.totalPoints);\n d.loseMargin = Number(d.loseMargin);\n d.homePoints = Number(d.homePoints);\n d.awayPoints = Number(d.awayPoints);\n d.seriesGameNumber = Number(d.seriesGameNumber);\n d.seasonGameNumber = Number(d.seasonGameNumber);\n d.season = String(d.season);\n\n // ... convert dates from string to Date object\n // ... convert temperature from Fahrenheit to Celsius. Formula: (fahrenheit / 1.8) - 32\n });\n return gamesBySchool;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 33:null