29:null 2a:["$","title",null,{"children":"A5: March Madness | Columbia Dataviz | Observable"}] 2f:T70f,

Unexpected Triumphs: The Art of the Upset

In the world of college basketball, few events capture the imagination like an upset during March Madness. An upset, is a term for when a lower-seeded college basketball team defeats a higher-seeded team against the odds. These upsets are a defining feature of the NCAA Tournament, capturing the essence of competition and unpredictability.

For teams, pulling off an upset can mean making history and sometimes, a once-in-a-generation triumph. It's this potential for any team to defy expectations that makes March Madness a nationwide spectacle, captivating casual observers and dedicated fans alike.

An upset can also represent the ultimate underdog story, where a team rises to the occasion and achieves what seemed impossible. It's this potential for surprise that makes March Madness so thrilling, inspiring countless brackets and fueling endless debates about which team might be the next Cinderella story.

30:T996,

UMBC v. Virginia 2018

A classic example of this was the 2018 game between the University of Maryland, Baltimore County (UMBC) Retrievers and the University of Virginia Cavaliers. Before this historic match, Virginia was not only a 1st seed but also one of the strongest teams nationally, known for their formidable defense and consistent performance throughout the season.

In stark contrast, UMBC, a 16th seed, had never won an NCAA Tournament game and was largely unknown on the national stage. Their astounding victory over Virginia, winning 74-54, was a shock to fans and analysts alike, overturning conventional wisdom about the limits of what a lower-seeded team could achieve in the tournament.

Relive the shock and exhilaration of UMBC's historic victory over Virginia with this fan-made recap video, which showcases key plays, passionate fan reactions, and a dramatic score that brings the unforgettable moment to life.

31:Tda5, { const width = 1070, height = 180; // Original width and height const rounds = ['First Four', 'Round of 64', 'Round of 32', 'Sweet 16', 'Elite 8', 'Final Four']; const padding = 30; const totalWidth = width + 2 * padding; // Total width including padding on both sides const svg = d3.create('svg').attr('viewBox', `-${padding} 0 ${totalWidth} ${height + 600}`); // Calculate new round positions to evenly distribute across the totalWidth const roundPositions = [ 40, width / 5, (width / 5) * 2, (width / 5) * 3, (width / 5) * 4, width - 40 ]; // Add the input bar line across the full width of the SVG svg.append('line') .attr('x1', 40) // Start at the left edge with padding considered .attr('y1', height / 2) .attr('x2', width - 40) // End at the right edge with padding considered .attr('y2', height / 2) .attr('stroke', 'black') .attr('stroke-width', 2); // Add round labels and positions rounds.forEach((round, i) => { svg.append('text') .attr('x', roundPositions[i]) .attr('y', height / 2 + 40) .attr('text-anchor', 'middle') .attr('font-size', '20px') .text(round); svg.append('circle') .attr('cx', roundPositions[i]) .attr('cy', height / 2) .attr('r', 5) .attr('fill', 'black'); }); // Define a threshold for how close the basketball must be to a dot to be considered "on" it const threshold = 10; // Adjust as needed based on your SVG scale // Define the URL of your basketball PNG image const basketballImageURL = 'https://freepngtransparent.com/wp-content/uploads/2023/03/Basketball-Png-177.png'; // Basketball image setup const imagesURLs = [ "blob:https://columbia-dataviz.static.observableusercontent.com/9fb72e6c-58d1-4bc2-b180-551b2e3dce17", "blob:https://columbia-dataviz.static.observableusercontent.com/5ce1bec4-3593-4185-a22e-14d61008d101", "blob:https://columbia-dataviz.static.observableusercontent.com/f9d9fd8d-6333-4dba-978f-14b9e53a4436", "blob:https://columbia-dataviz.static.observableusercontent.com/ba9e819d-8177-4369-9b85-f5cdfd313fe2", "blob:https://columbia-dataviz.static.observableusercontent.com/271359ad-ebaa-4eb3-9d36-1e65db74ddf5", "blob:https://columbia-dataviz.static.observableusercontent.com/bb1f438a-04b7-40ba-9641-14c0d0749ae6" ]; const imageDisplay = svg.append('image') .attr('width', 1000) .attr('height', 600) .attr('x', ((width) / 2) - 500) // Center horizontally .attr('y', 150) .attr('href', imagesURLs[0]); // Position below input area // Append an image element to your SVG and set the href attribute to the URL of your PNG const basketball = svg.append('image') .attr('href', basketballImageURL) .attr('width', 20) // Set the width of the image .attr('height', 20) // Set the height of the image .attr('x', roundPositions[0] - 10) // Position the image centered on the first round dot .attr('y', height / 2 - 10) // Position the image centered on the line .attr('cursor', 'pointer') .call(d3.drag().on('drag', (event) => { const x = Math.max(roundPositions[0], Math.min(event.x, roundPositions[rounds.length - 1])); basketball.attr('x', x); const closeToRoundIndex = roundPositions.findIndex(pos => Math.abs(x - pos) <= 10); if (closeToRoundIndex !== -1) { imageDisplay.attr('href', imagesURLs[closeToRoundIndex]); // Update the image based on the round } })); return svg.node(); }32:T41f,

This incredible and long journey, from being questioned as tournament-worthy to becoming one of the last four standing, remains one of the most remarkable in NCAA history.

Watch VCU’s epic journey through the 2011 tournament in this recap video:

33:Tbcb, { const width = 1070, height = 180; const rounds = ['Round of 64', 'Round of 32', 'Sweet 16']; const padding = 30; const totalWidth = width + 2 * padding; const svg = d3.create('svg').attr('viewBox', `-${padding} 0 ${totalWidth} ${height + 600}`); const roundPositions = [ 40, width / 2, width - 40 ]; svg.append('line') .attr('x1', 40) // Start at the left edge with padding considered .attr('y1', height / 2) .attr('x2', width - 40) // End at the right edge with padding considered .attr('y2', height / 2) .attr('stroke', 'black') .attr('stroke-width', 2); // Add round labels and positions rounds.forEach((round, i) => { svg.append('text') .attr('x', roundPositions[i]) .attr('y', height / 2 + 40) .attr('text-anchor', 'middle') .attr('font-size', '20px') .text(round); svg.append('circle') .attr('cx', roundPositions[i]) .attr('cy', height / 2) .attr('r', 5) .attr('fill', 'black'); }); // threshold for how close the basketball must be to a dot to be considered "on" it const threshold = 30; //basketball PNG image const basketballImageURL = 'https://freepngtransparent.com/wp-content/uploads/2023/03/Basketball-Png-177.png'; // basketball image setup const imagesURLs = [ "https://static.observableusercontent.com/files/29eb92dfb73d8bffab0d085b5211e5e4a43ea7f006d381ec54c426178bfdff5a09bb446d406c4a473f11e9d79309921f9b03e20d23f9acce9a29d67157fe6207", "https://static.observableusercontent.com/files/5790764be2f965c18f2d42ab62a77c080fbfdaa3e4d189daa3ec2d79bc318f2f33312c6a8cb8c95dd67fcba6949c21a5c0b87ea95863032a31ae0ea16c2f1fcd", "https://static.observableusercontent.com/files/498f867ac60db0b6b220dc1d0db1198b6f5af7948462bb7689c56842ff7209271eeea2deae39b82950f0fcd24ebf1e9108ab22e1657ff31dd70f79f4da129ae1" ]; const imageDisplay = svg.append('image') .attr('width', 1000) .attr('height', 600) .attr('x', ((width) / 2) - 500) // Center horizontally .attr('y', 150) .attr('href', imagesURLs[0]); // Position below input area // Append an image element to your SVG and set the href attribute to the URL of your PNG const basketball = svg.append('image') .attr('href', basketballImageURL) .attr('width', 20) // Set the width of the image .attr('height', 20) // Set the height of the image .attr('x', roundPositions[0] - 10) // Position the image centered on the first round dot .attr('y', height / 2 - 10) // Position the image centered on the line .attr('cursor', 'pointer') .call(d3.drag().on('drag', (event) => { const x = Math.max(roundPositions[0], Math.min(event.x, roundPositions[rounds.length - 1])); basketball.attr('x', x); const closeToRoundIndex = roundPositions.findIndex(pos => Math.abs(x - pos) <= 10); if (closeToRoundIndex !== -1) { imageDisplay.attr('href', imagesURLs[closeToRoundIndex]); // Update the image based on the round } })); return svg.node(); } 34:T463,

Their high-energy play and frequent slam dunks rallied fans and disrupted the usual rhythm of March Madness, embodying the spirit of the underdog.

Watch some of FGCU’s memorable dunks that captivated the nation and earned them the forever title of Dunk City:

35:Td19, { const width = 1070, height = 180; // Original width and height const rounds = ['Round of 64', 'Round of 32', 'Sweet 16', 'Elite 8', 'Final Four']; const padding = 30; const totalWidth = width + 2 * padding; // Total width including padding on both sides const svg = d3.create('svg').attr('viewBox', `-${padding} 0 ${totalWidth} ${height + 600}`); // Calculate new round positions to evenly distribute across the totalWidth const roundPositions = [ 40, width / 4, (width / 4) * 2, (width / 4) * 3, width - 40 ]; // Add the input bar line across the full width of the SVG svg.append('line') .attr('x1', 40) // Start at the left edge with padding considered .attr('y1', height / 2) .attr('x2', width - 40) // End at the right edge with padding considered .attr('y2', height / 2) .attr('stroke', 'black') .attr('stroke-width', 2); // Add round labels and positions rounds.forEach((round, i) => { svg.append('text') .attr('x', roundPositions[i]) .attr('y', height / 2 + 40) .attr('text-anchor', 'middle') .attr('font-size', '20px') .text(round); svg.append('circle') .attr('cx', roundPositions[i]) .attr('cy', height / 2) .attr('r', 5) .attr('fill', 'black'); }); // Define a threshold for how close the basketball must be to a dot to be considered "on" it const threshold = 10; // Adjust as needed based on your SVG scale // Define the URL of your basketball PNG image const basketballImageURL = 'https://freepngtransparent.com/wp-content/uploads/2023/03/Basketball-Png-177.png'; // Basketball image setup const imagesURLs = [ "blob:https://columbia-dataviz.static.observableusercontent.com/78c476c2-7f4b-450c-95d2-5a981b3e3d95", "blob:https://columbia-dataviz.static.observableusercontent.com/1e59f2b1-d97c-41c2-a912-e476bcbb99ab", "blob:https://columbia-dataviz.static.observableusercontent.com/3d653290-2da2-4ee6-9929-2028e9c9d88c", "blob:https://columbia-dataviz.static.observableusercontent.com/ac14e250-2b18-48f0-8e8f-f9be261ba49e", "blob:https://columbia-dataviz.static.observableusercontent.com/5fe0bdbf-895d-4c05-9f27-16ba3344ecaf" ]; const imageDisplay = svg.append('image') .attr('width', 1000) .attr('height', 600) .attr('x', ((width) / 2) - 500) // Center horizontally .attr('y', 150) .attr('href', imagesURLs[0]); // Position below input area // Append an image element to your SVG and set the href attribute to the URL of your PNG const basketball = svg.append('image') .attr('href', basketballImageURL) .attr('width', 20) // Set the width of the image .attr('height', 20) // Set the height of the image .attr('x', roundPositions[0] - 10) // Position the image centered on the first round dot .attr('y', height / 2 - 10) // Position the image centered on the line .attr('cursor', 'pointer') .call(d3.drag().on('drag', (event) => { const x = Math.max(roundPositions[0], Math.min(event.x, roundPositions[rounds.length - 1])); basketball.attr('x', x); const closeToRoundIndex = roundPositions.findIndex(pos => Math.abs(x - pos) <= 10); if (closeToRoundIndex !== -1) { imageDisplay.attr('href', imagesURLs[closeToRoundIndex]); // Update the image based on the round } })); return svg.node(); }36:T586,

Each game built upon the drama of the last, with Loyola Chicago solidifying their status as a true underdog team achieving beyond expectations. Their journey was underscored by the legend of Sister Jean, their 98-year-old chaplain, who became a national superstar, known for her inspiring pre-game prayers and unwavering support for the team.

Watch Loyola Chicago's 2018 Cinderella run unfold in this recap video, highlighting their thrilling buzzer-beaters and key moments from the tournament.

37:T1896,## Introduction For A5, our team decided to do a project centered around March Madness. We found this topic relevant since we are currently in the midst of the madness. It is a major cultural event in the US, attracting millions of viewers and generating significant media coverage. Sports fans are deeply invested in March Madness, often participating in bracket challenges, fantasy leagues, and discussions about favorite teams and players. Our goal is to present historical March Madness data while also exploring the circumstances in which upsets occur since disruptions of historical patterns are often a focal point of the tournament for fanatics. Not only will we create a narrative of the historical March Madness data for basketball enthusiasts to interact with, but we also hope to provide users with an investigation into how closely annual tournaments follow historical patterns. With data reporting upset statistics, we aim for our narrative to conclude whether or not upsets are as uncommon as perceived and offer insights into their occurrence through the lens of historical data. ## Related Work Related work we took inspiration from includes: “Bracketology | Predicting March Madness” https://www.kaggle.com/code/nishaanamin/bracketology-predicting-march-madness. This notebook had several visualizations of March Madness upsets using the same data we used. “March Madness By Pooja Crahen (Pooja Gandhi)” https://public.tableau.com/app/profile/poojagandhi/viz/shared/ZKHXZ3NJ6 This was an interactive visualization that showcased all the championship winners of March Madness tournaments from 1985-2016. It includes information about the team such as their seed rankings, what year they won and how many times each team has won. https://roadtolarissa.com/playoff-probabilities/ This was a visualization on playoff probabilities we found fun and interesting. ## Methodology For our project, we used an amalgamation of various datasets which included ratings and rankings among various sport projection companies. We loaded and transformed this data using JavaScript and D3.js, ensuring that the data types and formats were suitable for every visualization. For most of the visualizations, we only used data from 2008-2023 so that the graphs wouldn’t be as crowded and to examine more recent trends in NCAA data. We had a plan for what we wanted to display in our narrative and used tableau for preliminary visualizations. From here we picked the ones we liked the most and used D3 to finalize them. Our final D3 visualizations prioritized interactivity and animation. ## Design We wanted users to feel as though they were scrolling through March Madness history while still learning about the intricacies of the tournament, especially for those who may not have as much knowledge. We ordered our observable notebook so that it would evoke this feeling. We did want to implement a scrollable website for this, however, were not able to implement it so we had to abandon that alternative For the final visualization, several formats have been considered, ultimately culminating in the chosen design where the champion is represented by a prominently large star, while other finalist teams are depicted using various colors. It is crucial to effectively utilize both size and color in the visualization to distinguish between the champion and other teams, ensuring clarity and immediate recognition in the graphical representation. Implementation Our entire project is implemented using D3.js on Observable. We ran into issues trying to load our visualizations from our notebook which required some of them to be embedded into the notebook. ## Discussion Although we would have liked to have smoother transitions, overall we are proud of our final visual encoding and interaction design. Many points of confusion came from audiences not knowing what certain basketball and tournament terms meant. We created a system that teaches people about the history of March Madness and offers insight into the patterns of the seemingly unpredictable aspects of the game that make it exciting to watch. Doing this enhanced not only our own March Madness understanding but also our knowledge of D3.js and creating helpful visualizations. ## Future Work In the future, we would like to have our project hosted on a scrollable website to create a fun more interactive experience for users. Our initial plan for this project was to combine our interactive essay and visualizations into a scrollable format hosted on a GitHub page. Unfortunately, due to events on campus, we were unable to realize this plan. Nonetheless, we made attempts to mimic the website/scrollable framework. For instance, our plan with the two main “upset” visualizations was to have the transition trigger upon scrolling onto their section. Within the Observable notebook, this instead looks like a “start” button that triggers those transitions we intended to implement in a scrollable format. We hope to implement this version of our project to ensure that the project is cohesive and communicates the significance of March Madness to basketball fans effectively. In the final visualization, we have included the female winner alongside other metrics. For future developments, it is planned to expand the sections dedicated to female participants in March Madness. Recognizing and highlighting female achievements in sports is crucial. This enhancement will provide a more comprehensive and equitable view of athletic accomplishments, emphasizing the importance of gender inclusivity in sports analytics and representations. ## Final Reflection Despite the challenges that occurred while working on this project, we hope that the present project serves as a solid introduction to March Madness to fans and potential basketball fans. When March Madness comes back around in March 2025, those who interacted with this project can remember a few key details that will give them a more immersive experience for watching the tournament. Overall, we are satisfied with the work we completed on this project and all of the prior work in the semester that helped us build this project. ## References Kaggle March Madness Dataset - https://www.kaggle.com/datasets/nishaanamin/march-madness-data 38:T524,styles = html` `39:T810,function make_brackets() { let div = d3 .create('div') .style('width', div_width + 'px') .style('height', div_height + 'px') .style('position', 'relative'); let svg = div .append('svg') .attr('width', div_width) .attr('height', div_height) .style('width', div_width + 'px') .style('height', div_height + 'px') .style('position', 'absolute'); // Draw connectors on the SVG background svg .selectAll('path.link') .data(tourney_tree.links()) .join('path') .attr('class', function(d) { let label = 'link'; if ( d.target.data.WTeam && d.target.data.LTeam && d.source.data.WTeam && d.source.data.LTeam && (d.target.data.WTeam.TeamID == d.source.data.WTeam.TeamID || d.target.data.WTeam.TeamID == d.source.data.LTeam.TeamID) ) { label = label + ' Team' + d.target.data.WTeam.TeamID; } return label; }) .attr('stroke', 'black') .attr('stroke-width', 1) .attr('fill', 'none') .attr('d', connector); div .selectAll('div.game') .data(tourney_tree.descendants()) .enter() .append(d => game_container(d)); // Highlight a team's path through the tournament // on mouseenter. div .selectAll('.team') .on('mouseenter', function() { let class_label = d3 .select(this) .attr('class') .split(' ')[2]; div .selectAll('.team.' + class_label) .style('background-color', '#00bbf9'); div.selectAll('.game.' + class_label).style('border', 'solid 3px black'); svg.selectAll('.link.' + class_label).attr('stroke-width', 3); }) .on('mouseleave', function() { let class_label = d3 .select(this) .attr('class') .split(' ')[2]; div.selectAll('.team.' + class_label).style('background-color', null); div.selectAll('.game.' + class_label).style('border', 'solid 1px black'); svg.selectAll('.link.' + class_label).attr('stroke-width', 1); }); return div.node(); }3a:T752, // Function to create a scroll-animated grid of squares with slower animation function createScrollAnimatedGrid(rows = 32, cols = 32, cellSize = 20, delay = 50, duration = 500) { // Calculate the total number of cells const totalCells = rows * cols; // Set SVG dimensions const width = cols * cellSize; const height = rows * cellSize; // Create an array representing the grid squares const squares = []; for (let i = 0; i < totalCells; i++) { const x = (i % cols) * cellSize; const y = Math.floor(i / cols) * cellSize; squares.push({ x, y }); } // Create an SVG container const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); // Append the squares initially with no visibility const rects = svg.selectAll("rect") .data(squares) .enter() .append("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", cellSize) .attr("height", cellSize) .style("fill", "#009CDE") .style("stroke", "#fff") .style("opacity", 0); // Hidden initially // Scroll-based animation logic with slower transitions function triggerAnimation() { rects.transition() .delay((_, i) => i * 20) // Delay between squares .duration(duration) // Duration of the transition .style("opacity", 1); } // Set up an intersection observer const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { triggerAnimation(); // Start animation when visible observer.disconnect(); // Disconnect observer after triggering } }); }, { threshold: 0.1 } // Trigger when at least 10% of the SVG is visible ); // Observe the SVG node observer.observe(svg.node()); // Return the SVG element return svg.node(); } 3b:Tad1,function game_container(game) { let top_team, bot_team; if (game.data.WTeam) { if (game.data.WTeam.pos == "top") { top_team = game.data.WTeam; } else if (game.data.WTeam.pos == "bot") { bot_team = game.data.WTeam; } } if (game.data.LTeam) { if (game.data.LTeam.pos == "top") { top_team = game.data.LTeam; } else if (game.data.LTeam.pos == "bot") { bot_team = game.data.LTeam; } } let div = d3 .create("div") .style("width", function () { if (game.data.round == 6) { return 1.4 * team_width + "px"; } else { return team_width + "px"; } }) .style("height", function () { if (game.data.round == 6) { return 1.4 * game_height + "px"; } else { return game_height + "px"; } }) .style("left", function () { if (game.data.round == 6) { return (game.x2 - 0.2 * team_width).toString() + "px"; } else { return game.x2 + "px"; } }) .style("top", function () { if (game.data.round == 6) { return (game.y2 - 0.2 * game_height).toString() + "px"; } else { return game.y2 + "px"; } }) .style("border", "solid 0.5px black") .style("position", "absolute") .style("border-radius", "10px"); // Check for upsets to highlight if (game.data.WTeam && game.data.LTeam && game.data.WTeam.win) { if (game.data.WTeam.seed - game.data.LTeam.seed > 4) { div.append(() => team_container(top_team, game.data.round, "upset")); div.append(() => team_container(bot_team, game.data.round, "upset")); } else if (game.data.round == 6) { if (game.data.WTeam.pos == "top") { div.append(() => team_container(top_team, game.data.round, "champion")); div.append(() => team_container(bot_team, game.data.round, "bot_team")); } else { div.append(() => team_container(top_team, game.data.round, "top_team")); div.append(() => team_container(bot_team, game.data.round, "champion")); } } else { div.append(() => team_container(top_team, game.data.round, "top_team")); div.append(() => team_container(bot_team, game.data.round, "bot_team")); } } else { div.append(() => team_container(top_team, game.data.round, "top_team")); div.append(() => team_container(bot_team, game.data.round, "bot_team")); } // cmd-click on an unplayed game to copy a result template to update the result file div.on("click", function (evt) { if (evt.metaKey) { let result_text = `2024,,${game.data.WTeam.TeamID},WS,${game.data.LTeam.TeamID},LS,, ${game.data.WTeam.TeamName}, ${game.data.LTeam.TeamName}`; pbcopy(result_text); } }); return div.node(); } 3c:T72b,function connector(link) { if (link.target.data.round >= 2) { let x1 = link.source.x2; let y1 = link.source.y2; let x2 = link.target.x2; let y2 = link.target.y2; let xx1, yy1, xx2, yy2; let path; // We can tell whether we're linking up or down by // comparing expected seeds. let [seed1, seed2] = link.target.data.expected_seeds; // Upper links if (seed1 < seed2) { // Left half of bracket if (link.target.data.region == 'W' || link.target.data.region == 'Y') { xx1 = x1 + team_width / 2; yy1 = y1; xx2 = x2 + team_width; yy2 = y2 + game_height / 2; path = [[xx1, yy1], [xx1, yy2], [xx2, yy2]]; return d3.line()(path); } // Right half of bracket else if ( link.target.data.region == 'X' || link.target.data.region == 'Z' ) { xx1 = x1 + team_width / 2; yy1 = y1; xx2 = x2; yy2 = y2 + game_height / 2; path = [[xx1, yy1], [xx1, yy2], [xx2, yy2]]; return d3.line()(path); } } // Lower links else { // Left half of bracket if (link.target.data.region == 'W' || link.target.data.region == 'Y') { xx1 = x1 + team_width / 2; yy1 = y1 + game_height; xx2 = x2 + team_width; yy2 = y2 + game_height / 2; path = [[xx1, yy1], [xx1, yy2], [xx2, yy2]]; return d3.line()(path); } // Right half of bracket else if ( link.target.data.region == 'X' || link.target.data.region == 'Z' ) { xx1 = x1 + team_width / 2; yy1 = y1 + game_height; xx2 = x2; yy2 = y2 + game_height / 2; path = [[xx1, yy1], [xx1, yy2], [xx2, yy2]]; return d3.line()(path); } } } else { return null; } }3d:T779,function horizontal_rescaler(d) { let region = d.data.region; let scaler; let s = 3; // A small amount to shift round 2 games // Upper right if (region == 'X' || region == 'WX') { if (d.data.round == 2) { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([ 0.5 * div_width - 1.5 * team_width - s, div_width - team_width - s ]); } else { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * div_width - 1.5 * team_width, div_width - team_width]); } } // Upper left else if (region == 'W') { if (d.data.round == 2) { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * (div_width + team_width) + s, s]); } else { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * (div_width + team_width), 0]); } } // Lower left else if (region == 'Y' || region == 'YZ') { if (d.data.round == 2) { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * (div_width + team_width) + s, s]); } else { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * (div_width + team_width), 0]); } } // Lower right else if (region == 'Z') { if (d.data.round == 2) { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([ 0.5 * div_width - 1.5 * team_width - s, div_width - team_width - s ]); } else { scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * div_width - 1.5 * team_width, div_width - team_width]); } } else if (region == 'CH') scaler = d3 .scaleLinear() .domain([0, div_width]) .range([0.5 * (div_width - team_width), 0]); return scaler(d.y); }3e:T477,function vertical_rescaler(d) { let region = d.data.region; // Upper left if (region == 'W') { let scaler = d3 .scaleLinear() .domain([-0.25 * div_height, 0.25 * div_height]) .range([div_height - game_height / 2, -game_height / 2]); return scaler(d.x); } // Upper right else if (region == 'X') { let scaler = d3 .scaleLinear() .domain([0, 0.5 * div_height]) .range([div_height - game_height / 2, -game_height / 2]); return scaler(d.x); } // Lower left else if (region == 'Y') { let scaler = d3 .scaleLinear() .domain([div_height * 0.5, div_height]) .range([div_height - game_height / 2, -game_height / 2]); return scaler(d.x); } // Lower right else if (region == 'Z') { let scaler = d3 .scaleLinear() .domain([div_height * 0.75, 1.25 * div_height]) .range([div_height - game_height / 2, -game_height / 2]); return scaler(d.x); } else if (region == 'WX') { return 0.4 * div_height; } else if (region == 'YZ') { return 0.6 * div_height; } else if (region == 'CH') { return 0.5 * div_height; } }3f:Te65,tourney = { // Start with a basic nested JSON tree down // to the regional finals. let tourney = { region: 'CH', round: 6, expected_seeds: [1, 1], children: [ { region: 'WX', round: 5, expected_seeds: [1, 1], children: [ { region: 'W', round: 4, expected_seeds: [1, 2] }, { region: 'X', round: 4, expected_seeds: [1, 2] } ] }, { region: 'YZ', round: 5, expected_seeds: [1, 1], children: [ { region: 'Y', round: 4, expected_seeds: [1, 2] }, { region: 'Z', round: 4, expected_seeds: [1, 2] } ] } ] }; // Now we'll just use a basic tree-traversal technique // to continue down to round 1 let stack = [ tourney.children[0].children[0], tourney.children[0].children[1], tourney.children[1].children[0], tourney.children[1].children[1] ]; while (stack.length > 0) { let node = stack.pop(); let high_seed = node.expected_seeds[0]; let new_low_seed = 2 ** (5 - node.round + 1) - high_seed + 1; let child0 = { region: node.region, expected_seeds: [high_seed, new_low_seed], round: node.round - 1 }; let low_seed = node.expected_seeds[1]; let lower_seed = 2 ** (5 - node.round + 1) - low_seed + 1; let child1 = { region: node.region, expected_seeds: [lower_seed, low_seed], round: node.round - 1 }; node.children = [child0, child1]; // If round > 2, then we'll just push both // new empty nodes to the stack. We don't yet // know whose playing in those games. if (node.round > 2) { stack.push(child0); stack.push(child1); } // If round == 2, then the children will be in round 1 // so we can look up the game result. else { Object.assign(child0, round1_info(child0)); Object.assign(child1, round1_info(child1)); } } // At this point, the tree structure of the tournament is // constructed but we need to re-traverse to get game results. stack = [tourney]; while (stack.length > 0) { let node = stack.pop(); if (node.visits == 1) { node.visits = 2; } else { node.visits = 1; } let [child0, child1] = node.children; let team0, team1; if (child0.WTeam && child0.WTeam.win) { team0 = Object.assign({}, child0.WTeam); delete team0.win; delete team0.score; team0.pos = get_pos(team0.seed, node.round, team0.slot[0]); node.WTeam = team0; // Arbitrary, for now } if (child1.WTeam && child1.WTeam.win) { team1 = Object.assign({}, child1.WTeam); delete team1.win; delete team1.score; team1.pos = get_pos(team1.seed, node.round, team1.slot[0]); node.LTeam = team1; // Arbitrary, for now } // If we have both teams, then we attempt to assess the victor if (team0 && team1) { let scores = get_scores(team0.TeamID, team1.TeamID); team0.score = scores[0]; team1.score = scores[1]; let wTeam, lTeam; if (team0.score > team1.score) { team0.win = true; node.WTeam = team0; node.LTeam = team1; } else if (team0.score < team1.score) { team1.win = true; node.WTeam = team1; node.LTeam = team0; } } if (node.visits == 1) { stack.push(node); if (node.round > 2) { stack.push(child0); stack.push(child1); } } } return tourney; }40:T968,// Look up a team based on its region and seed function get_team(region, expected_seed) { let slot, teamID, teamName, teamNames; let playin = false; if (expected_seed < 10) { slot = region + '0' + expected_seed.toString(); } else { slot = region + expected_seed.toString(); } let seed = this_years_seeds.map(d => d.Seed).indexOf(slot); if (seed > -1) { teamID = this_years_seeds[seed].TeamID; teamName = team_map.get(teamID); } // The data expresses round 1 seeds mostly just as you'd expect. // In the case of a play-in game, there's an 'a' or 'b' appended to // the two seeds you'd expect to find. Thus, if we didn't find the // seed above that means we've got a play-in game. We'll display // just the winner but include the results of the playin via a tooltip. else { let seeda = this_years_seeds.map(d => d.Seed).indexOf(slot + 'a'); let seedb = this_years_seeds.map(d => d.Seed).indexOf(slot + 'b'); if (seeda > -1) { let playin_opponentID, playin_opponent_name, playin_opponent_score, score; let teamIDa = this_years_seeds[seeda].TeamID; let teamNamea = team_map.get(teamIDa); let teamIDb = this_years_seeds[seedb].TeamID; let teamNameb = team_map.get(teamIDb); let scores = get_scores(teamIDa, teamIDb); if (scores[0] < scores[1]) { teamName = teamNameb; teamID = teamIDb; score = scores[1]; playin_opponentID = teamIDa; playin_opponent_name = teamNamea; playin_opponent_score = scores[0]; } else if (scores[0] > scores[1]) { teamName = teamNamea; teamID = teamIDa; score = scores[0]; playin_opponentID = teamIDb; playin_opponent_name = teamNameb; playin_opponent_score = scores[1]; } else { teamName = teamNamea; teamNames = teamNamea + '/' + teamNameb; score = 0; playin_opponent_name = teamNameb; playin_opponent_score = 0; playin_opponentID = teamIDb; } playin = { score: score, teamID: teamIDa, playin_opponentID: playin_opponentID, playin_opponent_name: playin_opponent_name, playin_opponent_score: playin_opponent_score }; } } return { TeamName: teamName, TeamNames: teamNames, TeamID: teamID, seed: expected_seed, slot: slot, playin: playin }; }41:T45d,mresults = { let mresults = d3.csvParse( await FileAttachment("MNCAATourneyCompactResults@35.csv").text() ); mresults = mresults.concat( ncaa_results_2023.filter((o) => Math.floor(o.WTeamID / 1000) == 1) ); // Deal with VCUs forfeit to Oregon in 2021 mresults.push({ Season: "2021", DayNum: "", WTeamID: "1332", WScore: "1", LTeamID: "1433", LScore: "0", WLoc: "N", NumOT: 0 }); mresults.push({ Season: "2024", DayNum: "", WTeamID: "1447", WScore: "71", LTeamID: "1224", LScore: "68", WLoc: "N", NumOT: 0 }); mresults.push({ Season: "2024", DayNum: "", WTeamID: "1161", WScore: "67", LTeamID: "1438", LScore: "42", WLoc: "N", NumOT: 0 }); mresults.push({ Season: "2024", DayNum: "", WTeamID: "1212", WScore: "88", LTeamID: "1286", LScore: "81", WLoc: "N", NumOT: 0 }); mresults.push({ Season: "2024", DayNum: "", WTeamID: "1160", WScore: "60", LTeamID: "1129", LScore: "53", WLoc: "N", NumOT: 0 }); return mresults; }42:[{"id":"29eb92dfb73d8bffab0d085b5211e5e4a43ea7f006d381ec54c426178bfdff5a09bb446d406c4a473f11e9d79309921f9b03e20d23f9acce9a29d67157fe6207","href":"https://static.observableusercontent.com/files/29eb92dfb73d8bffab0d085b5211e5e4a43ea7f006d381ec54c426178bfdff5a09bb446d406c4a473f11e9d79309921f9b03e20d23f9acce9a29d67157fe6207","name":"Florida Gulf Coast University Eagles Dunk City.png","type":"image/png","lastModified":1714073378456.812,"size":300199},{"id":"5790764be2f965c18f2d42ab62a77c080fbfdaa3e4d189daa3ec2d79bc318f2f33312c6a8cb8c95dd67fcba6949c21a5c0b87ea95863032a31ae0ea16c2f1fcd","href":"https://static.observableusercontent.com/files/5790764be2f965c18f2d42ab62a77c080fbfdaa3e4d189daa3ec2d79bc318f2f33312c6a8cb8c95dd67fcba6949c21a5c0b87ea95863032a31ae0ea16c2f1fcd","name":"Florida Gulf Coast University Eagles Dunk City (1).png","type":"image/png","lastModified":1714073387050.044,"size":291321},{"id":"55e0df2f15c35c32945ba996cad5217dd2d1b5d7e479df22f4898c325eec92934eed969da43b6fe8b493e6274edc7b8dfc5651e6699e979dad2b80d8359cb1f7","href":"https://static.observableusercontent.com/files/55e0df2f15c35c32945ba996cad5217dd2d1b5d7e479df22f4898c325eec92934eed969da43b6fe8b493e6274edc7b8dfc5651e6699e979dad2b80d8359cb1f7","name":"11.png","type":"image/png","lastModified":1714073529997.719,"size":320447},{"id":"498f867ac60db0b6b220dc1d0db1198b6f5af7948462bb7689c56842ff7209271eeea2deae39b82950f0fcd24ebf1e9108ab22e1657ff31dd70f79f4da129ae1","href":"https://static.observableusercontent.com/files/498f867ac60db0b6b220dc1d0db1198b6f5af7948462bb7689c56842ff7209271eeea2deae39b82950f0fcd24ebf1e9108ab22e1657ff31dd70f79f4da129ae1","name":"Florida Gulf Coast University Eagles Dunk City (2).png","type":"image/png","lastModified":1714073394725.216,"size":333767},{"id":"e7b8d4fbd1d9ffb0259ff1eb4a886e0b72665702524e328ac935571c5bcbf858920dc266edf241a15db2cf7e1e656184c63c4fd5fade49f663432f5a8e63c597","href":"https://static.observableusercontent.com/files/e7b8d4fbd1d9ffb0259ff1eb4a886e0b72665702524e328ac935571c5bcbf858920dc266edf241a15db2cf7e1e656184c63c4fd5fade49f663432f5a8e63c597","name":"Florida Gulf Coast University Eagles Dunk City (3).png","type":"image/png","lastModified":1714073511506.274,"size":283938},{"id":"e36f89dda36ca5990dd02b7c6f85c07d87c15f59e3ce5299e694a8064c2ff1be73de4723dcd647c4df01002d50fc128eb3a0823e3490617d9f5189a57cbdf056","href":"https://static.observableusercontent.com/files/e36f89dda36ca5990dd02b7c6f85c07d87c15f59e3ce5299e694a8064c2ff1be73de4723dcd647c4df01002d50fc128eb3a0823e3490617d9f5189a57cbdf056","name":"9.png","type":"image/png","lastModified":1714073529993.625,"size":311960},{"id":"6c48c1581232995a5d945198c84cfccdf00c3bd6e81da781bd0c344e51f734f9bead96b8eba09144354457db4a4c33c428170d6970b22b3a138b50e781b9968e","href":"https://static.observableusercontent.com/files/6c48c1581232995a5d945198c84cfccdf00c3bd6e81da781bd0c344e51f734f9bead96b8eba09144354457db4a4c33c428170d6970b22b3a138b50e781b9968e","name":"7.png","type":"image/png","lastModified":1714073529994.131,"size":282849},{"id":"7a65d46db88c46ead79ead2a21fa1d96a7d44972570b3f040306a09fb9fae0b3f5758be596e0a5c638de73f153a6d3c965ec7a3fc61630ad3280db73f469d3a3","href":"https://static.observableusercontent.com/files/7a65d46db88c46ead79ead2a21fa1d96a7d44972570b3f040306a09fb9fae0b3f5758be596e0a5c638de73f153a6d3c965ec7a3fc61630ad3280db73f469d3a3","name":"6.png","type":"image/png","lastModified":1714073530004.245,"size":298598},{"id":"4a7c618f97e5fbb18f0d45ec408b3de0986914b9ff084721224b6f583c12046efd5c732317aa8f3d4b1f962753edd2256e01e22d85f7c0cb3a313b2ff9014fc7","href":"https://static.observableusercontent.com/files/4a7c618f97e5fbb18f0d45ec408b3de0986914b9ff084721224b6f583c12046efd5c732317aa8f3d4b1f962753edd2256e01e22d85f7c0cb3a313b2ff9014fc7","name":"12.png","type":"image/png","lastModified":1714073529999.08,"size":337389},{"id":"c52923500411740adb7d0b52c94da7a0054123f7a3dd8ba619f0a177aa09396756aa08a69f465f1f15678a71f3f74532aedfb8a27e8e71d8517903a0672b70f3","href":"https://static.observableusercontent.com/files/c52923500411740adb7d0b52c94da7a0054123f7a3dd8ba619f0a177aa09396756aa08a69f465f1f15678a71f3f74532aedfb8a27e8e71d8517903a0672b70f3","name":"13.png","type":"image/png","lastModified":1714073530005.149,"size":344282},{"id":"476bf45c981469c5f000c6ca698f00424e853375b0583f7676b443be1a6182611bd0b3ef04e70a6c4bcd152bf3bcfb9311315e4b5f5eaecffee0b3eb73bed819","href":"https://static.observableusercontent.com/files/476bf45c981469c5f000c6ca698f00424e853375b0583f7676b443be1a6182611bd0b3ef04e70a6c4bcd152bf3bcfb9311315e4b5f5eaecffee0b3eb73bed819","name":"14.png","type":"image/png","lastModified":1714073530006.668,"size":352025},{"id":"9f23abb94c25e277fde929103915922a8a7b33165aea2e89dacf7499391126df42cb131d9b79b1493ea6b68a460dabe845c39baf170b30f41fc57ef67201e7e3","href":"https://static.observableusercontent.com/files/9f23abb94c25e277fde929103915922a8a7b33165aea2e89dacf7499391126df42cb131d9b79b1493ea6b68a460dabe845c39baf170b30f41fc57ef67201e7e3","name":"10.png","type":"image/png","lastModified":1714073530009.005,"size":330829},{"id":"a97ac6aa0a73a36e08637ed9e24665cb6b61f69d3e509014cb4d5f5b687bc61537a3d03ac6d63d18d32c9d6e8cd16ab57f57815daf57171a40b206b976b2bddc","href":"https://static.observableusercontent.com/files/a97ac6aa0a73a36e08637ed9e24665cb6b61f69d3e509014cb4d5f5b687bc61537a3d03ac6d63d18d32c9d6e8cd16ab57f57815daf57171a40b206b976b2bddc","name":"5.png","type":"image/png","lastModified":1714073529988.869,"size":288195},{"id":"9aa524505d8453f5e44ef3992eef3cbe35806cc7c186d2e2f8eabc282e5aaa45528db2270cd2b68b3833acf591c8d3cce20824a1d8327d025da20dc8cd9f293a","href":"https://static.observableusercontent.com/files/9aa524505d8453f5e44ef3992eef3cbe35806cc7c186d2e2f8eabc282e5aaa45528db2270cd2b68b3833acf591c8d3cce20824a1d8327d025da20dc8cd9f293a","name":"8.png","type":"image/png","lastModified":1714073529995.313,"size":311103},{"id":"e61fea2d9d3a7fbd778cf9c85e8248417a8ad835ab2e453c43db4e7779a6b300b63e57309d0d31e66bd1bc0b1edb29f594cd16d2097b50ed97cec329cff42528","href":"https://static.observableusercontent.com/files/e61fea2d9d3a7fbd778cf9c85e8248417a8ad835ab2e453c43db4e7779a6b300b63e57309d0d31e66bd1bc0b1edb29f594cd16d2097b50ed97cec329cff42528","name":"MNCAATourneySeeds@4.csv","type":"text/csv","lastModified":1713734238016.311,"size":38514},{"id":"75be59f3b2ae0c01f610baf3d7f6b4452b2d485f48a0b1f180104d686cc28671f57c03b291150306c27fb438bfe7b98f29fd65e3c743963e9ad9087d5905fb97","href":"https://static.observableusercontent.com/files/75be59f3b2ae0c01f610baf3d7f6b4452b2d485f48a0b1f180104d686cc28671f57c03b291150306c27fb438bfe7b98f29fd65e3c743963e9ad9087d5905fb97","name":"MTeams@3.csv","type":"text/csv","lastModified":1713734238016.311,"size":9984},{"id":"8b36a17f82035af05927a4adf186c3a857fb0b506074810e1cddd0ea2ef45f6518c3b738fa617e1b4d2ee847ec010ca3ceab00a7c20117d61d4213347b29e558","href":"https://static.observableusercontent.com/files/8b36a17f82035af05927a4adf186c3a857fb0b506074810e1cddd0ea2ef45f6518c3b738fa617e1b4d2ee847ec010ca3ceab00a7c20117d61d4213347b29e558","name":"WNCAATourneyCompactResults@15.csv","type":"text/csv","lastModified":1713734238016.311,"size":45572},{"id":"e1758719090dc380fc1686628930c06e66146b71f36fc746be9a20ef2eff1b0182a2c01133644533019abfcf464903a726d885733e142482aa3e9bcbc824e126","href":"https://static.observableusercontent.com/files/e1758719090dc380fc1686628930c06e66146b71f36fc746be9a20ef2eff1b0182a2c01133644533019abfcf464903a726d885733e142482aa3e9bcbc824e126","name":"WNCAATourneySeeds@4.csv","type":"text/csv","lastModified":1713734238016.311,"size":25184},{"id":"c99de88182e024338fbffb1d829fd474910e93b106e06b00f63c774558e8154fc0d42169da7219411ba8a516939585519f772c708281fc7b4f121f43e7f75340","href":"https://static.observableusercontent.com/files/c99de88182e024338fbffb1d829fd474910e93b106e06b00f63c774558e8154fc0d42169da7219411ba8a516939585519f772c708281fc7b4f121f43e7f75340","name":"WTeams@2.csv","type":"text/csv","lastModified":1713734238016.311,"size":6153},{"id":"6fd7497d8926cdc89d983b9882ea0f747d7da5ca4cd105336d24ed983a8cba4b786930fa19f6f6473218608f3d1b74aebe35962166861694bacfde1f1b92fae6","href":"https://static.observableusercontent.com/files/6fd7497d8926cdc89d983b9882ea0f747d7da5ca4cd105336d24ed983a8cba4b786930fa19f6f6473218608f3d1b74aebe35962166861694bacfde1f1b92fae6","name":"MNCAATourneyCompactResults@35.csv","type":"text/csv","lastModified":1713734238016.311,"size":71674}] 2d:{"id":"c0abef400c9a4505","slug":null,"title":"A5: March Madness","thumbnail":"1e0a06973f2dcfb81ef452b33504fbef7febbe4399618f1fdbe442c2921c3df4","access_level":"public","create_time":"$D2024-04-21T21:17:18.016Z","update_time":"$D2024-05-10T02:28:59.887Z","view_time":null,"first_public_time":"$D2024-04-25T19:27:20.131Z","fork":{"id":"c218412edc1e100a","slug":"ncaa-brackets","title":"NCAA Brackets","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":2907,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"99643fce10c4342f","login":"lindsey-cruz-rosales","name":"Lindsey Cruz Rosales","avatar_url":"https://avatars-next.observableusercontent.com/011ac848cf5b5974a71e340ebc8f6315d3bab0f16841e103184fcf0f2fe02667","tier":null}],"members":[{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"editor"},{"type":"individual","id":"99643fce10c4342f","login":"lindsey-cruz-rosales","name":"Lindsey Cruz Rosales","avatar_url":"https://avatars-next.observableusercontent.com/011ac848cf5b5974a71e340ebc8f6315d3bab0f16841e103184fcf0f2fe02667","tier":null,"role":"editor"},{"type":"individual","id":"53ec77a9673c3597","login":"natalie-bran","name":"Natalie Bran","avatar_url":"https://avatars-next.observableusercontent.com/e1dc2856c870bdf3bf3431e8ede807ce94a02c153175f2f4006f8f700ff8de5d","tier":null,"role":"editor"},{"type":"individual","id":"81dad49c9f0cfc99","login":"rosa-figueroa","name":"Rosa Figueroa","avatar_url":"https://avatars-next.observableusercontent.com/c3b0411ccf66096dc437bf85486464516505a3fa1907028adf341ed244d5263f","tier":null,"role":"editor"},{"type":"individual","id":"52489e20e754879f","login":"yueqi-li2","name":"Yueqi Li","avatar_url":"https://avatars-next.observableusercontent.com/5825390610f824b08da04fc685e3c6b798658b3af6339a05408fd7277d5f1959","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A5: March Madness","cells":[{"id":0,"value":"md`# A5: March Madness`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2084,"value":"## What is March Madness?\n\nMarch Madness is the name for the NCAA Division I Men’s and Women’s Basketball Tournaments. This annual sports extravaganza captures the hearts of millions as teams compete in a single-elimination format to win the national championship. The drama, the suspense, and the sheer unpredictability make March Madness a highlight of the American sports calendar.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2539,"value":"

\n There are over a\n 1000 \n teams in the NCAA. \n

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2537,"value":"\n// Create a scroll-animated SVG grid visualization by calling the function\ncreateScrollAnimatedGrid(32, 32, 20, 5); // Adjust parameters to your needs\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2134,"value":"

So who gets to play in the tournament?

\n 68 eligible teams are determined through bids.\n

\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2246,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2255,"value":"There are two types of bids: automatic and at-large.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2274,"value":"Automatic Bids:\nThese are given to 32 teams that win their respective conference tournaments. Each of the 32 NCAA Division I conferences holds a championship tournament at the end of the regular season, and the winner of each receives a guaranteed spot in March Madness.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2276,"value":"At-Large Bids:\nThe NCAA Selection Committee, a group composed of conference commissioners and school athletic directors, awards at-large bids. They select 36 teams that did not win their conference tournaments but are deemed worthy based on their overall season performance, strength of schedule, key wins, and other criteria. This selection process happens on Selection Sunday, a day when the tournament bracket is revealed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2089,"value":"### How is the tournament divided?\n\nIn March Madness, each team is assigned a \"seed\" based on their expected performance, which is determined by their record during the regular season and other factors considered by the Selection Committee. Seeds range from 1 to 16 in each of the four regions, with a seed of 1 being given to the teams deemed strongest. This seeding helps to organize the tournament's matchups in a way that initially favors higher-seeded teams, theoretically allowing the best teams a better chance to progress in the competition.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2099,"value":"topmatter = md`Browse all 61 NCAA basketball tournaments featuring 64 or more teams in the bracket visualization below. That's\n\n * All men's tournaments since 1985 and\n * All women's tournaments since 1998.\n\nGames that are shaded pink indicate upsets. We will learn about upsets in the next section.\n\n--- \n\nAll the data comes from [Kaggle's March Machine Learning Mania competition](https://www.kaggle.com/competitions/march-machine-learning-mania-2024) for the Men's and Women's basketball tournaments.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2105,"value":"viewof men_or_women = radio({ options: [\"Men\", \"Women\"], value: \"Men\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"viewof year = {\n let years;\n if (men_or_women == \"Men\") {\n years = [2023, 2022, 2021].concat(d3.range(1985, 2020).reverse());\n } else {\n years = [2023, 2022, 2021].concat(d3.range(1998, 2020).reverse());\n }\n return select({ title: \"Year\", options: years });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1548,"value":"//adapted from https://observablehq.com/@mcmcclur/ncaa-brackets\nbrackets = make_brackets()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2529,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2427,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2435,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2442,"value":"\n

Upset Seed Matchups

Although most March Madness upsets typically occur within more predictable seed matchups such as 11-6, 12-5, 10-7, and 13-4, it's the upsets involving greater seed disparities that capture the most attention.

These instances are graphically represented as dots on the lower right of the graph below, highlighting their rarity and dramatic nature. Each dot marks the count of upsets that have occurred with that specific seed matchup from 2008 to 2023.

Click the start button to see the count of upsets for each seed matchup in 2008-2023 upset history.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2212,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2215,"value":"Large seed differences are what makes an upset so shocking and entertaining to observe for college basketball fans. However, many tournament years, like 2014 for instance, are regarded as fan favorites for the sheer number of upsets that occurred in that single tournament.

Click start to watch the upset counts change throughout the past 15 years. Explore various notable upsets, chosen by their significant seed differences, by clicking on the dots for different rounds and tournament years.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2526,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2465,"value":"

Legendary Cinderella Stories

In the world of college basketball, the upsets during March Madness are where legends are born. Notable among these are the runs by Virginia Commonwealth University in 2011, Florida Gulf Coast University in 2013, Loyola Chicago in 2018. These teams, despite being in lower seeds, went deep into the tournament and grabbed the spotlight. We'll be zooming in on these cases to dissect what makes an underdog story so compelling and how it embodies the unpredictable thrill of the NCAA Tournament.

\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2270,"value":"

Virginia Commonwealth University's 2011 NCAA Cinderella Story: Havoc Reigns

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2268,"value":"Virginia Commonwealth University's Cinderella story unfolded in 2011 when the seed 11 team, led by coach Shaka Smart, made a historic run to the Final Four of the NCAA Tournament. Their \"Havoc\" defense continued to dismantle opposition, including a win over Florida State and an upset against top-seeded Kansas. \n\nExplore VCU's run throughout the 2011 tournament by moving the basketball below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2504,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2478,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2220,"value":"

Florida Gulf Coast University's 2013 NCAA Cinderella Story: Dunk City

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2261,"value":"Florida Gulf Coast University's 2013 run, known as \"Dunk City,\" became an iconic Cinderella story in NCAA basketball. As the first-ever 15th seed to reach the Sweet Sixteen, FGCU's thrilling high-energy style, filled with jaw-dropping slam dunks, took down higher-seeded teams and captured the imagination of fans nationwide.\n\nExplore FGCU's run throughout the 2013 tournament by moving the basketball below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2310,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2469,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2296,"value":"

Loyola Chicago University's 2018 NCAA Cinderella Story: Buzzer Beater Heroics

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2302,"value":"Loyola Chicago's Cinderella story in 2018 is highlighted by their 11th-seed status and their advancement to the Final Four, defying common expectations for such a low-seeded team. Loyola Chicago's unexpected success, including last-second victories and wins over higher-seeded teams, epitomizes the Cinderella story. \n\nExplore Loyola Chicago's run throughout the 2013 tournament by moving the basketball below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2515,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2484,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2308,"value":"For all three teams, their unexpected victories were expected to be significant losses, as demonstrated by the expert predictions throughout the tournaments. Yet, they defied the odds, transforming supposed brief appearances into legendary runs that captured the true spirit and unpredictability of March Madness.\n\nNow that we explored some of the most famous upsets of the past 15 years, revisit the brackets at the beginning to explore various upset journeys from all 61 NCAA tournaments.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2715,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2573,"value":"As we leave behind the tales of upsets and Cinderella stories, we shift our focus to the victors' journey. The next charts we explore do not just track paths but narrate the saga of triumph. These visualizations detail how champions navigate through the brackets, turning challenges into stepping stones towards the pinnacle of March Madness glory.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2579,"value":"## Echoes of Triumph: Visualizing the Champions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2862,"value":"Explore comprehensive visualizations that trace the championship paths of the tournament winners. These charts will depict how teams from both the men's and women's brackets overcame their challenges to win the national title.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2070,"value":"chart2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2757,"value":"### Culmination of Men's March Madness Winners (2008-2024)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2870,"value":"By charting the path of each team through the tournament brackets, thrilling narratives of triumph, rivalry, and perseverance are showcased that define men's collegiate basketball. This graph aims to capture the excitement and intensity of March Madness, illustrating how the relentless pursuit of victory shapes each team's legacy in one of the most revered competitions in American sports.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2765,"value":"### Culmination of Women's March Madness Winners (2008-2024)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2068,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2864,"value":"For the NCAA Women's Basketball Final Four from 2008 to 2023, this visualization celebrates the achievements in women's sports. It works the same as the previous graph, we want to emphasize the importance and visibility of female athletes in collegiate sports.\n\nFor the first time in 2024, \"the women's title game drew more viewers than the men's , averaging 18.7 million viewers on ABC and ESPN and peaking at 24 million viewers. This made the game played between No. 1 seeds Iowa and South Carolina the most-watched women's college basketball game on record, as well as the most watched basketball game, men's or women's, since 2019 (NCAA.com)\".\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2766,"value":"

Conclusion

\n\nMarch Madness is more than a basketball tournament; it's a cultural phenomenon where triumphs, upsets, and Cinderella stories captivate millions. Whether it's the unexpected victories of underdogs or the dominance of favorites, March Madness embodies the spirit of unpredictability that makes it so beloved. As fans celebrate both men's and women's basketball, this annual event continues to inspire with legendary moments and the promise of more to come.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2903,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2879,"value":"# Writeup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2890,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2721,"value":"

\n---\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1551,"value":"md`## Code Graveyard!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1598,"value":"md`### Bracket Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2851,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":926,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2535,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1592,"value":"// Each game_container contains two team_containers\n// They're displayed slightly differently depending on\n// round and whether they're on the top or bottom (tb).\nfunction team_container(team, round, tb) {\n let div = d3\n .create(\"div\")\n .attr(\"class\", function (d) {\n let label = \"team \" + tb + \" \";\n if (team && team.TeamID) {\n label = label + \"Team\" + team.TeamID;\n }\n if (round == 6) {\n label = label + \" championship\";\n }\n return label;\n });\n\n // Display the seed number\n if (team && team.seed !== undefined) {\n div.append(\"span\").text(team.seed + \" \");\n }\n\n // Add team name and score\n let team_display;\n if (team && team.TeamNames && team.score == 0) {\n team_display = team.TeamNames;\n } else if (team) {\n team_display = team.TeamName;\n }\n div.append(\"span\").text(team_display);\n if (team && team.score) {\n div.append(\"span\").attr(\"class\", \"score\").text(team.score);\n }\n\n \n return div.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1345,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1197,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1975,"value":"tourney_tree.descendants()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1339,"value":"// Apply d3.hierarchy and d3.tree\n// We can define display_map below to order the seeds in\n// round 1 however we want.\ntourney_tree = {\n let tree = d3.hierarchy(tourney);\n tree.sort(function(x, y) {\n return (\n display_map.get(y.data.expected_seeds[0]) -\n display_map.get(x.data.expected_seeds[0])\n );\n });\n d3\n .tree()\n .separation((a, b) => (a.parent == b.parent ? 1 : 1.1) / a.depth)\n .size([div_height, div_width])(tree);\n\n tree.descendants().forEach(function(v) {\n v.x2 = horizontal_rescaler(v);\n v.y2 = vertical_rescaler(v);\n });\n\n return tree;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"// Here's how I'd like the seeds to be positioned in round 1\ndisplay_map = {\n let display_order = [1, 16, 9, 8, 5, 12, 13, 4, 3, 14, 11, 6, 7, 10, 15, 2];\n let display_map = new Map();\n display_order.forEach((d, i) => display_map.set(d, i + 1));\n return display_map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1628,"value":"// The info that we need for round 1\nfunction round1_info(o) {\n let team0 = get_team(o.region, o.expected_seeds[0]);\n let team1 = get_team(o.region, o.expected_seeds[1]);\n let scores = get_scores(team0.TeamID, team1.TeamID);\n team0.score = scores[0];\n team0.pos = get_pos(team0.seed, 1);\n team1.score = scores[1];\n team1.pos = get_pos(team1.seed, 1);\n\n let wTeam, lTeam;\n if (team0.score > team1.score) {\n wTeam = team0;\n wTeam.win = true;\n lTeam = team1;\n } else if (team0.score < team1.score) {\n wTeam = team1;\n wTeam.win = true;\n lTeam = team0;\n } else {\n wTeam = team0;\n wTeam.win = false;\n lTeam = team1;\n }\n return { WTeam: wTeam, LTeam: lTeam };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1740,"value":"// Get the place of a team in a game_container on either the top or bottom\n// as a function of its seed and round.\nfunction get_pos(seed, round, region) {\n let s;\n if (typeof seed == 'number') {\n s = seed;\n } else {\n s = parseInt(seed.slice(1, 3));\n }\n if (round <= 4) {\n let n;\n if (s % 2 == 1) {\n n = (s - 1) / 2;\n } else {\n n = 16 - s / 2;\n }\n let bits = n.toString(2).padStart(4, '0');\n let bit = bits[round - 1];\n if (bit == '0') {\n return 'top';\n } else {\n return 'bot';\n }\n } else {\n if ((region == 'W' || region == 'Y') && round == 5) {\n return 'top';\n } else if ((region == 'X' || region == 'Z') && round == 5) {\n return 'bot';\n } else if ((region == 'W' || region == 'X') && round == 6) {\n return 'top';\n } else if ((region == 'Z' || region == 'Y') && round == 6) {\n return 'bot';\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"// Look up the scores\nfunction get_scores(teamID1, teamID2) {\n let result = this_years_results.filter(function(o) {\n return (\n (o.WTeamID == teamID1 && o.LTeamID == teamID2) ||\n (o.WTeamID == teamID2 && o.LTeamID == teamID1)\n );\n });\n if (result.length == 1) {\n result = result[0];\n if (result.WTeamID == teamID1) {\n return [result.WScore, result.LScore].map(d => parseInt(d));\n } else if (result.LTeamID == teamID1) {\n return [result.LScore, result.WScore].map(d => parseInt(d));\n }\n } else {\n return [0, 0];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"this_years_results = {\n if (men_or_women == \"Men\") {\n return mresults.filter(d => d.Season == year);\n } else {\n return wresults.filter(d => d.Season == year);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"this_years_seeds = {\n if (men_or_women == \"Men\") {\n return mseeds.filter(d => d.Season == year);\n } else {\n return wseeds.filter(d => d.Season == year);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"wseeds = d3.csvParse(await FileAttachment(\"WNCAATourneySeeds@4.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"wresults = {\n let wresults = d3.csvParse(\n await FileAttachment(\"WNCAATourneyCompactResults@15.csv\").text()\n );\n return wresults.concat(\n ncaa_results_2023.filter((o) => Math.floor(o.WTeamID / 1000) == 3)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":706,"value":"team_map = {\n if (men_or_women == \"Men\") {\n return mteam_map;\n } else {\n return wteam_map;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"wteam_map = {\n let wteams = d3.csvParse(await FileAttachment(\"WTeams@2.csv\").text());\n let wteam_map = new Map();\n wteams.forEach(function(team) {\n wteam_map.set(team.TeamID, team.TeamName);\n });\n return wteam_map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"mteam_map = {\n let mteams = d3.csvParse(await FileAttachment(\"MTeams@3.csv\").text());\n let mteam_map = new Map();\n mteams.forEach(function(team) {\n mteam_map.set(team.TeamID, team.TeamName);\n });\n return mteam_map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"mseeds = d3.csvParse(await FileAttachment(\"MNCAATourneySeeds@4.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1990,"value":"// From @mbostock/pbcopy\nfunction pbcopy(text) {\n const fake = document.body.appendChild(document.createElement(\"textarea\"));\n fake.style.position = \"absolute\";\n fake.style.left = \"-9999px\";\n fake.setAttribute(\"readonly\", \"\");\n fake.value = \"\" + text;\n fake.select();\n try {\n return document.execCommand(\"copy\");\n } catch (err) {\n return false;\n } finally {\n fake.parentNode.removeChild(fake);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1649,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1939,"value":"// Current data imported from the notebook\nimport { ncaa_results_2023 } from \"c7bca04a9bd56e41\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2066,"value":"import {chart2} from \"f8a275fba0a98b81\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2064,"value":"import {chart} from \"f8a275fba0a98b81\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"tippy = require(\"https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1655,"value":"md`### Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"div_height = 0.85 * screen.availHeight\n// div_height = 0.625 * div_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1004,"value":"game_height = div_height / 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"div_width = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"team_width = div_width / 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 2e:"$2d:body"