-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstochastic_appx.html
132 lines (116 loc) · 5.63 KB
/
stochastic_appx.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="./assets/favicon.ico">
<title>Max Kaplan</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="stylesheet.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96544641-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<nav class="navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html">Max Kaplan</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container marketing">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="col-md-10">
<h2 class="featurette-heading">Stochastic Approximation</h2>
<p class="justify">
This tool allows you to experiment with Monte Carlo integration.
You can graph a function, and then estimate the definite integral
from 0 to 10 using as many points as you'd like (more
than 5k is pretty slow though, depending on your hardware).
To get started, try graphing `x^2` and then add 100 points at
a time. What does the integral converge to?
</p>
</div>
</div>
<div class="col-md-5" style="padding-top: 25px">
<div style="border: 2px solid grey; padding: 10px">
<h3 class="center" style="margin-top: 0px">Settings</h3>
<h4 class="aa-input-label">Set Function</h4>
<input type="text" placeholder="x^3" value="x^3" id="strFormula"/>
<button id="graph">Graph new function</button>
<h4 class="aa-input-label">Number of points</h4>
<input type="text" placeholder="1000" value=100 id="numPoints"/>
<button id="simulate">Add points to simulation</button>
<button id="clear">Clear points</button>
<div class="row">
<h4 class="col-md-6">Total Points: </h4>
<h4 class="col-md-6" id="totalPoints">0</h4>
</div>
<div class="row">
<h4 class="col-md-6">Calculated Integral: </h4>
<h4 class="col-md-6" id="calculatedIntegral">0</h4>
</div>
<h4>
<a id="wolframLink" href="https://www.wolframalpha.com/input/?i=integral+of+x%5E3+from+0+to+10" target="_blank">Check answer on Wolfram Alpha</a>
</h4>
</div>
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<canvas id="myChart" style="padding-top: 20px;"></canvas>
</div>
</div>
<br></br>
<br></br>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.2.5/math.min.js"></script>
<script src="scripts/stochastic_appx.js"></script>
</body>
</html>