2c:null 2d:["$","title",null,{"children":"Mortgage Payment | chiahsun's Workspace | Observable"}] 32: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) }33:[] 30:{"id":"0c8f2459f217a129","slug":null,"title":"Mortgage Payment","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-25T02:07:09.505Z","update_time":"$D2023-09-25T13:25:04.627Z","view_time":null,"first_public_time":"$D2023-09-25T02:07:09.505Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"05a280d5805bdded","login":"chiahsun-ws","name":"chiahsun's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e06074d90bbb7a9557da30d32efcca502ae2522f2d3efdd2a9cc4698be71fcbc","tier":"starter_2024"},"version":212,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4d462f09d15036b5","login":"chiahsun","name":"chiahsun","avatar_url":"https://avatars-next.observableusercontent.com/c4e588aa0e7d82afb93cc124673b4193996972c1f5027b05d5bc5441f7292613","tier":null}],"members":[{"type":"individual","id":"4d462f09d15036b5","login":"chiahsun","name":"chiahsun","avatar_url":"https://avatars-next.observableusercontent.com/c4e588aa0e7d82afb93cc124673b4193996972c1f5027b05d5bc5441f7292613","tier":null,"role":"editor"},{"type":"team","id":"05a280d5805bdded","login":"chiahsun-ws","name":"chiahsun's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e06074d90bbb7a9557da30d32efcca502ae2522f2d3efdd2a9cc4698be71fcbc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"presentValue = 200000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"numYear = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"rate = 0.075","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"payment = pmt(rate/12, 12*numYear, presentValue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"monthColumn = \"t(month)\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"paymentColumn = \"Payment\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"interestedPayedColumn = \"Interest payed\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"principlePayedColumn = \"Principle payed\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"principlePayedPercentageColumn = \"Principle payed percentage\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"remainingPrincipleColumn = \"Remaining Principle\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof exact = Inputs.toggle({label: \"Exact\", value: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"data = computeTable(payment, exact)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"dataForTable = [...data.slice(0, 5), ...data.slice(data.length-5)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"