Skip to content

Commit 61fd24f

Browse files
author
Max Kaplan
committed
Add dividends and style
1 parent ea81079 commit 61fd24f

File tree

2 files changed

+114
-24
lines changed

2 files changed

+114
-24
lines changed

‎asset_allocation.html

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -68,37 +68,55 @@
6868
<!-- Wrap the rest of the page in another container to center all the content. -->
6969

7070
<div class="container marketing">
71-
<canvas id="myChart"></canvas>
72-
73-
<h4>Add New Line (enter percent stocks)</h4>
74-
<input type="text" id="percentStocks"/>
75-
<button id="addLine">Add Line</button>
76-
<button id="clear">Clear All Data</button>
77-
78-
<h4>Set starting amount</h4>
79-
<input type="text" id="startingAmount"/>
80-
<button id="startingAmountButton">Set Starting Amount</button>
71+
<div class="center">
72+
<h2 class="featurette-heading">Asset Allocation Simulation</h2>
73+
<div class="col-md-6 col-md-offset-3">
74+
<p class="justify">
75+
This tool allows you to compare how different asset allocations
76+
would have done over time. For now, the options of the tool are
77+
stocks, represented by the S&P 500 on January 1st, and bonds,
78+
represented by the average yield on 10-Year Treasuries for a
79+
given year.
80+
</p>
81+
</div>
8182

82-
<h4>Set amount to add each year</h4>
83-
<input type="text" id="addAmount"/>
84-
<button id="addAmountButton">Set Add Amount</button>
83+
<div class="col-md-10 col-md-offset-1">
84+
<h4>Add New Line (enter percent stocks)</h4>
85+
<input type="text" placeholder="70" id="percentStocks"/>
86+
<button id="addLine">Add Line</button>
87+
<button id="clear">Clear All Data</button>
8588

86-
<h4>Set date range (enter years from 1963 to 2018)</h4>
87-
<input type="text" id="startDate"/>
88-
<input type="text" id="endDate"/>
89-
<button id="dateButton">Set Dates</button>
89+
<div>
90+
<input type="checkbox" id="withDividends">
91+
<label for="withDividends">Include Dividends</label>
92+
</div>
9093

91-
<br></br>
94+
<h4>Set starting amount ($)</h4>
95+
<input type="text" placeholder="1000" id="startingAmount"/>
96+
<button id="startingAmountButton">Set Starting Amount</button>
9297

98+
<h4>Set amount to add each year ($)</h4>
99+
<input type="text" placeholder="100" id="addAmount"/>
100+
<button id="addAmountButton">Set Add Amount</button>
93101

102+
<h4>Set date range (enter years from 1963 to 2018)</h4>
103+
<input type="text" placeholder="1974" id="startDate"/>
104+
<input type="text" placeholder="1987" id="endDate"/>
105+
<button id="dateButton">Set Dates</button>
106+
</div>
94107

95-
<br></br>
108+
<canvas id="myChart" style="padding-top: 50px;"></canvas>
96109

97-
<!-- FOOTER -->
98-
<footer>
99-
<p class="right">&copy; 2018 Max Kaplan</p>
100-
</footer>
110+
</div>
101111
</div>
112+
<br></br>
113+
<br></br>
114+
<!-- FOOTER -->
115+
<div class="col-md-10 col-md-offset-1">
116+
<footer>
117+
<p class="right">&copy; 2018 Max Kaplan</p>
118+
</footer>
119+
</div>
102120

103121

104122
<!-- Bootstrap core JavaScript

‎scripts/asset_allocation.js

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,66 @@ var sAndP = [
176176
["Spacer", "Spacer"]
177177
]
178178

179+
var dividends = [
180+
["1963", 2.14],
181+
["1964", 2.3],
182+
["1965", 2.52],
183+
["1966", 2.74],
184+
["1967", 2.88],
185+
["1968", 2.93],
186+
["1969", 3.08],
187+
["1970", 3.16],
188+
["1971", 3.13],
189+
["1972", 3.07],
190+
["1973", 3.16],
191+
["1974", 3.4],
192+
["1975", 3.62],
193+
["1976", 3.68],
194+
["1977", 4.1],
195+
["1978", 4.71],
196+
["1979", 5.11],
197+
["1980", 5.7],
198+
["1981", 6.2],
199+
["1982", 6.66],
200+
["1983", 6.88],
201+
["1984", 7.12],
202+
["1985", 7.57],
203+
["1986", 7.94],
204+
["1987", 8.3],
205+
["1988", 8.86],
206+
["1989", 9.81],
207+
["1990", 11.14],
208+
["1991", 12.11],
209+
["1992", 12.24],
210+
["1993", 12.41],
211+
["1994", 12.62],
212+
["1995", 13.18],
213+
["1996", 13.89],
214+
["1997", 14.95],
215+
["1998", 15.55],
216+
["1999", 16.28],
217+
["2000", 16.71],
218+
["2001", 16.17],
219+
["2002", 15.74],
220+
["2003", 16.12],
221+
["2004", 17.6],
222+
["2005", 19.7],
223+
["2006", 22.41],
224+
["2007", 25.08],
225+
["2008", 27.92],
226+
["2009", 28.01],
227+
["2010", 22.24],
228+
["2011", 22.96],
229+
["2012", 26.74],
230+
["2013", 31.54],
231+
["2014", 35.4],
232+
["2015", 39.9],
233+
["2016", 43.55],
234+
["2017", 45.93],
235+
["2018", 49.29],
236+
["Spacer", "Spacer"]
237+
]
238+
179239
var bonds = [
180240
["1963", 4.00],
181241
["1964", 4.19],
@@ -239,11 +299,13 @@ var bonds = [
239299
var dates = sAndP.map(x => x[0]);
240300
var sAndPPrices = sAndP.map(x => x[1]);
241301
var bondYields = bonds.map(x => x[1]);
302+
var dividendTotals = dividends.map(x => x[1]);
242303
var startIndex = 0
243304
var endIndex = -1
244305
var startingAmount = 100
245306
var addAmount = 0
246307
var percentStocks = 100
308+
var withDividends = false
247309

248310
var config = {
249311
// The type of chart we want to create
@@ -285,6 +347,14 @@ document.getElementById('startingAmountButton').addEventListener('click', functi
285347
chart.update()
286348
});
287349

350+
document.getElementById('withDividends').addEventListener('click', function() {
351+
withDividends = document.getElementById('withDividends').checked
352+
config.data.datasets.forEach(function(dataset) {
353+
dataset.data = getNewLine(dataset.percentStocks, startIndex, endIndex)
354+
});
355+
chart.update()
356+
});
357+
288358
document.getElementById('addAmountButton').addEventListener('click', function() {
289359
addAmount = parseFloat(document.getElementById('addAmount').value)
290360
config.data.datasets.forEach(function(dataset) {
@@ -354,6 +424,7 @@ function getNewLine(percentStocks, startIndex, endIndex) {
354424
var decimalBonds = 1 - decimalStocks
355425
var stockReference = sAndPPrices.slice(startIndex, endIndex)
356426
var bondReference = bondYields.slice(startIndex, endIndex)
427+
var dividendReference = dividendTotals.slice(startIndex, endIndex)
357428
var stockValue
358429
var bondValue
359430
var total = startingAmount
@@ -371,8 +442,9 @@ function getNewLine(percentStocks, startIndex, endIndex) {
371442

372443
var stockPerformance = stockReference[iter + 1] / stockReference[iter]
373444
var bondPerformance = 1 + bondReference[iter] / 100
445+
var dividendPerformance = dividendReference[iter + 1] / stockReference[iter + 1]
374446

375-
var endStock = stockValue * stockPerformance
447+
var endStock = stockValue * (stockPerformance + (dividendPerformance * withDividends))
376448
var endBond = bondValue * bondPerformance
377449

378450
total = endStock + endBond

0 commit comments

Comments
 (0)