2f:T4c4,function computeTable(payment, exact=false) { if (!exact) { payment = Math.round(payment); } const month = d3.map(Array(10).keys(), d => d+1) function createObj(i, payment, interestPayed, principlePayed, principlePayedPercentage, remainingPrinciple) { let obj = {}; obj[monthColumn] = i; obj[paymentColumn] = payment; obj[interestedPayedColumn] = interestPayed; obj[principlePayedColumn] = principlePayed; obj[principlePayedPercentageColumn] = principlePayedPercentage; obj[remainingPrincipleColumn] = remainingPrinciple; return obj; } let df = [createObj(0, payment, 0, 0, 0, presentValue)]; for (let i = 1; i <= numYear*12; ++i) { const lastRemainingPrinciple = df[i-1][remainingPrincipleColumn]; let interestPayed = lastRemainingPrinciple * (rate/12); if (!exact) { interestPayed = Math.round(interestPayed); } const principlePayed = payment - interestPayed; const principlePayedPercentage = principlePayed * 100 / payment; const remainingPrinciple = lastRemainingPrinciple - principlePayed; df.push(createObj(i, payment, interestPayed, principlePayed, principlePayedPercentage, remainingPrinciple)); } return df.slice(1) }30:[] 2d:{"title":"Mortgage Payment","cells":[{"id":0,"value":"# Mortgage Payment\n\nSee: https://anytimeestimate.com/home-buying/principal-and-interest/\n\nSee also: Edx | Foundations of Modern Finance I | Module 5 Mortgage Loans","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"[How to type math formula in observable markdown](https://observablehq.com/@observablehq/markdown-quick-reference)\n\n${tex` \\qquad\n\\text{pv} = \\frac{\\text{pmt}}{\\text{rate}} \\left[ 1 - \\frac{1}{(1+\\text{rate})^{\\text{nper}}} \\right]\n`}\n\nEquivalently,\n\n${tex` \\qquad\n\\text{pmt} = \\frac{\\text{pv} \\cdot \\text{rate} \\cdot R}{R - 1} \n`}\n\nwhere ${tex` R = (1+\\text{rate})^{\\text{nper}}`}\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"// See also: https://numpy.org/numpy-financial/latest/pmt.html#numpy_financial.pmt\nfunction pmt(rate, nper, pv) {\n console.assert(rate > 0);\n const R = Math.pow(1 + rate, nper);\n return pv * rate * R / (R - 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"presentValue = 200000","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"numYear = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"rate = 0.075","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"payment = pmt(rate/12, 12*numYear, presentValue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"monthColumn = \"t(month)\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"paymentColumn = \"Payment\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"interestedPayedColumn = \"Interest payed\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"principlePayedColumn = \"Principle payed\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"principlePayedPercentageColumn = \"Principle payed percentage\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"remainingPrincipleColumn = \"Remaining Principle\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof exact = Inputs.toggle({label: \"Exact\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"data = computeTable(payment, exact)","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"dataForTable = [...data.slice(0, 5), ...data.slice(data.length-5)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"\n\n \n \n \n \n \n \n \n \n \n \n \n ${dataForTable.map(d => htl.html`\n \n \n \n \n \n \n `)}\n \n

${monthColumn}	${paymentColumn}	${interestedPayedColumn}	${principlePayedColumn}	${principlePayedPercentageColumn}	${remainingPrincipleColumn}
${d[monthColumn]}	${d[paymentColumn]}	${d[interestedPayedColumn]}	${d[principlePayedColumn]}	${d[principlePayedPercentageColumn]}	${d[remainingPrincipleColumn]}

","pinned":true,"hidden":false,"mode":"html"},{"id":172,"value":"percentageData = [...data.map(d => ({month: d[monthColumn], type: \"Percentage of Principle\", percentage: d[principlePayedPercentageColumn]})),\n ...data.map(d => ({month: d[monthColumn], type: \"Percentage of Interest\", percentage: 100 - d[principlePayedPercentageColumn]}))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"// https://observablehq.com/@observablehq/plot-stacked-area-chart?intent=fork\n// https://observablehq.com/plot/features/legends\nPlot.plot({\n marginLeft: 50,\n width: 1000,\n color: {legend: true},\n y: {\n grid: true,\n label: null\n },\n marks: [\n Plot.areaY(percentageData, {x: \"month\", y: \"percentage\", fill: \"type\", title: \"type\"}),\n Plot.ruleY([0]),\n // https://observablehq.com/plot/marks/axis\n Plot.axisY({\n tickFormat: (d) => (`${d}%`)\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}