31:T5e2,slide11b = { let container = d3 .create("div") .style("position", "static") .style("width", "600px") .style("height", "150px") .style("position", "relative"); //.style('border', 'solid 1px black'); let svg = container.append("svg").attr("width", 600).attr("height", 150); let pts_to_path = d3 .line() .x((d) => d[0]) .y((d) => d[1]); svg .append("path") .attr( "d", pts_to_path([ [10, 31], [200, 31], [200, 60] ]) ) .attr("stroke", "black") .attr("fill", "none"); svg .append("path") .attr( "d", pts_to_path([ [10, 111], [200, 111], [200, 60] ]) ) .attr("stroke", "black") .attr("fill", "none"); svg .append("path") .attr( "d", pts_to_path([ [200, 71], [300, 71] ]) ) .attr("stroke", "black") .attr("fill", "none"); container.append(() => game_container(10, 10, 1, 4)); container.append(() => game_container(10, 90, 3, 2)); container.append(() => game_container(150, 50, "1 or 4", "2 or 3")); container .append("div") .style("position", "absolute") .style("width", "120px") .style("height", "36px") .style("top", `54px`) .style("left", `300px`) .style("border", "solid 1px black") .style("text-align", "center") .style("font-size", "20px") .style("background-color", "#ffd700") .text("Champion!"); return container.node(); }32:T87e,slide22b = { let container = d3 .create("div") .style("position", "static") .style("width", "600px") .style("height", "150px") .style("position", "relative"); //.style('border', 'solid 1px black'); // container // .append('div') // .style('position', 'absolute') // .style('width', '220px') // .style('height', '36px') // .style('top', `-14px`) // .style('left', `50px`) // .html( // () => html`

// ${tex`(P_{14} \times P_{23}) \times P_{12}`} //

` // ); // .html(() => html`${tex`(P_{14} \times P_{23}) \times P_{12}`}`); let svg = container.append("svg").attr("width", 600).attr("height", 150); let pts_to_path = d3 .line() .x((d) => d[0]) .y((d) => d[1]); svg .append("path") .attr( "d", pts_to_path([ [10, 31], [200, 31], [200, 60] ]) ) .attr("stroke", "black") .attr("fill", "none"); svg .append("path") .attr( "d", pts_to_path([ [10, 111], [200, 111], [200, 60] ]) ) .attr("stroke", "black") .attr("fill", "none"); svg .append("path") .attr( "d", pts_to_path([ [200, 71], [300, 71] ]) ) .attr("stroke", "black") .attr("fill", "none"); let game14 = container.append(() => game_container(10, 10, 1, 4)); tippy(game14.node(), { content: tex`P_{14} = 0.9` }); let game32 = container.append(() => game_container(10, 90, 3, 2)); tippy(game32.node(), { content: tex`P_{32} = 0.3` }); let game13 = container.append(() => game_container(150, 50, "1", "3")); game13.select("div:nth-child(2)").style("background", "#daa"); tippy(game13.node(), { content: tex`P_{13} = 0.8` }); container .append("div") .style("position", "absolute") .style("width", "120px") .style("height", "36px") .style("top", `54px`) .style("left", `300px`) .style("border", "solid 1px black") .style("text-align", "center") .style("font-size", "20px") .style("background-color", "#ffd700") .text("Team 1!"); container.selectAll("div").style("cursor", "default"); return container.node(); }34:T6ec,{ let container = d3 .create("div") .style("position", "static") .style("width", "600px") .style("height", "150px") .style("position", "relative"); let svg = container.append("svg").attr("width", 600).attr("height", 150); let pts_to_path = d3 .line() .x((d) => d[0]) .y((d) => d[1]); svg .append("path") .attr( "d", pts_to_path([ [10, 31], [200, 31], [200, 60] ]) ) .attr("stroke", "black") .attr("fill", "none"); svg .append("path") .attr( "d", pts_to_path([ [10, 111], [200, 111], [200, 60] ]) ) .attr("stroke", "black") .attr("fill", "none"); svg .append("path") .attr( "d", pts_to_path([ [200, 71], [300, 71] ]) ) .attr("stroke", "black") .attr("fill", "none"); let game14 = container.append(() => game_container(10, 10, 1, 4)); tippy(game14.node(), { content: tex`P_{14} = 0.9` }); let game32 = container.append(() => game_container(10, 90, 3, 2)); tippy(game32.node(), { content: tex`P_{32} = 0.3` }); let game13 = container.append(() => game_container(150, 50, "1", "3")); game13.select("div:nth-child(2)").style("background", "#daa"); tippy(game13.node(), { content: tex`P_{13} = 0.8` }); container .append("div") .style("position", "absolute") .style("width", "120px") .style("height", "36px") .style("top", `54px`) .style("left", `300px`) .style("border", "solid 1px black") .style("text-align", "center") .style("font-size", "20px") .style("background-color", "#ffd700") .text("Team 1!"); container.selectAll("div").style("cursor", "default"); return container.node(); }35:[{"id":"1c0208f356484f3c05b88f479fa45a869f8bb923eb39263220497019d6e6490af71fc3a80e194cb0c4dffbfcc8a3c1f6f31ea5582b6af98ec7918203e73a216f","href":"https://static.observableusercontent.com/files/1c0208f356484f3c05b88f479fa45a869f8bb923eb39263220497019d6e6490af71fc3a80e194cb0c4dffbfcc8a3c1f6f31ea5582b6af98ec7918203e73a216f","name":"mSubmitWX.csv","type":"text/csv","lastModified":1616556961650.84,"size":57924}] 2f:{"title":"Championship probabilties","cells":[{"id":466,"value":"slide0 = md`# Championship probabilties\n\n## In little and big brackets for intro stats\n\nIt's tournament time! That means that, a logical question is\n\n> What are the odds that my team wins?\n\nIn this presentation, we'll examine the role that simulation plays in this process.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"slide11a = md`## The basic question\n\nSuppose we've got a little tournament that looks something like so:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"slide11c = md`We'd like to assess the probability that a given team (say Team 1) wins the championship.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"slide12a = md`### Setup\n\nTo begin, we'll assume that we've already assessed the victory probabilities for each pair of teams. That might looks something like:\n\n * ${tex`P_{12} = 0.6`}\n * ${tex`P_{13} = 0.8`}\n * ${tex`P_{14} = 0.9`}\n * ${tex`P_{23} = 0.7`}\n * ${tex`P_{24} = 0.8`}\n * ${tex`P_{34} = 0.7`}\n\nwhere ${tex`P_{ij}`} denotes the probability that team ${tex`i`} defeates team ${tex`j`}. Once you know that of course, you also know that ${tex`P_{ji}`} = ${tex`1-P_{ij}`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"slide13a = md`### Setup (cont)\n\nContinuing with our example:\n\n * ${tex`P_{12} = 0.6`}\n * ${tex`P_{13} = 0.8`}\n * ${tex`P_{14} = 0.9`}\n * ${tex`P_{23} = 0.7`}\n * ${tex`P_{24} = 0.8`}\n * ${tex`P_{34} = 0.7,`}\n\nwe see that the probability that team 1 defeats team 2 is estimated to be ${tex`P_{12} = 0.6`}, which means that ${tex`P_{21} = 0.4`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"slide21a = md`## Computation\n\nOnce we've made the individual probability assessments, we can compute the probability that the tournament unfolds in any particular manner by multiplying the probabilities associated with each game. To determine the probability that any particular team wins the tournament, we can then add up over all the mutually exclusive ways that the tournament might unfold to produce that winner.\n\nNote that we are both\n\n * Multiplying probabilities of independent events and\n * Adding probabilties of mutally exclusive events.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"slide22a = md`### Example \n\nFor example, suppose we'd like to know how likely it is that the tournament unfolds like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"slide23a = md`### Example (cont)\n\nLooking back at our probability assessments, we see that\n\n * ${tex`P_{14} = 0.9`},\n * ${tex`P_{23} = 0.7`}, and\n * ${tex`P_{12} = 0.6`}.\n\nThus, the probability of getting that specific tournament, is\n${tex.block`P_{14} \\times P_{23} \\times P_{12}= 0.9 \\times 0.7 \\times 0.6 = 0.378.`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"slide24a = md`### Or...\n\nBut it's also possible for Team 1 to win if the tournament unfolds in a different manner:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"slide24c = html`

Note that this tournament is different since team 3 won in an upset in the first round.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"slide25a = md`### So now...\n\nLooking back again at our probability assessments, we see that\n\n * ${tex`P_{14} = 0.9`},\n * ${tex`P_{32} = 0.3`}, and\n * ${tex`P_{13} = 0.8`}.\n\nThus, the probability of getting that specific tournament, is\n${tex.block`P_{14} \\times P_{23} \\times P_{12}= 0.9 \\times 0.3 \\times 0.8 = 0.216.`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"slide26a = md`### Putting it all together\n\nTaking both those possible paths to victory into account, we see that the probability that team 1 wins the tournament is\n${tex.block`0.378 + 0.216 = 0.594.`}\nAgain, we're using the fact that the two paths two victory are mutually exclusive; we're also using the fact that they are exhaustive - i.e. those are *all* the ways that Team 1 can win.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"slide31a = md`## A bigger bracket\n\nBut, what if you have a bigger bracket - maybe even a *much* bigger bracket with 64 or more teams?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"slide32a = md`### The challenge\n\nWell, if you want to compute the probability that, say, Gonzaga wins a 64 team tournament, it's much more complicated. \n\nAssuming a winner will determine 6 games; but there's still ${tex`63-6=57`} games left that could go either way. That yields ${tex.block`2^{57} = 144115188075855870`} terms in the sum!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"slide33a = md`### Accept the challenge??\n\nHow long do you think it might take to add ${tex`2^{57}`} numbers? To estimate, we could start by adding just ${tex`2^{20}`} numbers and seeing how long that takes. We could then multiply that number by ${tex`2^{37}`}, since\n${tex.block`2^{57} = 2^{37} \\times 2^{20}.`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"// Sage cell rendered in embedded notebook\nslide34a = html`\n

Timing the computation

\n Here's a bit of Python code that implements the strategy to estimate the time required to compute the sum of 2^57 numbers.\n

\n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"slide41a = md`## Simulation\n\nThe idea behind simulation is simple. We write a computer program that simulates one run of our experiment assuming our probability estimates are correct. We then run the program a bunch of times and count how many times a particular event occurs. The probability of that event is then the proportion of times that it did, in fact, occur.\n\nWe've actually discussed this before in the context of flipping a coin.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"// slide42a = md`### Simulating coin flips`","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"slide43a = html`

Simulating a tournament

\nFor our little tournament, it's a bit harder; we should probably do it with computer code. We'll begin by writing a function that runs one simulation\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"// Sage Cell rendered on page embed.\nslide44a = html`

Simulating a lot of tournaments

\n\n

We can then simulate a lot of tournaments and tabulate the results:

\n \n

Recall that we expect the first team to win with probability 0.594.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"function simple_simulation() {\n let p12 = 0.6;\n let p13 = 0.8;\n let p14 = 0.9;\n let p23 = 0.7;\n let p24 = 0.8;\n let p34 = 0.7;\n\n let champion;\n let game14_winner = d3.randomUniform()() < p14 ? 1 : 4;\n let game23_winner = d3.randomUniform()() < p23 ? 2 : 3;\n\n if (game14_winner == 1 && game23_winner == 2) {\n champion = d3.randomUniform()() < p12 ? 1 : 2;\n } else if (game14_winner == 1 && game23_winner == 3) {\n champion = d3.randomUniform()() < p13 ? 1 : 3;\n } else if (game14_winner == 4 && game23_winner == 2) {\n champion = d3.randomUniform()() < p24 ? 2 : 4;\n } else if (game14_winner == 4 && game23_winner == 3) {\n champion = d3.randomUniform()() < p34 ? 3 : 4;\n }\n return champion;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"md`And here are the results of a bunch of simulations:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"{\n let n = 10000;\n let grouped = d3.group(d3.range(n).map(simple_simulation), (i) => i);\n let array = [];\n for (let k of grouped.keys()) {\n array[k - 1] = grouped.get(k);\n console.log([k, grouped.get(k).length]);\n }\n return array.map((a) => a.length / n);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"md`Remember that the first team should win with probabilty ${tex`0.594`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"md`## Some randomly generated probabilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"// viewof name = text({\n// title: \"Enter your username\",\n// submit: \"Get game probabilities\"\n// })\n\nviewof name = Inputs.select([\n \"\",\n \"Amelia\",\n \"Ashley\",\n \"Audrey\",\n \"Daysha\",\n \"Edward\",\n \"Elizabeth\",\n \"Emilyn\",\n \"Hunter\",\n \"Jackson\",\n \"Jaylin\",\n \"Jessie\",\n \"Joe\",\n \"Kasey\",\n \"Madelyn\",\n \"Madisyn\",\n \"Samuel\",\n \"Sydni\",\n \"Thomas\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"game_probabilities = {\n if (name == \"\") {\n return md``;\n } else {\n let v = d3.sum(d3.range(name.length).map((c, i) => name.charCodeAt(i)));\n let seed = v / (10 ** Math.ceil(Math.log10(v)) + 2);\n let source = d3.randomLcg(seed);\n\n let p12 = d3.randomUniform.source(source)(0.52, 0.68)();\n let p13 = d3.randomUniform.source(source)(0.7, 0.8)();\n let p14 = d3.randomUniform.source(source)(0.85, 1)();\n let p23 = d3.randomUniform.source(source)(0.6, p13)();\n let p24 = d3.randomUniform.source(source)(p23, p14)();\n let p34 = d3.randomUniform.source(source)(0.5, p24)();\n\n return md`\n * ${tex`P_{12} = ${format(p12)}`}\n * ${tex`P_{13} = ${format(p13)}`}\n * ${tex`P_{14} = ${format(p14)}`}\n * ${tex`P_{23} = ${format(p23)}`}\n * ${tex`P_{24} = ${format(p24)}`}\n * ${tex`P_{34} = ${format(p34)}`}\n`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"format = d3.format('0.2f')","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"set_setup(await FileAttachment(\"mSubmitWX.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"nothing = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"make_pic(flips.n, flips.p)","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"function game_container(x, y, m, n) {\n let div = d3\n .create(\"div\")\n .attr(\"class\", \"game-container\")\n .style(\"position\", \"absolute\")\n .style(\"width\", \"100px\")\n .style(\"height\", \"42px\")\n .style(\"top\", `${y}px`)\n .style(\"left\", `${x}px`)\n .style(\"border\", \"solid 1px black\");\n\n let m_text = m ? `Team ${m}` : \"\";\n div\n .append(\"div\")\n .attr(\"class\", \"team-container\")\n .style(\"width\", \"100px\")\n .style(\"height\", \"20px\")\n .style(\"background\", \"#fff\")\n .style(\"text-align\", \"center\")\n .text(m_text);\n let n_text = n ? `Team ${n}` : \"\";\n div\n .append(\"div\")\n .attr(\"class\", \"team-container\")\n .style(\"width\", \"100px\")\n .style(\"height\", \"20px\")\n .style(\"background\", \"#eee\")\n .style(\"text-align\", \"center\")\n .text(n_text);\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"import {\n sliders,\n flip_pic,\n flips,\n make_pic\n} from '@mcmcclur/law-of-large-numbers'","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"import { brackets, set_setup, styles } with {\n nothing as this_years_results\n} from '@mcmcclur/visualize-your-kaggle-brackets-for-march-madness'","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"style = styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"import { text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"// d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}