2c:null 2d:["$","title",null,{"children":"Visualize your Kaggle brackets for March Madness | Stephen Petrides | Observable"}] 32:T717,topmatter = md`[Kaggle](https://www.kaggle.com/) runs an annual March Madness competition where competitors use data science to make predictions about the NCAA tournament. It's a little deeper than the standard bracket, though, since (in true stastistical fashion) we assess the *probability* of a particular outcome for each game. Once the game is played, your score is assessed using a "Log Loss" formula, as [described by Kaggle](https://www.kaggle.com/c/ncaaw-march-mania-2021/overview/evaluation). This notebook allows you to visualize the process. You can begin by choosing an example from the example menu which shows my submissions for this year, as well as a few completed examples from past years. If you compete in the competition, you can also upload your own Kaggle prediction file. After you select or upload a data file, the corresponding bracket should appear with the games shaded according to the quality of your prediction. Green is good, red is bad, and almost white is near the middle. You can hover over a game to see the log loss score for that game. The overall, average log loss for all games is displayed as well. Note that the tool does *not* use your predictions to propogate teams up the bracket. Rather, it displays games that have actually occurred and indicates the quality of your predictions via the shading and tooltip. All the data comes from Kaggle's March Machine Learning Mania competitions for the [Men's](https://www.kaggle.com/c/ncaam-march-mania-2021/) and [Women's](https://www.kaggle.com/c/ncaaw-march-mania-2021/) tournaments. Thus, you can visualize a prediction file for any year covered by Kaggle's data. That's * All men's tournaments since 1985 and * all women's tournaments since 1998. Of course, 2020 isn't included and 2021 is only partway through. `33:T1168,input = { let div = d3.create("div"); div.append("h4").text("Examples"); let sample_file = div.append("select"); let init_option = sample_file .append("option") .property("value", "none") .text(" --- "); sample_file .append("option") .property("value", "submit2022") .text("Men's 2022 Random Sample"); sample_file .append("option") .property("value", "myM2021submission") .text("My 2021 Men"); sample_file .append("option") .property("value", "w2021SubmitWX") .text("My 2021 Women"); sample_file .append("option") .property("value", "W2021SecondPlace") .text("2021 Women's 2nd place"); sample_file .append("option") .property("value", "myW2019submission") .text("My 2019 Women"); sample_file .append("option") .property("value", "myM2018submission") .text("My 2018 Men"); sample_file .append("option") .property("value", "Mens2019FifthPlace") .text("2019 Men's Fifth Place"); sample_file .append("option") .property("value", "Womens2019FirstPlace") .text("2019 Women's First Place"); sample_file.on("change", async function () { let v = sample_file.property("value"); let csv_text; if (v == "submit2022") { // csv_text = await FileAttachment("myW2019submission.csv").text(); Promises.delay() .then(async function () { csv_text = await FileAttachment("submit2022.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "myM2021submission") { // csv_text = await FileAttachment("myW2019submission.csv").text(); Promises.delay() .then(async function () { csv_text = await FileAttachment("mSubmitYZ.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "w2021SubmitWX") { // csv_text = await FileAttachment("myW2019submission.csv").text(); Promises.delay() .then(async function () { csv_text = await FileAttachment("w2021SubmitWX.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "W2021SecondPlace") { // csv_text = await FileAttachment("myW2019submission.csv").text(); Promises.delay() .then(async function () { csv_text = await FileAttachment("W2021SecondPlace.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "myW2019submission") { // csv_text = await FileAttachment("myW2019submission.csv").text(); Promises.delay() .then(async function () { csv_text = await FileAttachment("myW2019submission.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "myM2018submission") { Promises.delay() .then(async function () { csv_text = await FileAttachment("myM2018submission.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "Mens2019FifthPlace") { Promises.delay() .then(async function () { csv_text = await FileAttachment("Mens2019FifthPlace.csv").text(); }) .then(function () { set_setup(csv_text); }); } else if (v == "Womens2019FirstPlace") { Promises.delay() .then(async function () { csv_text = await FileAttachment("Womens2019FirstPlace.csv").text(); }) .then(function () { set_setup(csv_text); }); } file_input.node().value = null; init_option.node().disabled = true; // set_setup(csv_text); }); div.append(() => sample_file.node()); let file_input = div.append("input").attr("type", "file"); // Object.assign(file_input.node(), { // onchange: function(evt) { // let t = evt.target; // let fr = new FileReader(); // fr.readAsText(t.files[0]); // fr.onload = function(load) { // let csv_text = load.explicitOriginalTarget.result; // set_setup(csv_text); // }; // sample_file.property('value', 'none'); // } // }); file_input.node().addEventListener( "change", function () { sample_file.property("value", "none"); let ff = this.files[0]; ff.text().then((o) => set_setup(o)); }, false ); return div.node(); }34:T81e,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', '#dd2'); 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', 'rgba(204,204,204,0)'); div.selectAll('.game.' + class_label).style('border', 'solid 1px black'); svg.selectAll('.link.' + class_label).attr('stroke-width', 1); }); return div.node(); }35:Teb2,function game_container(game) { //setup.game_cnt = setup.game_cnt + 1; 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 shade = "#ddd"; if ( game.data.WTeam && game.data.LTeam && game.data.WTeam.win & (game.data.WTeam.score > 1) ) { let pred = get_predicted_probability( game.data.WTeam.TeamID, game.data.LTeam.TeamID ); // setup.log_loss = setup.log_loss - Math.log(pred); if (pred >= 0.5) { shade = d3.interpolateGreens(1.5 * (pred - 0.5)); } else if (pred < 0.5) { shade = d3.interpolateReds(1.5 * (0.5 - pred)); } } let div = d3 .create("div") .attr("class", "game-container") .style("background-color", shade) .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"); div.append(() => team_container(top_team, game.data.round, "top_team")); div.append(() => team_container(bot_team, game.data.round, "bot_team")); if ( game.data.WTeam && game.data.WTeam.win && game.data.LTeam && game.data.WTeam.score > 1 ) { let pred = get_predicted_probability( game.data.WTeam.TeamID, game.data.LTeam.TeamID ); let game_log_loss = -Math.log(pred); tippy(div.node(), { content: `Prediction was that ${game.data.WTeam.TeamName} would beat ${ game.data.LTeam.TeamName } with probabiltiy ${format(pred)} for a Log Loss of ${format( game_log_loss )}.` }); } else if ( game.data.WTeam && game.data.WTeam.win && game.data.LTeam && game.data.WTeam.score == 1 ) { tippy(div.node(), { content: "Game cancelled" }); } else if ( game.data.WTeam && game.data.WTeam.TeamID && game.data.LTeam && game.data.LTeam.TeamID && !game.data.WTeam.win ) { let pred = get_predicted_probability( game.data.WTeam.TeamID, game.data.LTeam.TeamID ); let game_log_loss = -Math.log(pred); tippy(div.node(), { content: `Prediction is that ${game.data.WTeam.TeamName} will beat ${ game.data.LTeam.TeamName } with probabiltiy ${format(pred)}.` }); } // 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 = `2021,,${game.data.WTeam.TeamID},WS,${game.data.LTeam.TeamID},LS,, ${game.data.WTeam.TeamName}, ${game.data.LTeam.TeamName}`; pbcopy(result_text); } }); // if ( // game.data.WTeam && // game.data.WTeam.TeamID == 1116 && // game.data.LTeam && // game.data.LTeam.TeamID == 1403 // ) { // console.log(['problem is ', game.data]); // } return div.node(); }36:T5f1,// Each game_container contains two team_containers // They're displayed slightly differently depending on // round and whether they're on the top or bottom (tb). function team_container(team, round, tb) { let div = d3 .create('div') .style('background', 'rgba(204, 204, 204, 0)') .attr('class', function(d) { let label = 'team ' + tb + ' '; if (team && team.TeamID) { label = label + 'Team' + team.TeamID; } if (round == 6) { label = label + ' championship'; } return label; }); // Round 1 games display the seed and might have a play-in to highlight. if (round == 1) { let seed_span = div.append('span').text(team.seed + ' '); if (team.playin) { seed_span.style('color', 'blue'); let title = 'Play-in info
'; title = title + `${team.TeamName}: ${team.playin.score}
`; title = title + `${team.playin.playin_opponent_name}: ${team.playin.playin_opponent_score}`; // seed_span.attr('title', title); // tippy(seed_span.node()); tippy(seed_span.node(), { content: title, allowHTML: true }); } } // Add name and score let team_display; if (team && team.TeamNames && team.score == 0) { team_display = team.TeamNames; } else if (team) { team_display = team.TeamName; } div.append('span').text(team_display); if (team && team.score) { div .append('span') .attr('class', 'score') .text(team.score); } return div.node(); }37: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; } }38: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); }39: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; } }3a:Te95,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)); } } console.log(tourney); // 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; console.log(child0); 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; }3b:T405,// Get the place of a team in a game_container on either the top or bottom // as a function of its seed and round. // It's a kinda fun fact that the position can be computed as a function of // the binary expansion of the seed-1 and the round number. function get_pos(seed, round, region) { let s; if (typeof seed == 'number') { s = seed; } else { s = parseInt(seed.slice(1, 3)); } if (round <= 4) { let n; if (s % 2 == 1) { n = (s - 1) / 2; } else { n = 16 - s / 2; } let bits = n.toString(2).padStart(4, '0'); let bit = bits[round - 1]; if (bit == '0') { return 'top'; } else { return 'bot'; } } else { if ((region == 'W' || region == 'Y') && round == 5) { return 'top'; } else if ((region == 'X' || region == 'Z') && round == 5) { return 'bot'; } else if ((region == 'W' || region == 'X') && round == 6) { return 'top'; } else if ((region == 'Z' || region == 'Y') && round == 6) { return 'bot'; } } }3c: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 }; }3d:T485,styles = html` `3e:[{"id":"013750972bc4b6f4fecf1d61d6f9a46bedde7bc650d7263fd2179539affc8ffeae14eb315597c6c1dfe3844392c5df57cb339d5dc81e1316d8aabb0d0a392c40","href":"https://static.observableusercontent.com/files/013750972bc4b6f4fecf1d61d6f9a46bedde7bc650d7263fd2179539affc8ffeae14eb315597c6c1dfe3844392c5df57cb339d5dc81e1316d8aabb0d0a392c40","name":"WNCAATourneySeeds@2.csv","type":"text/csv","lastModified":1647385150218.656,"size":23128},{"id":"c21070dc765a6ce037f793d9f4ebf48e33534441a79e5b349c083606ceb7d12c701b89de81fe6eeb14b0a779c41d53d7f9b6c68377dc71eae9b765c0d9f05e86","href":"https://static.observableusercontent.com/files/c21070dc765a6ce037f793d9f4ebf48e33534441a79e5b349c083606ceb7d12c701b89de81fe6eeb14b0a779c41d53d7f9b6c68377dc71eae9b765c0d9f05e86","name":"submit2022.csv","type":"text/csv","lastModified":1647385150218.656,"size":40978},{"id":"6005d12613ced9280e7ef27248521459089f313b5aeb4d9f0a9001cd07f7b88f3df237f08a8707ddffd4d08e1e944fee96a6276f2a3851364fcc5f4bffde17ca","href":"https://static.observableusercontent.com/files/6005d12613ced9280e7ef27248521459089f313b5aeb4d9f0a9001cd07f7b88f3df237f08a8707ddffd4d08e1e944fee96a6276f2a3851364fcc5f4bffde17ca","name":"MyMNCAATourneySeeds.csv","type":"text/csv","lastModified":1647385150218.656,"size":34035},{"id":"a094f527627587bed9ab90de3be6b16874cc40723784c4ff5cf1ebe98ac7da1c13c4b984ea7c4a18028c7dd95a60fc46f376ac05abbdce97394c2498b3a010ec","href":"https://static.observableusercontent.com/files/a094f527627587bed9ab90de3be6b16874cc40723784c4ff5cf1ebe98ac7da1c13c4b984ea7c4a18028c7dd95a60fc46f376ac05abbdce97394c2498b3a010ec","name":"Mens2019FifthPlace.csv","type":"text/csv","lastModified":1647385150218.656,"size":81980},{"id":"e59bacd225b6dc55ca80cbadec925b47bc400d1e7f3b08e17322137facf49782cd195ecf6ff25577b7dc6d322218684d479c7b460cff379b5931e3a3baece90d","href":"https://static.observableusercontent.com/files/e59bacd225b6dc55ca80cbadec925b47bc400d1e7f3b08e17322137facf49782cd195ecf6ff25577b7dc6d322218684d479c7b460cff379b5931e3a3baece90d","name":"Womens2019FirstPlace.csv","type":"text/csv","lastModified":1647385150218.656,"size":38600},{"id":"e25b892ce8f38ebbab323d55dd98f0c471eaaf0bc58e4aafdab461adcb2ececb59facf8e44302bbbcd8024e646256cd8c14c465d296035d13d563c3d1368d9a2","href":"https://static.observableusercontent.com/files/e25b892ce8f38ebbab323d55dd98f0c471eaaf0bc58e4aafdab461adcb2ececb59facf8e44302bbbcd8024e646256cd8c14c465d296035d13d563c3d1368d9a2","name":"myW2019submission.csv","type":"text/csv","lastModified":1647385150218.656,"size":67955},{"id":"ea2650d5887842682b8b6c1f79dac1c0a67e169f222158ae8107ccfbcfdef2748deba49a1d99d37f6af1059e0563722bbaeac8372b0c28641885e37bfd0cea1e","href":"https://static.observableusercontent.com/files/ea2650d5887842682b8b6c1f79dac1c0a67e169f222158ae8107ccfbcfdef2748deba49a1d99d37f6af1059e0563722bbaeac8372b0c28641885e37bfd0cea1e","name":"myM2018submission.csv","type":"text/csv","lastModified":1647385150218.656,"size":68359},{"id":"2343c34f71a68388b057661e45b8c52a60cd9ba1ea937ed01cdc62012d1549bce584e779f4cad676f990896b76cde74be2b379526eb37f6865ed50f2b9958fc0","href":"https://static.observableusercontent.com/files/2343c34f71a68388b057661e45b8c52a60cd9ba1ea937ed01cdc62012d1549bce584e779f4cad676f990896b76cde74be2b379526eb37f6865ed50f2b9958fc0","name":"WTeams.csv","type":"text/csv","lastModified":1647385150218.656,"size":5955},{"id":"3a201b34bbb660b5f9d2cebb59e2375710b6ba4cd3af9c621273809fa9ac258c916540505585a31cbaa87c644656c2778bf5ad0039974f15ca0e5d24a8c10007","href":"https://static.observableusercontent.com/files/3a201b34bbb660b5f9d2cebb59e2375710b6ba4cd3af9c621273809fa9ac258c916540505585a31cbaa87c644656c2778bf5ad0039974f15ca0e5d24a8c10007","name":"MTeams.csv","type":"text/csv","lastModified":1647385150218.656,"size":9676},{"id":"2419f94d7b6bb86a5ec9454e7f33d1d872843bc83e5d362d972ef0613bfa203402e1161806863ec1ca26767e070ef2802bc018e0b5f6a1c7defebd1c752ae6e4","href":"https://static.observableusercontent.com/files/2419f94d7b6bb86a5ec9454e7f33d1d872843bc83e5d362d972ef0613bfa203402e1161806863ec1ca26767e070ef2802bc018e0b5f6a1c7defebd1c752ae6e4","name":"W2021SecondPlace.csv","type":"text/csv","lastModified":1647385150218.656,"size":64841},{"id":"3b69e51f66cb5ce64ddfa82c716e4a768dcb28d1d537db009d512bca55cd3dae28a85ab9cd3d4d3fe9b10a93d963c9a5d81f30e030fba4e860e7c00341f243d0","href":"https://static.observableusercontent.com/files/3b69e51f66cb5ce64ddfa82c716e4a768dcb28d1d537db009d512bca55cd3dae28a85ab9cd3d4d3fe9b10a93d963c9a5d81f30e030fba4e860e7c00341f243d0","name":"mSubmitYZ.csv","type":"text/csv","lastModified":1647385150218.656,"size":57924},{"id":"684bc6061be17a0de1155b51fff3b7c06b6761deb168edb8e849af2aeba29b1e4ab4a3833229cc8f0e2f2102c4b3a6265ab836556b2bed87720966cd07676778","href":"https://static.observableusercontent.com/files/684bc6061be17a0de1155b51fff3b7c06b6761deb168edb8e849af2aeba29b1e4ab4a3833229cc8f0e2f2102c4b3a6265ab836556b2bed87720966cd07676778","name":"MNCAATourneyCompactResults@70.csv","type":"text/csv","lastModified":1647385150218.656,"size":69381},{"id":"5865af0f7b972f7cfe7e1bd4f0340c558f29caad5374e5bcfdaea0002858cd383ad4e91bba7a53ee0f1f1a0bcc1d5e442d598c0e8dfb5d0b72e0c2512df3dd74","href":"https://static.observableusercontent.com/files/5865af0f7b972f7cfe7e1bd4f0340c558f29caad5374e5bcfdaea0002858cd383ad4e91bba7a53ee0f1f1a0bcc1d5e442d598c0e8dfb5d0b72e0c2512df3dd74","name":"WNCAATourneyCompactResults@30.csv","type":"text/csv","lastModified":1647385150218.656,"size":43245},{"id":"24e9339fc370a6ec22e8251810bd8ac177de0028746cca9adfc44d228c614aa65bd25a7a36d947942175a7e71406cced4d65c025cd3940e08d358ec91ec1cdeb","href":"https://static.observableusercontent.com/files/24e9339fc370a6ec22e8251810bd8ac177de0028746cca9adfc44d228c614aa65bd25a7a36d947942175a7e71406cced4d65c025cd3940e08d358ec91ec1cdeb","name":"w2021SubmitWX.csv","type":"text/csv","lastModified":1647385150218.656,"size":50978},{"id":"9d29fadac9c3f62adefc3d4668ec642e533b6fe07322fa4b2f44719ea344cc6da54e9ee97a4a738d50b366fc963829b85532bef19ce73436cab875ea6e42ddb9","href":"https://static.observableusercontent.com/files/9d29fadac9c3f62adefc3d4668ec642e533b6fe07322fa4b2f44719ea344cc6da54e9ee97a4a738d50b366fc963829b85532bef19ce73436cab875ea6e42ddb9","name":"MNCAATourneySeeds.csv","type":"text/csv","lastModified":1678833548864.382,"size":37486}] 30:{"id":"fd7c77b565d5a269","slug":"visualize-your-kaggle-brackets-for-march-madness","title":"Visualize your Kaggle brackets for March Madness","thumbnail":"038bccfcf75b1c254571b8726c0ff29ec749f70f3d9cf13f1ca484b946a636d9","access_level":"public","create_time":"$D2022-03-15T22:59:10.218Z","update_time":"$D2023-03-14T22:59:47.982Z","view_time":null,"first_public_time":"$D2022-03-16T00:04:28.084Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"3b4417037bdaf52d","login":"sdpetrides","name":"Stephen Petrides","avatar_url":"https://avatars-next.observableusercontent.com/68379d9e1a57d4d8616cc33181b6998689f3a4970008985334333318a8eac803","tier":"starter_2024"},"version":2703,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef75e9c1a233cd0b","login":"sdpetrides","name":"Stephen Petrides","avatar_url":"https://avatars-next.observableusercontent.com/68379d9e1a57d4d8616cc33181b6998689f3a4970008985334333318a8eac803","tier":null}],"members":[{"type":"individual","id":"ef75e9c1a233cd0b","login":"sdpetrides","name":"Stephen Petrides","avatar_url":"https://avatars-next.observableusercontent.com/68379d9e1a57d4d8616cc33181b6998689f3a4970008985334333318a8eac803","tier":null,"role":"editor"}],"comments":[{"id":"0fd1f3b7cc4f7015","reply_to_id":null,"content":"The extension you've made has been on my to do list for some time. I hadn't really thought about how I'd make the change but your approach seems quite simple and effective - i.e. elegant! Thanks!!\n\nI'll definitely merge this stuff into my notebook before too long and I think we can improve it a bit too. I'm pretty slammed until the end of the week, though, so it won't be right away. Let me know if you make any more progress!","create_time":"$D2022-03-16T02:01:15.098Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Visualize your Kaggle brackets for March Madness","cells":[{"id":0,"value":"md`# Visualize your Kaggle brackets for March Madness`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1999,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2276,"value":"md`You can also just browse past tournaments using [this notebook](https://observablehq.com/@mcmcclur/ncaa-brackets).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2647,"value":"**EDIT:** I have added a *Project Bracket* option to see what the predicted bracket looked like.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2007,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2628,"value":"viewof radio_project = Inputs.radio([\"True\", \"False\"], {\n label: \"Project Bracket\",\n value: \"False\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2207,"value":"log_loss_display = {\n let div = d3\n .create('div')\n .attr('id', 'll')\n .style('height', '15px')\n .style('font-size', '20px')\n .style('text-align', 'center');\n let relevant_results = this_years_results.filter(\n o => !o.playin_flag && parseInt(o.WScore) > 1\n );\n console.log(relevant_results);\n let total_log_loss =\n d3.sum(relevant_results.map(log_loss)) / relevant_results.length;\n if (!isNaN(total_log_loss)) {\n div.text(`Average Log Loss = ${d3.format(\"0.5f\")(total_log_loss)}`);\n }\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1548,"value":"brackets = make_brackets()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1551,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1595,"value":"md`This main \\`make_brackets\\` function creates a \\`div\\` element, adds an absolutely positioned \\`svg\\` element on which we draw the connectors, then adds 63 absolutely positioned \\`div\\` elements to display the games.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":926,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1598,"value":"md`### Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2353,"value":"format = d3.format('0.5f')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1592,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1345,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1608,"value":"md`### Repositioning\n\nA bit more complicated than I might have liked. \\`d3.tree\\` applied to a \\`d3.hiearchy\\` returns a lovely top-to-bottom layout. A standard trick to reorient that horizontally is to swap x and y. In the setup here, we've got to rearrange the four regions so that one half the bracket occupies the left half of the \\`div\\` while the other half occupies the right. In addition, we want the top two regions to feed into the top national semi-final and similarly for the bottom.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1197,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1615,"value":"md`### Contructing the tournament`","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1619,"value":"md`Here's where we actually construct the tournament based on the input data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$3a","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":1752,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"$3c","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":2024,"value":"function get_predicted_probability(id1, id2) {\n let i, j;\n if (id1 < id2) {\n i = id1;\n j = id2;\n } else {\n i = id2;\n j = id1;\n }\n let found = setup.results.filter(function(o) {\n let [ir, jr] = o.id\n .split('_')\n .slice(1)\n .map(x => parseInt(x));\n if (i == ir && j == jr) {\n return true;\n }\n });\n if (found.length > 0) {\n if (id1 < id2) {\n return parseFloat(found[0].pred);\n } else {\n return 1 - parseFloat(found[0].pred);\n }\n } else {\n return 'none';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2258,"value":"function log_loss(game) {\n let pred = get_predicted_probability(game.WTeamID, game.LTeamID);\n return -Math.log(cut(pred));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2450,"value":"function cut(x, eps = 1e-15) {\n let x2 = x;\n if (x < eps) {\n x2 = eps;\n } else if (x > 1 - eps) {\n x2 = 1 - eps;\n }\n return x2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2262,"value":"function set_setup(csv_file) {\n let p = csv_file.search('\\n');\n let header = csv_file.slice(0, p).toLowerCase();\n csv_file = header + csv_file.slice(p);\n let results = d3.csvParse(csv_file);\n let year = parseInt(results[0].id.slice(0, 4));\n let sex = results[0].id.slice(10, 11);\n if (sex == '1') {\n sex = 'Men';\n } else {\n sex = 'Women';\n }\n mutable setup = {\n men_or_women: sex,\n year: year,\n results: results,\n log_loss: 0\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2253,"value":"mutable setup = ({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2426,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1634,"value":"md`### Data\n\nThe data comes from Kaggle's March madness competitions for [men](https://www.kaggle.com/c/google-cloud-ncaa-march-madness-2020-division-1-mens-tournament) and [women](https://www.kaggle.com/c/google-cloud-ncaa-march-madness-2020-division-1-womens-tournament).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1640,"value":"md`#### Filtered for the selected tournament.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"this_years_results = {\n let results;\n if (setup.men_or_women == \"Men\") {\n results = mresults.filter((d) => d.Season == setup.year);\n } else {\n results = wresults.filter((d) => d.Season == setup.year);\n }\n results.map(function (o) {\n o.playin_flag = check_playin(o);\n });\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"this_years_seeds = {\n if (setup.men_or_women == \"Men\") {\n return mseeds.filter((d) => d.Season == setup.year);\n } else {\n return wseeds.filter((d) => d.Season == setup.year);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2342,"value":"function check_playin(result) {\n let wteam_id = result.WTeamID;\n if (this_years_seeds.filter((o) => o.TeamID == wteam_id).length == 0) {\n return false;\n }\n let wteam_seed = this_years_seeds.filter((o) => o.TeamID == wteam_id)[0].Seed;\n if (wteam_seed.length == 4) {\n let lteam_id = result.LTeamID;\n if (this_years_seeds.filter((o) => o.TeamID == lteam_id).length == 0) {\n return false;\n }\n let lteam_seed = this_years_seeds.filter((o) => o.TeamID == lteam_id)[0]\n .Seed;\n if (lteam_seed.length == 4) {\n return true;\n } else {\n return false;\n }\n } else {\n return false;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1643,"value":"md`#### All the raw data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"wseeds = d3.csvParse(await FileAttachment(\"WNCAATourneySeeds@2.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"wresults = d3.csvParse(\n await FileAttachment(\"WNCAATourneyCompactResults@30.csv\").text()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1646,"value":"md`#### Maps to easily access team name from team ID`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":706,"value":"team_map = {\n if (setup.men_or_women == \"Men\") {\n return mteam_map;\n } else {\n return wteam_map;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"wteam_map = {\n let wteams = d3.csvParse(await FileAttachment(\"WTeams.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"mteam_map = {\n let mteams = d3.csvParse(await FileAttachment(\"MTeams.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"mseeds = d3.csvParse(await FileAttachment(\"MNCAATourneySeeds.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"mresults = {\n if (radio_project == \"False\") {\n return d3.csvParse(\n await FileAttachment(\"MNCAATourneyCompactResults@70.csv\").text()\n );\n } else {\n return setup.results.map((o) => ({\n Season: setup.year,\n DayNum: \"150\",\n WTeamID: o.pred > 0.5 ? o.id.slice(5, 9) : o.id.slice(10, 14),\n LTeamID: o.pred > 0.5 ? o.id.slice(10, 14) : o.id.slice(5, 9),\n WScore: \"51\",\n LScore: \"49\",\n WLoc: \"?\",\n NumOT: \"?\"\n }));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1649,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"// d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2226,"value":"style = html``","pinned":true,"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 = window.innerHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1004,"value":"game_height = div_height / 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"div_width = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"team_width = div_width / 9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1652,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 31:"$30:body"