2b:null 2c:["$","title",null,{"children":"High school sports: correlating gender, demographics, and winning | Takoma Design | Observable"}] 31:T21c3,Plot.plot({ width: 600, height: 700, marginTop: 25, marginLeft: 50, marginBottom: 15, marginRight: 0, // How do school socioeconomic factors correlate with winning in girls' and boys' sports? title: "Girls' high school basketball team winning correlates more closely with demographic factors than boys' basketball", subtitle: md`

Winning percentage for varsity basketball teams vs. selected all-school demographics in Montgomery County (Md.) Public Schools (MCPS), 2013-2024

Mobility Rate: Rate of students entering/leaving during the school year

EML: Students designated emergent multilingual learners (EML) are eligible for English Language Development (ELD) services

FARMS: Students eligible for Free and Reduced-price Meals System (FARMS)

`, caption: md`

Source: Data is combined from all MCPS high schools from the 2013 through 2024 seasons. Game data is for regular-season and playoff games against other MCPS schools, from countysports.zone. Demographic data is from the MCPS Capital Improvements Program/Master Plan archives. Visualization by Christopher Wajda, Takoma Design.

`, style: { fontSize: "12px", fontFamily: "var(--sans-serif);" }, x: { axis: null, label: null, ticks: null, type: "band", // Changed from "point" to "band" domain: ["girls", "boys"] // Explicitly define the domain // inset: -90, }, y: { // inset: 20, domain: [-1, 1], // Set the y-axis range explicitly from -1 to 1 grid: false // label: "Correlation Coefficient", }, // #BCCCDC marks: [ () => htl.svg` `, // Positive: 0.0 to 1.0 Plot.rectY([{ y1: 0.0, y2: 1.0 }], { y1: "y1", y2: "y2", fill: "url(#gradientPositive)" }), // Negative: 0.0 to -1.0 Plot.rectY([{ y1: 0.0, y2: -1.0 }], { y1: "y1", y2: "y2", fill: "url(#gradientNegative)" }), // y axis Plot.axisY({ fill: "#6D6D6D", tickSize: 0, fontSize: 12, label: "correlation strength (coefficient)", labelAnchor: "center", labelArrow: "none", labelOffset: "50", dx: 3, tickSize: 0, tickFormat: (d) => d.toFixed(2) }), Plot.text(countywide_corr, { x: "gender", y: 1.0, dy: -10, text: "gender", fontSize: 16, fontWeight: "bold", fill: "#6D6D6D" // text: (d) => (d === "girls" ? "girls (G)" : "boys (B)") }), // // Strong Positive: 0.7 to 1.0 // Plot.rectY([{ y1: 0.7, y2: 1.0 }], { // y1: "y1", // y2: "y2", // fill: "#4169a1" // }), // // Moderate Positive: 0.3 to 0.7 // Plot.rectY([{ y1: 0.3, y2: 0.7 }], { // y1: "y1", // y2: "y2", // fill: "#7bb4d2" // }), // // Weak Positive: 0.0 to 0.3 // Plot.rectY([{ y1: 0.0, y2: 0.3 }], { // y1: "y1", // y2: "y2", // fill: "#d4e5f2" // }), // // Weak Negative: 0.0 to -0.3 // Plot.rectY([{ y1: 0, y2: -0.3 }], { // y1: "y1", // y2: "y2", // fill: "#fae7db" // }), // // Moderate Negative: -0.3 to -0.7 // Plot.rectY([{ y1: -0.3, y2: -0.7 }], { // y1: "y1", // y2: "y2", // fill: "#f0ac95" // }), // // Strong Negative: -0.7 to -1.0 // Plot.rectY([{ y1: -0.7, y2: -1.0 }], { // y1: "y1", // y2: "y2", // fill: "#cc5673" // }), Plot.ruleY([-0.7, -0.3, 0, 0.3, 0.7], { stroke: (d) => (d > 0 ? "#ffffff" : d === 0 ? "#DADADA" : "#ffffff") // stroke: "#ffffff" }), Plot.text([["girls", 0.7]], { text: ["Strong Positive ↑"], textAnchor: "start", fontSize: 11, fill: "#000000", dx: -130, dy: -6 }), Plot.text([["girls", 0.3]], { text: ["Moderate Positive ↑"], textAnchor: "start", fontSize: 11, fill: "#333333", dx: -130, dy: -6 }), Plot.text([["girls", 0]], { text: ["Weak/No Correlation ↑"], textAnchor: "start", fontSize: 11, fill: "#505050", dx: -130, dy: -6 }), Plot.text([["girls", 0]], { text: ["Weak/No Correlation ↓"], textAnchor: "start", fontSize: 11, fill: "#505050", dx: -130, dy: 9 }), Plot.text([["girls", -0.3]], { text: ["Moderate Negative ↓"], textAnchor: "start", fontSize: 11, fill: "#333333", dx: -130, dy: 9 }), Plot.text([["girls", -0.7]], { text: ["Strong Negative ↓"], textAnchor: "start", fontSize: 11, fill: "#000000", dx: -130, dy: 9 }), Plot.ruleX(["girls", "boys"], { stroke: "#DADADA", // markerEnd: "arrow", strokeWidth: 16, stroke: "#ffffff", opacity: 0.3 // y1: 1.0, // y2: 0.9 // stroke: (d) => (d > 0 ? "#7d92a9" : d === 0 ? "#000" : "#995f5f") }), Plot.line(countywide_corr, { x: "gender", y: "correlation", z: "demographic", strokeWidth: 3, stoke: "#000000" }), // Plot.ruleX(["girls", "boys"], { // stroke: "#DADADA", // markerEnd: "arrow", // strokeWidth: 3, // stroke: "#505050", // y1: 1.0, // y2: 0.9 // // stroke: (d) => (d > 0 ? "#7d92a9" : d === 0 ? "#000" : "#995f5f") // }), Plot.dot(countywide_corr, { x: "gender", y: "correlation", fill: "#000000", r: 7 }), // Plot.text( // countywide_corr.filter((d) => d.gender === "girls"), // { // x: "gender", // y: "correlation", // text: () => "G", // Using a function that returns "G" for each point // fill: "#FFF", // fontWeight: "bold", // fontSize: 12, // textAnchor: "middle" // } // ), // Plot.text( // countywide_corr.filter((d) => d.gender === "boys"), // { // x: "gender", // y: "correlation", // text: () => "B", // Using a function that returns "G" for each point // fill: "#FFF", // fontWeight: "bold", // fontSize: 12, // textAnchor: "middle" // } // ), d3 .groups(countywide_corr, (d) => d.gender === "girls") .map(([left, correlation]) => Plot.text( correlation, occlusionY({ x: "gender", y: "correlation", text: left ? (d) => `${labelMapping.get(d.demographic) || d.demographic} ` : (d) => `${labelMapping.get(d.demographic) || d.demographic}`, textAnchor: left ? "end" : "start", dx: left ? -10 : 10, fontWeight: "bold", radius: 5.5 }) ) ) // d3 // .groups(countywide_corr, (d) => d.gender === "girls") // .map(([left, correlation]) => // Plot.text( // correlation, // occlusionY({ // x: "gender", // y: "correlation", // text: left // ? (d) => // `${ // labelMapping.get(d.demographic) || d.demographic // } ${d.correlation.toFixed(2)}` // : (d) => // `${d.correlation.toFixed(2)} ${ // labelMapping.get(d.demographic) || d.demographic // }`, // textAnchor: left ? "end" : "start", // dx: left ? -15 : 15, // fontWeight: "bold", // radius: 5.5 // }) // ) // ) ] })32:[{"id":"c8b995e83ab23bcf5e979c0b928e4d6bd454cb53e249873d12ec5994d9690e41af1dae84f0394fe48587854c0bb467a1c9e1e9a68d0e340f9b44186e03b49f48","href":"https://static.observableusercontent.com/files/c8b995e83ab23bcf5e979c0b928e4d6bd454cb53e249873d12ec5994d9690e41af1dae84f0394fe48587854c0bb467a1c9e1e9a68d0e340f9b44186e03b49f48","name":"CORR_Basketball_Combined_county_all_seasons.csv","type":"text/csv","lastModified":1743995308785.847,"size":1067}] 2f:{"id":"068c2e1f3aef1f64","slug":null,"title":"High school sports: correlating gender, demographics, and winning","thumbnail":"2f3744a11e5a5f17992205974d02e0d5ac3189752c010d48802fdaa8a27ef7a8","access_level":"public","create_time":"$D2025-04-07T03:07:36.566Z","update_time":"$D2025-04-15T22:53:14.796Z","view_time":null,"first_public_time":"$D2025-04-15T22:53:27.161Z","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"},"version":868,"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}],"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"High school sports: correlating gender, demographics, and winning","cells":[{"id":856,"value":"# High school sports: correlating gender, demographics, and winning","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"## Occlusion function for slope chart overlap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"// OcclusionY adds an initializer that shifts nodes vertically with a tiny force simulation.\nocclusionY = ({radius = 6.5, ...options} = {}) => Plot.initializer(options, (data, facets, { y: {value: Y}, text: {value: T} }, {y: sy}, dimensions, context) => {\n for (const index of facets) {\n const unique = new Set();\n const nodes = Array.from(index, (i) => ({\n fx: 0,\n y: sy(Y[i]),\n visible: unique.has(T[i]) // remove duplicate labels\n ? false\n : !!unique.add(T[i]),\n i\n }));\n d3.forceSimulation(nodes.filter((d) => d.visible))\n .force(\"y\", d3.forceY(({y}) => y)) // gravitate towards the original y\n .force(\"collide\", d3.forceCollide().radius(radius)) // collide\n .stop()\n .tick(20);\n for (const { y, node, i, visible } of nodes) Y[i] = !visible ? NaN : y;\n }\n return {data, facets, channels: {y: {value: Y}}};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"## Map demographic column labels to new labels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"labelMapping = new Map([\n [\"White_pct\", \"% White Students\"],\n [\"Total_Enrollment\", \"Enrollment Size\"],\n [\"Mobility_Rate_pct\", \"Mobility Rate\"],\n [\"FARMS_pct\", \"% FARMS\"],\n [\"ESOL_pct\", \"% EML\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"## Correlation bands if needed later","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"correlationBands = new Map([\n [0.7, \"Strong Positive\"],\n [0.3, \"Moderate Positive\"],\n [0, \"Weak/No Correlation\"],\n [-0.3, \"Moderate Negative\"],\n [-0.7, \"Strong Negative\"]\n])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"countywide_corr = FileAttachment(\n \"CORR_Basketball_Combined_county_all_seasons.csv\"\n).csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"countywide_corr","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"# Imports/Credits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":826,"value":"## Slope chart\n[Slope chart from Observable gallery](https://observablehq.com/@observablehq/plot-slope-chart). A tiny [force simulation](https://d3js.org/d3-force) avoids label overlap. Based on [Edward Tufte](https://www.edwardtufte.com/notebook/slopegraphs-for-comparing-gradients-slopegraph-theory-and-practice/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"Gradient bar fills from https://observablehq.com/@observablehq/plot-gradient-bars","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":390,"value":"## Gradient fill\nFrom [Observable Plot for Sparklines](https://observablehq.com/d/66dbd5caf158084c), originally inspired by `withGradient` from [Google Finance Charts implementation](https://observablehq.com/d/6eb190775d47fe25) .","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"function withGradient({ color, id = DOM.uid(\"gradient\").id }, callback) {\n return [\n callback(`url(#${id})`),\n () => svg`\n \n \n \n \n \n \n `\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"function withGradientNegative(\n { color, id = DOM.uid(\"gradient\").id },\n callback\n) {\n return [\n callback(`url(#${id})`),\n () => svg`\n \n \n \n \n \n \n `\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"