Championship probabilties / Mark McClure

I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization. I'm happy to be part of the first Observable Ambassador's cohort.

Workspace

Public

Edited

Mar 18, 2024

1 star

// Sage cell rendered in embedded notebook

slide34a = html`

<h3>Timing the computation</h3>

<p>

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

</p>

from time import time

t = time()

S = 0

for i in range(2**20):

S = S+i

t = time()-t # Seconds

T = t/(60*60*24*365) # Years

print('It will take ' + str(2**37 * T) + ' years to add 2^57 numbers!')

</script>

</div>

// slide42a = md`### Simulating coin flips`

function simple_simulation() {

let p12 = 0.6;

let p13 = 0.8;

let p14 = 0.9;

let p23 = 0.7;

let p24 = 0.8;

let p34 = 0.7;

let champion;

let game14_winner = d3.randomUniform()() < p14 ? 1 : 4;

let game23_winner = d3.randomUniform()() < p23 ? 2 : 3;

if (game14_winner == 1 && game23_winner == 2) {

champion = d3.randomUniform()() < p12 ? 1 : 2;

} else if (game14_winner == 1 && game23_winner == 3) {

champion = d3.randomUniform()() < p13 ? 1 : 3;

} else if (game14_winner == 4 && game23_winner == 2) {

champion = d3.randomUniform()() < p24 ? 2 : 4;

} else if (game14_winner == 4 && game23_winner == 3) {

champion = d3.randomUniform()() < p34 ? 3 : 4;

}

return champion;

}

{

let n = 10000;

let grouped = d3.group(d3.range(n).map(simple_simulation), (i) => i);

let array = [];

for (let k of grouped.keys()) {

array[k - 1] = grouped.get(k);

console.log([k, grouped.get(k).length]);

}

return array.map((a) => a.length / n);

}

game_probabilities = {

if (name == "") {

return md``;

} else {

let v = d3.sum(d3.range(name.length).map((c, i) => name.charCodeAt(i)));

let seed = v / (10 ** Math.ceil(Math.log10(v)) + 2);

let source = d3.randomLcg(seed);

let p12 = d3.randomUniform.source(source)(0.52, 0.68)();

let p13 = d3.randomUniform.source(source)(0.7, 0.8)();

let p14 = d3.randomUniform.source(source)(0.85, 1)();

let p23 = d3.randomUniform.source(source)(0.6, p13)();

let p24 = d3.randomUniform.source(source)(p23, p14)();

let p34 = d3.randomUniform.source(source)(0.5, p24)();

return md`

* ${tex`P_{12} = ${format(p12)}`}

* ${tex`P_{13} = ${format(p13)}`}

* ${tex`P_{14} = ${format(p14)}`}

* ${tex`P_{23} = ${format(p23)}`}

* ${tex`P_{24} = ${format(p24)}`}

* ${tex`P_{34} = ${format(p34)}`}

}

format = d3.format('0.2f')

set_setup(await FileAttachment("mSubmitWX.csv").text())

nothing = []

make_pic(flips.n, flips.p)

function game_container(x, y, m, n) {

let div = d3

.create("div")

.attr("class", "game-container")

.style("position", "absolute")

.style("width", "100px")

.style("height", "42px")

.style("top", `${y}px`)

.style("left", `${x}px`)

.style("border", "solid 1px black");

let m_text = m ? `Team ${m}` : "";

div

.append("div")

.attr("class", "team-container")

.style("width", "100px")

.style("height", "20px")

.style("background", "#fff")

.style("text-align", "center")

.text(m_text);

let n_text = n ? `Team ${n}` : "";

div

.append("div")

.attr("class", "team-container")

.style("width", "100px")

.style("height", "20px")

.style("background", "#eee")

.style("text-align", "center")

.text(n_text);

return div.node();

}

import {

sliders,

flip_pic,

flips,

make_pic

} from '@mcmcclur/law-of-large-numbers'

import { brackets, set_setup, styles } with {

nothing as this_years_results

} from '@mcmcclur/visualize-your-kaggle-brackets-for-march-madness'

style = styles

import { text } from "@jashkenas/inputs"

// d3 = require('d3@6')

tippy = require("tippy.js@6")

{

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();

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more