-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
238 lines (224 loc) · 11.8 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html>
<head>
<title>Central Limit Theorem</title>
<link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/reveal.css" />
<link rel="stylesheet" href="css/default.css" id="theme">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/d3.v3.min.js"></script>
<script type="text/javascript" src="js/rickshaw.min.js"></script>
<script type="text/javascript" src="js/modernizr.min.js"></script>
<script type="text/javascript" src="js/Rickshaw.Graph.HoverDetail.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<div class="page color4">
<h2>Central Limit Theorem</h2>
<p class="small-text">Learn about the central limit theorem and it's implications in this interactive tutorial.</p>
<hr/>
<div class="inset color6">
<p class="definition-text">
In this 10-15 minute tutorial we'll go over the the Central Limit Theorem.
The first few slides are some foundational knowledge you need to know,
followed by interactive demos of the major conclusions of the central limit theorem.
<br/>
<br/>
You can also use the arrow keys to move forward or backwards.
It's highly recommended you do not skip slides.
</p>
</div>
<br />
<input value="Let's Begin" type="button" id="intro-btn" class="simple-btn color5" />
</div>
</section>
<section>
<div class="reset page color2">
<h2>FOUNDATIONAL KNOWLEDGE</h2>
<img class="small-img" alt="img" src="img/normaldist.gif" />
<p class="small-text">
This is the graph of a normal distribution (<i>sometimes called a bell curve</i>).
The Central Limit Theorem (CLT) tells us that with large enough samples <i>(n > 30)</i>,
the distribution of the <i>mean</i> (referred to as mu) will conform to this distribution.
<br/><br/>
Let's say you took a sample of a population. The mean of the sample <i>(referred to as Xbar)</i> would fall somewhere
in the graph above. Notice however, the further you get from the center of the graph (<i>the population mean</i>) the less frequent it is.
</p>
<br/>
<input value="Next" type="button" class="simple-btn next-btn color7" />
</section>
<section>
<div class="reset page color2">
<h2>FOUNDATIONAL KNOWLEDGE</h2>
<img class="small-img" alt="img" src="img/formulas.jpg" />
<p class="small-text">
The <i>mean</i> (top formula - referred to as <i>Xbar</i>) of any sample is the sum of the data points, divided by the number of points.
<br/>
The <i>variance</i> (bottom formula - referred to as <i>S2</i>) is the average number of squared differences from the mean.
<br/>
Enter numbers below, separated by spaces, to have these statistics generated.
</p>
<input id="formula-box" class="small-box" type="text" placeholder="1 2 3 ..."/>
<br/>
<span id="formula-box-result">Mean: 0 | Variance: 0</span>
<input value="Next" type="button" class="simple-btn color7 small next-btn" />
</div>
</section>
<section>
<div class="reset page color2">
<h2>FOUNDATIONAL KNOWLEDGE</h2>
<canvas id="dice-canvas" class="small-img canvas-container" width="274" height="197" ></canvas>
<p class="small-text">
Consider a dice roll of a six-sided die. Roll the dice a couple times to create a <i>sample</i>.
<br/>
<a style="color: #798EC0; border-bottom: 1px solid #798EC0;" id="roll-dice" href="javascript:void(0)">Click here to roll the die.</a>
<br/>
<br/>
<span id="dice-stat"><i>Roll the dice to get a sample mean.</i></span>
<br/>
<br/>
The sample mean is YOUR specific result. If you had 100 of your friends do the same thing, their sample means will be different.
If you graphed the sample means of all the results, the distribution would appear normal, as the bell-shaped graph we saw earlier.
</p>
<br/>
<input value="Next" type="button" class="simple-btn color7 next-btn" />
</div>
</section>
<section>
<div class="reset page color4">
<h2>Taking Samples</h2>
<div class="two-panel">
<div class="panel-one">
Before getting into further details, lets collect some data (a <i>sample</i>) that we'll use for the basis of this tutorial.
<br/>
<br/>
In this sample, you will be guessing the number of months it takes for a cat to get adopted from a shelter, based on the appearance of the cat.
<br/>
<br/>
<input id="play-game" class="simple-btn color5" value="Play Game" type="button" />
</div>
<div class="panel-two">
<div class="cat-image-container">
<img alt="there should be a cat here" src="./cats/cat1.jpg"/>
</div>
<p class="smaller-text">How many months before this cat was adopted?</p>
<div class="cat-raters">
<input id="rate-one" class="rate-button color5" type="button" value="1" />
<input id="rate-two" class="rate-button color5" type="button" value="2" />
<input id="rate-three" class="rate-button color5" type="button" value="3" />
<input id="rate-four" class="rate-button color5" type="button" value="4" />
<input id="rate-five" class="rate-button color5" type="button" value="5" />
</div>
</div>
</div>
</div>
</section>
<section>
<div class="page color2">
<h5>Sample Results</h5>
<div class="graph-wrapper">
<div id="cat-plot-y">Adoption Time</div>
<div id="user-ratings-graph"></div>
<div class="graph-pictures-xaxis">
<div>
<img id="cat1-thumbnail" src="./cats/cat1.jpg" />
</div><div>
<img id="cat1-thumbnail" src="./cats/cat2.jpg" />
</div><div>
<img id="cat1-thumbnail" src="./cats/cat3.jpg" />
</div><div>
<img id="cat1-thumbnail" src="./cats/cat4.jpg" />
</div><div>
<img id="cat1-thumbnail" src="./cats/cat5.jpg" />
</div>
</div>
</div>
<br>
<div class="thumb scroll">
<div class="thumb-wrapper">
<div class="thumb-front">
<p class='small-text dark'>
Notice your guesses don't seem to follow any pattern (it doesn't follow a particular <i>distribution</i>).
If several other people did the same experiment, their guesses would vary from yours, but would likely
still not follow a particular distribution.
</p>
</div>
<div class="thumb-detail color6">
<p class='small-text dark'>
Above is the graph of your adoption time guesses for each cat.
Notice how this graph doesn't seem to follow any kind of distribution? The results look completely random!
<br/>
Imagine you just played the game but rated 50 cats instead of just 5. If more cats were rated, the graph would look just as, if not more, random.
We'll see this in the next slide.
</p>
</div>
</div>
</div>
<br>
<input value="So What?" type="button" id="user-graph-next-btn" class="simple-btn color4" />
</div>
</section>
<section>
<div class="page color4">
<div>
<div id="generated-graph-large-yaxis"></div>
<div id="generated-graph-large"></div>
<p class="small-text">
These are the estimated adoption times for 50 different cats. We treat the graph above as one <i>sample</i>.
Notice, there still doesn't seem to be a particular probability distribution. The way the cats are rated is essentially <i>random</i>.
Most experiments will use multiple samples to improve accuracy. Now let's see...
</p>
</div>
<div id="middle-bar"><span id='middle-bar-text'>What happens </span><input value="if we take 5 samples?" type="button" id="what-happens-btn" class="simple-btn color5" /> </div>
<div id = "bottom-graphs-wrapper">
<div class="generated-graph" id="generated-graph-1">?</div>
<div class="generated-graph" id="generated-graph-2">?</div>
<div class="generated-graph" id="generated-graph-3">?</div>
<div class="generated-graph" id="generated-graph-4">?</div>
<div>
</div>
</section>
<section>
<div class="page color2">
<p class="small-text">Below is graph of the means of very large samples. Notice as you increase the size of the sample, the means of the experiments conform to a normal distribution.</p>
<div id="final-graph-header">
Showing plots of the average adoption time for
<div id="people-select-wrapper">
<select id="number-of-people">
<option value="100">100</option>
<option value="1000">1000</option>
<option value="10000" selected="selected">10 000</option>
<option value="100000">100 000</option>
</select>
</div>
samples.
</div>
<div id="value-plot-y">Number of Times An Average Occurs</div>
<div id="value-plot"></div>
<div id="value-plot-x"><span class='left'>0</span>Average Time Until Adoption (months)<span class='right'>5</span></div>
<input type="button" value="Next" class="next-btn simple-btn color4 small" />
<br />
</div>
</section>
<section>
<div class="page color4">
<h3>Thank You</h3>
<p class="small-text">Thanks for going through this interactive tutorial. If you still need understanding, check out some of the external links below. This tutorial was created by <a href="http://www.amirsharif.com">Amir</a> and <a href="http://www.nick.mostowich.com">Nick</a>. </p>
<br/>
<h4>Want to learn more?</h4>
<a href="http://www.mathsisfun.com/data/standard-normal-distribution.html" target="_blank">Normal Distribution - MathIsFun</a>
<br/>
<a href="https://www.khanacademy.org/math/probability/statistics-inferential/normal_distribution/v/introduction-to-the-normal-distribution" target="_blank">Normal Distribution - Khan Academy</a>
<br/>
<a href="http://www.youtube.com/watch?v=xgQhefFOXrM" target="_blank">Explained Simply - YouTube</a>
</div>
</section>
</div>
</div>
<script type="text/javascript" src="js/reveal.js"></script>
</body>
</html>