-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (68 loc) · 4.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Osano cookie consent -->
<script src="https://cmp.osano.com/16BWNkU1MfIeFKXBu/7dae1bfe-d3c9-4c49-b7ee-000a14dbe956/osano.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V596K22BS0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-V596K22BS0', { 'anonymize_ip': true });
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compound Growth Simulator</title>
<link rel="stylesheet" href="/cagr-montecarlo-webpage/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!-- Google Fonts link -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<h1>Simulate Compound Growth With Volatility</h1>
<p>Interested in how your investment could grow? Worried about how risky it can be to invest? This simulation tool uses Monte Carlo simulations to estimate the evolution of an investment. It takes into account the compound annual growth rate (CAGR) and the yearly volatility, and runs thousands of cases to show you the range of outcomes you might expect.</p>
<p>Monte Carlo simulations are a way to predict the outcome of a scenario that has a significant degree of uncertainty. By running thousands of simulations, each with random variations based on your inputted volatility, the tool can model a vast range of possible investment paths. However, to keep the graph clear and easy to interpret, only ten representative trajectories are displayed—each one corresponding to a different percentile of the final investment distribution. This approach gives you a snapshot of potential outcomes, from the lower end (what you might end up with in less favorable conditions) to the higher end (the outcome if things go exceptionally well).</p>
<div class="input-wrapper">
<label for="investmentType">Investment Type:</label>
<select name="investmentType" id="investmentType" onchange="toggleMonthlyInput()">
<option value="one-time">One-time investment</option>
<option value="monthly">Monthly investments</option>
</select>
</div>
<div class="input-wrapper">
<label for="amountInvested">Initial amount invested:</label>
<input type="number" id="amountInvested" name="amountInvested" value="1000" step="100">
</div>
<div class="input-wrapper hidden" id="monthlyInvestmentInput"> <!-- initially hidden -->
<label for="monthlyInvestment">Monthly investment:</label>
<input type="number" id="monthlyInvestment" name="monthlyInvestment" value="100" step="10">
</div>
<div class="input-wrapper">
<label for="cagr">CAGR (%): <span id="cagrValue">9</span>%</label>
<input type="range" id="cagr" name="cagr" min="0" max="30" value="9" step="1" oninput="updateSliderValue('cagr', 'cagrValue')">
</div>
<div class="input-wrapper">
<label for="volatility">Annualized volatility (%): <span id="volatilityValue">14</span>%</label>
<input type="range" id="volatility" name="volatility" min="0" max="50" value="14" step="1" oninput="updateSliderValue('volatility', 'volatilityValue')">
</div>
<div class="input-wrapper">
<label for="timeHorizon">Time horizon (years): <span id="timeHorizonValue">10</span></label>
<input type="range" id="timeHorizon" name="timeHorizon" min="1" max="40" value="10" step="1" oninput="updateSliderValue('timeHorizon', 'timeHorizonValue')">
</div>
<div class="input-wrapper">
<label for="monteCarloSimulations">Number of Monte Carlo simulations: </label>
<input type="number" id="monteCarloSimulations" name="monteCarloSimulations" value="7000" min="1000" step="1000">
</div>
<div class="input-wrapper">
<button id="runSimulations" onclick="runSimulations()">Run simulations</button>
</div>
</div>
<div id="simulationResult">
<!-- The 2D figure is displayed here -->
</div>
</div>
<script src="/cagr-montecarlo-webpage/script.js"></script>
</body>
</html>