\n \n

\n\n

\n Start value\n \n $1,000\n

\n Growth rate\n \n 10%\n

\n Years\n \n 25 yr\n

\n \n Show linear comparison\n

Drag the sliders. The shaded gap between the dashed line and the curve is the entire lesson.

\n`,\n scripts: `\nlet S = getHS() || { start: 1000, rate: 10, years: 25, showLinear: true };\n\nconst els = {\n start: document.getElementById('cp-start'),\n rate: document.getElementById('cp-rate'),\n years: document.getElementById('cp-years'),\n linear: document.getElementById('cp-linear'),\n startVal: document.getElementById('cp-start-val'),\n rateVal: document.getElementById('cp-rate-val'),\n yearsVal: document.getElementById('cp-years-val'),\n};\n\nels.start.value = S.start;\nels.rate.value = S.rate;\nels.years.value = S.years;\nels.linear.checked = S.showLinear;\n\nfunction fmt(n) {\n if (n >= 1e9) return '$'+(n/1e9).toFixed(1)+'B';\n if (n >= 1e6) return '$'+(n/1e6).toFixed(1)+'M';\n if (n >= 1e3) return '$'+(n/1e3).toFixed(1)+'K';\n return '$'+Math.round(n);\n}\n\nfunction draw() {\n const start=S.start, rate=S.rate/100, years=S.years;\n const svg = document.getElementById('cp-svg');\n const rect = document.getElementById('cp-chart').getBoundingClientRect();\n const W = Math.round(rect.width), H = Math.round(rect.height);\n svg.setAttribute('viewBox', '0 0 '+W+' '+H);\n\n const pad = { l: Math.min(55, W*0.12), r: 15, t: 15, b: 30 };\n const cw = W-pad.l-pad.r, ch = H-pad.t-pad.b;\n\n const compound=[], linear=[];\n for (let y=0; y<=years; y++) {\n compound.push(start*Math.pow(1+rate,y));\n linear.push(start+start*rate*y);\n }\n const maxVal=Math.max(compound[years],linear[years],start*1.1);\n\n function px(y){return pad.l+(y/years)*cw;}\n function py(v){return pad.t+ch-(v/maxVal)*ch;}\n\n let html='';\n\n // Grid lines\n const yTicks=5;\n for(let i=0;i<=yTicks;i++){\n const v=(maxVal/yTicks)*i, yy=py(v);\n html+='';\n html+=''+fmt(v)+'';\n }\n const xStep=years<=10?1:years<=25?5:10;\n for(let y=0;y<=years;y+=xStep){\n html+=''+y+'';\n }\n html+='Years';\n\n // Compound area under curve\n let areaPath='M'+px(0)+','+py(0);\n compound.forEach((v,i)=>areaPath+=' L'+px(i)+','+py(v));\n areaPath+=' L'+px(years)+','+py(0)+' Z';\n html+='';\n\n // Gap fill between compound and linear (the lesson)\n if(S.showLinear){\n let gapPath='M'+px(0)+','+py(compound[0]);\n compound.forEach((v,i)=>{if(i>0)gapPath+=' L'+px(i)+','+py(v);});\n for(let i=years;i>=0;i--) gapPath+=' L'+px(i)+','+py(linear[i]);\n gapPath+=' Z';\n html+='';\n }\n\n // Compound line\n let cPath='M'+px(0)+','+py(compound[0]);\n compound.forEach((v,i)=>{if(i>0)cPath+=' L'+px(i)+','+py(v);});\n html+='';\n\n // Linear line\n if(S.showLinear){\n let lPath='M'+px(0)+','+py(linear[0]);\n linear.forEach((v,i)=>{if(i>0)lPath+=' L'+px(i)+','+py(v);});\n html+='';\n }\n\n // Endpoint dots\n html+='';\n if(S.showLinear) html+='';\n\n svg.innerHTML=html;\n\n // Results\n const finalC=compound[years], finalL=linear[years];\n const mult=finalC/start, gap=finalC-finalL;\n const dramatic=mult>5;\n const resultsEl=document.getElementById('cp-results');\n resultsEl.innerHTML=\n '

'+fmt(finalC)+'

Final value

'\n +'

'+mult.toFixed(1)+'\\\\u00d7

Multiplier

'\n +'

'+fmt(gap)+'

vs. linear

';\n\n els.startVal.textContent=fmt(start);\n els.rateVal.textContent=S.rate+'%';\n els.yearsVal.textContent=S.years+' yr';\n}\n\nfunction update(){\n S.start=parseInt(els.start.value);\n S.rate=parseFloat(els.rate.value);\n S.years=parseInt(els.years.value);\n S.showLinear=els.linear.checked;\n save(); draw();\n}\n\nels.start.addEventListener('input',update);\nels.rate.addEventListener('input',update);\nels.years.addEventListener('input',update);\nels.linear.addEventListener('change',update);\n\nfunction save(){setHS(S);}\n\n// Redraw on resize so viewBox stays correct\nnew ResizeObserver(()=>draw()).observe(document.getElementById('cp-chart'));\ndraw();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/compounding.ts","extension","ts","actionData","errors"]