Skip to content

Commit ea81079

Browse files
mkaplan9mkaplan9
authored
Merge pull request #27 from mkaplan9/mk_starting_amount
Add start amount and add amount support
2 parents ea2e3c0 + caa5d8d commit ea81079

File tree

3 files changed

+178
-43
lines changed

3 files changed

+178
-43
lines changed

‎asset_allocation.html

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,20 @@
7070
<div class="container marketing">
7171
<canvas id="myChart"></canvas>
7272

73-
<h4>Enter percent stocks</h4>
73+
<h4>Add New Line (enter percent stocks)</h4>
7474
<input type="text" id="percentStocks"/>
7575
<button id="addLine">Add Line</button>
7676
<button id="clear">Clear All Data</button>
7777

78-
<h4>Enter years from 1963 to 2018</h4>
78+
<h4>Set starting amount</h4>
79+
<input type="text" id="startingAmount"/>
80+
<button id="startingAmountButton">Set Starting Amount</button>
81+
82+
<h4>Set amount to add each year</h4>
83+
<input type="text" id="addAmount"/>
84+
<button id="addAmountButton">Set Add Amount</button>
85+
86+
<h4>Set date range (enter years from 1963 to 2018)</h4>
7987
<input type="text" id="startDate"/>
8088
<input type="text" id="endDate"/>
8189
<button id="dateButton">Set Dates</button>

‎my_favorite_things.html

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -115,23 +115,15 @@ <h2>
115115
<h4><a href="https://www.foxbookshop.com/book/9780544382046">
116116
Homage to Catalonia, by George Orwell
117117
</a></h4>
118-
</div>
119-
<div class="col-md-offset-2">
120118
<h4><a href="https://www.powells.com/book/-9780441172719">
121119
Dune, by Frank Herbert
122120
</a></h4>
123-
</div>
124-
<div class="col-md-offset-2">
125121
<h4><a href="https://www.foxbookshop.com/book/9780060838720">
126122
Bel Canto, By Ann Patchett
127123
</a></h4>
128-
</div>
129-
<div class="col-md-offset-2">
130124
<h4><a href="https://www.powells.com/book/-9780465067107">
131125
The Design of Everday Things, By Donald Norman
132126
</a></h4>
133-
</div>
134-
<div class="col-md-offset-2">
135127
<h4><a href="https://www.powells.com/book/-9780345348104">
136128
The Killer Angels, By Micahel Shaara
137129
</a></h4>
@@ -141,16 +133,18 @@ <h2>
141133
Authors
142134
</h2>
143135
<div class="col-md-offset-2">
144-
George Orwell
145-
</div>
146-
<div class="col-md-offset-2">
147-
Haruki Murakami
148-
</div>
149-
<div class="col-md-offset-2">
150-
Bill Bryson
151-
</div>
152-
<div class="col-md-offset-2">
153-
John McPhee
136+
<h4>
137+
George Orwell
138+
</h4>
139+
<h4>
140+
Haruki Murakami
141+
</h4>
142+
<h4>
143+
Bill Bryson
144+
</h4>
145+
<h4>
146+
John McPhee
147+
</h4>
154148
</div>
155149

156150
<h2>
@@ -174,22 +168,38 @@ <h4><a href="https://darntough.com/collections/men/products/via-ferrata-micro-cr
174168
</a></h4>
175169
</div>
176170

171+
<h2>
172+
Youtube Channels
173+
</h2>
174+
<div class="col-md-offset-2">
175+
<h4><a href="https://www.youtube.com/channel/UCAL3JXZSzSm8AlZyD3nQdBA">
176+
Primitive Technology
177+
</a></h4>
178+
<h4><a href="https://www.youtube.com/channel/UC7FkqjV8SU5I8FCHXQSQe9Q">
179+
Ishitani Furniture
180+
</a></h4>
181+
<h4><a href="https://www.youtube.com/channel/UCZ9oDWliqkUxGHsKVbkwQOw">
182+
Curiosity Show
183+
</a></h4>
184+
</div>
185+
177186
<h2>
178187
Finance
179188
</h2>
180189
<div class="col-md-offset-2">
181190
<h4><a href="http://www.mrmoneymustache.com/2012/01/13/the-shockingly-simple-math-behind-early-retirement/">
182191
The Shockingly Simple Math Behind Early Retirement
183192
</a></h4>
184-
</div>
185-
<div class="col-md-offset-2">
186193
<h4><a href="https://www.referyourchasecard.com/6A/DG9AU7EA4H">
187194
Chase Sapphire Preferred Credit Card (Referral Link)
188195
</a></h4>
196+
<h4><a href="https://investor.vanguard.com/home/">
197+
Vanguard
198+
</a></h4>
189199
</div>
190200

191201
<h2>
192-
Websites
202+
Other
193203
</h2>
194204
<div class="col-md-offset-2">
195205
<h4><a href="https://www.duolingo.com/">

‎scripts/asset_allocation.js

Lines changed: 137 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,119 @@
11
var ctx = document.getElementById('myChart').getContext('2d');
22

33
var colors = [
4-
'rgb(222, 130, 50)',
5-
'rgb(0, 180, 175)',
6-
'rgb(0, 172, 252)',
7-
'rgb(35, 99, 132)',
8-
'rgb(35, 9, 132)',
9-
'rgb(114, 0, 0)',
10-
'rgb(0, 53, 0)',
11-
'rgb(35, 200, 0)',
12-
'rgb(0, 211, 186)',
13-
'rgb(230, 124, 255)',
14-
'rgb(255, 44, 162)',
15-
'rgb(200, 200, 0)',
16-
'rgb(0, 223, 121)',
17-
'rgb(91, 191, 255)',
18-
'rgb(255, 136, 255)'
4+
'rgb(128,0,0)',
5+
'rgb(139,0,0)',
6+
'rgb(165,42,42)',
7+
'rgb(178,34,34)',
8+
'rgb(220,20,60)',
9+
'rgb(255,0,0)',
10+
'rgb(255,99,71)',
11+
'rgb(255,127,80)',
12+
'rgb(205,92,92)',
13+
'rgb(240,128,128)',
14+
'rgb(233,150,122)',
15+
'rgb(250,128,114)',
16+
'rgb(255,160,122)',
17+
'rgb(255,69,0)',
18+
'rgb(255,140,0)',
19+
'rgb(255,165,0)',
20+
'rgb(255,215,0)',
21+
'rgb(184,134,11)',
22+
'rgb(218,165,32)',
23+
'rgb(238,232,170)',
24+
'rgb(189,183,107)',
25+
'rgb(240,230,140)',
26+
'rgb(128,128,0)',
27+
'rgb(255,255,0)',
28+
'rgb(154,205,50)',
29+
'rgb(85,107,47)',
30+
'rgb(107,142,35)',
31+
'rgb(124,252,0)',
32+
'rgb(127,255,0)',
33+
'rgb(173,255,47)',
34+
'rgb(0,100,0)',
35+
'rgb(0,128,0)',
36+
'rgb(34,139,34)',
37+
'rgb(0,255,0)',
38+
'rgb(50,205,50)',
39+
'rgb(144,238,144)',
40+
'rgb(152,251,152)',
41+
'rgb(143,188,143)',
42+
'rgb(0,250,154)',
43+
'rgb(0,255,127)',
44+
'rgb(46,139,87)',
45+
'rgb(102,205,170)',
46+
'rgb(60,179,113)',
47+
'rgb(32,178,170)',
48+
'rgb(47,79,79)',
49+
'rgb(0,128,128)',
50+
'rgb(0,139,139)',
51+
'rgb(0,255,255)',
52+
'rgb(0,255,255)',
53+
'rgb(224,255,255)',
54+
'rgb(0,206,209)',
55+
'rgb(64,224,208)',
56+
'rgb(72,209,204)',
57+
'rgb(175,238,238)',
58+
'rgb(127,255,212)',
59+
'rgb(176,224,230)',
60+
'rgb(95,158,160)',
61+
'rgb(70,130,180)',
62+
'rgb(100,149,237)',
63+
'rgb(0,191,255)',
64+
'rgb(30,144,255)',
65+
'rgb(173,216,230)',
66+
'rgb(135,206,235)',
67+
'rgb(135,206,250)',
68+
'rgb(25,25,112)',
69+
'rgb(0,0,128)',
70+
'rgb(0,0,139)',
71+
'rgb(0,0,205)',
72+
'rgb(0,0,255)',
73+
'rgb(65,105,225)',
74+
'rgb(138,43,226)',
75+
'rgb(75,0,130)',
76+
'rgb(72,61,139)',
77+
'rgb(106,90,205)',
78+
'rgb(123,104,238)',
79+
'rgb(147,112,219)',
80+
'rgb(139,0,139)',
81+
'rgb(148,0,211)',
82+
'rgb(153,50,204)',
83+
'rgb(186,85,211)',
84+
'rgb(128,0,128)',
85+
'rgb(216,191,216)',
86+
'rgb(221,160,221)',
87+
'rgb(238,130,238)',
88+
'rgb(255,0,255)',
89+
'rgb(218,112,214)',
90+
'rgb(199,21,133)',
91+
'rgb(219,112,147)',
92+
'rgb(255,20,147)',
93+
'rgb(255,105,180)',
94+
'rgb(255,182,193)',
95+
'rgb(255,192,203)',
96+
'rgb(250,235,215)',
97+
'rgb(245,245,220)',
98+
'rgb(255,228,196)',
99+
'rgb(255,235,205)',
100+
'rgb(245,222,179)',
101+
'rgb(255,248,220)',
102+
'rgb(255,250,205)',
103+
'rgb(250,250,210)',
104+
'rgb(255,255,224)',
105+
'rgb(139,69,19)',
106+
'rgb(160,82,45)',
107+
'rgb(210,105,30)',
108+
'rgb(205,133,63)',
109+
'rgb(244,164,96)',
110+
'rgb(222,184,135)',
111+
'rgb(210,180,140)',
112+
'rgb(188,143,143)',
113+
'rgb(255,228,181)',
114+
'rgb(255,222,173)',
115+
'rgb(255,218,185)',
116+
'rgb(255,228,225)'
19117
]
20118

21119
var sAndP = [
@@ -143,6 +241,9 @@ var sAndPPrices = sAndP.map(x => x[1]);
143241
var bondYields = bonds.map(x => x[1]);
144242
var startIndex = 0
145243
var endIndex = -1
244+
var startingAmount = 100
245+
var addAmount = 0
246+
var percentStocks = 100
146247

147248
var config = {
148249
// The type of chart we want to create
@@ -154,7 +255,7 @@ var config = {
154255
datasets: [{
155256
label: "100% S&P",
156257
borderColor: 'rgb(255, 99, 132)',
157-
data: getNewLine(100, 0, -1),
258+
data: getNewLine(percentStocks, 0, -1),
158259
percentStocks: 100,
159260
fill: false
160261
}]
@@ -176,8 +277,24 @@ var config = {
176277
}
177278
}
178279

280+
document.getElementById('startingAmountButton').addEventListener('click', function() {
281+
startingAmount = parseFloat(document.getElementById('startingAmount').value)
282+
config.data.datasets.forEach(function(dataset) {
283+
dataset.data = getNewLine(dataset.percentStocks, startIndex, endIndex)
284+
});
285+
chart.update()
286+
});
287+
288+
document.getElementById('addAmountButton').addEventListener('click', function() {
289+
addAmount = parseFloat(document.getElementById('addAmount').value)
290+
config.data.datasets.forEach(function(dataset) {
291+
dataset.data = getNewLine(dataset.percentStocks, startIndex, endIndex)
292+
});
293+
chart.update()
294+
});
295+
179296
document.getElementById('addLine').addEventListener('click', function() {
180-
var percentStocks = document.getElementById('percentStocks').value
297+
percentStocks = parseFloat(document.getElementById('percentStocks').value)
181298
addLine(percentStocks)
182299
});
183300

@@ -239,15 +356,16 @@ function getNewLine(percentStocks, startIndex, endIndex) {
239356
var bondReference = bondYields.slice(startIndex, endIndex)
240357
var stockValue
241358
var bondValue
242-
var total = 100
243-
var newLine = [total]
359+
var total = startingAmount
360+
var newLine = [total + addAmount]
244361

245362
var iters = stockReference.length
246363
for (iter = 0; iter < iters; iter++) {
247364
if(iter + 1 == iters) {
248365
break
249366
}
250367

368+
total = total + addAmount
251369
stockValue = total * decimalStocks
252370
bondValue = total * decimalBonds
253371

@@ -265,5 +383,4 @@ function getNewLine(percentStocks, startIndex, endIndex) {
265383
return newLine
266384
}
267385

268-
269386
var chart = new Chart(ctx, config);

0 commit comments

Comments
 (0)