-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (92 loc) · 5.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bertrand's paradox</title>
<meta name="description" content="Visualize Bertrand's paradox, highlighting three different ways to randomly sample chords on a circle.">
<meta name="keywords" content="Bertrand, Paradox, Probability, Mathematics, Visualization">
<meta name="author" content="Thomas R. Bromley">
<meta name="viewport" content="initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="icon.png">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="index_min.js"></script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div class="container">
<h1 class="my-3">Bertrand's paradox</h1>
<div class="mb-3">
<h3>Problem</h3>
<p>
Randomly generate chords within a unit circle. What is the probability that such a randomly-generated chord has a length larger than \(\sqrt{3}\)?
</p>
<h3>Solution</h3>
<p>It depends! How will you randomly generate the chords? Three methods to randomly generate chords are shown in the animation below:</p>
<p>
<dl>
<dt style="color:#00441b">Random endpoints</dt>
<dd>
Randomly pick two points on the circumference of the circle. Create a chord by connecting them. The probability that this chord has a
length exceeding \(\sqrt{3}\) is \(\frac{1}{3}\).
</dd>
<dt style="color:#3f007d">Random radial point</dt>
<dd>
Create a temporary line that connects the origin to a random point on the circumference of the circle. Then, pick a random point along
that line. Create a chord that passes through this point and is perpendicular to the temporary line. The probability that this chord
has a length exceeding \(\sqrt{3}\) is \(\frac{1}{2}\).
</dd>
<dt style="color:#67000d">Random midpoint</dt>
<dd>
Randomly choose any point within the circle and use is as the midpoint of a chord. The probability that this chord has a
length exceeding \(\sqrt{3}\) is \(\frac{1}{4}\).
</dd>
</dl>
</p>
<p>
</p>
</div>
</div>
<div class="d-flex justify-content-center">
<div id="visualization">
<div class="panel">
<div class="container py-3 px-4" id="play">
<div class="fw-bold pb-2">Select play speed:</div>
<div class="d-grid gap-2 pb-3">
<input type="radio" class="btn-check" name="play-speed" id="pause" autocomplete="off">
<label class="btn btn-light" for="pause">Pause</label>
<input type="radio" class="btn-check" name="play-speed" id="slow" autocomplete="off">
<label class="btn btn-light" for="slow">Slow</label>
<input type="radio" class="btn-check" name="play-speed" id="medium" autocomplete="off" checked>
<label class="btn btn-light" for="medium">Medium</label>
<input type="radio" class="btn-check" name="play-speed" id="fast" autocomplete="off">
<label class="btn btn-light" for="fast">Fast</label>
<input type="radio" class="btn-check" name="play-speed" id="fastest" autocomplete="off">
<label class="btn btn-light" for="fastest">Fastest</label>
</div>
<div class="d-grid mt-4">
<button class="btn btn-danger" type="button" id="reset">Reset</button>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-3">
You can learn more about Bertrand's paradox by reading the <a href="https://en.wikipedia.org/wiki/Bertrand_paradox_(probability)">Wikipedia page</a>
or by watching the video <a href="https://youtu.be/mZBwsm6B280">Bertrand's Paradox (with 3blue1brown) - Numberphile</a>, which served as the
inspiration for making this page.
</div>
<div class="container mt-4 text-light bg-secondary py-2">
<div class="row">
<div class="col" style="color: #fafbfc;">
Created by <a href="https://trbromley.github.io/" style="color: white;">Thomas R. Bromley</a>
</div>
<div class="col text-end" style="color: white;">
Check out the source code <a href="https://github.com/trbromley/bertrand-paradox-animation" style="color: white;">here</a>!
</div>
</div>
</div>
</body>
</html>