This topic caught my interest during a lecture for a finance module I took at university, and so I wanted to make a little post about it.

We start with a fact: borrowing money isn't free. We all understand that when borrowing money, in addition to repaying the principal amount, the borrower is obligated to make interest payments to the lender.

Assuming the borrower is to make regular equal payments $P$ (in arrears) to the lender in order to repay the loan, the amount he will pay each time depends on several factors: the original amount loaned (the principal) $L$, the agreed term of the loan $n$ (years), the agreed effective interest rate $i$ per annum, and how many payments shall be made per year, $r$. I am disregarding any taxes and insurance costs which would normally be taken into consideration when borrowing/lending. If we let $\nu$ be the discount factor for the period between each payment $\frac{1}{(1+i)^{1/r}}$, it's not hard to put these together to get the following.

$$ \begin{equation*}\begin{aligned} L &= {\nu}P+\nu^2P+\nu^3P+\cdots+\nu^{nr}P \\ &= P(\nu+\nu^2+\cdots+\nu^{nr}) \\ &= P\nu\frac{1-\nu^{nr}}{1-\nu} \end{aligned}\end{equation*}$$

$$\Rightarrow \: P = \frac{L}{\nu}\frac{1-\nu}{1-\nu^{nr}}$$

During the aforementioned lecture, the lecturer showed a graph that described the repayment structure of long term loans and for some reason I instantly liked the graph. It was a simple bar graph that had a bar for each repayment but broke this bar down into how much of that repayment was interest and how much was actually getting the borrower toward paying off the loan (ie. the principal). I wanted to recreate that graph here.

The first job then, how do we break a given repayment into its interest and principal components? Let $P_{k,i}$ be the interest component of the $k$th repayment, $P_{k,p}$ be the principal component of the $k$th repayment, and let $E_k$ be the amount of money still owed by the borrower (including any interest) immediately after the $k$th repayment, so $E_0=L$. We first express $E_k$.

$$E_k = \frac{L - P\nu\frac{1 - \nu^k}{1 - \nu}}{\nu^{k}}$$

That is: the original amount (the principal) minus the discounted value of the $k$ repayments made so far, all brought back up in value to correspond with being at the time of the $k$th repayment. The amount of money (including interest) still to be repaid immediately before the $k$th repayment is simply $\frac{E_{k-1}}{\nu}$. The interest component of the $k$th repayment, $P_{k,i}$, is then just the difference between these two values.

$$\begin{equation*}\begin{aligned} P_{k,i} &=\frac{E_{k-1}}{\nu}-E_{k-1}\\ &=E_{k-1}\frac{1-\nu}{\nu} \\ &=\frac{L - P\nu\frac{1 - \nu^{k-1}}{1 - \nu}}{\nu^{k-1}}\frac{1-\nu}{\nu}\\ &= P-\frac{\nu(L+P)-L}{\nu^k} \end{aligned} \qquad\qquad \begin{aligned}[c] P_{k,p} &=P-P_{k,i}\\ &= \frac{\nu(L+P)-L}{\nu^k} \end{aligned}\end{equation*}$$

And we are done! A nice formula for the interest and principal components of any given payment $1\le k \le rn$.

As I say, as satisfying as the maths is, it was the visual graph that I really liked, and so I coded this little applet (for my own enjoyment of playing with the sliders and watching it change more than anything else) that graphs the repayment structure of a loan given the parameters set by the sliders. Feel free to have a play and watch the graph update as you do. Hint: choose a large interest rate, then lock the y-axis, you can then move the interest rate down and see how the blue curve flattens as you do. Notice also that with the axes locked, the area of the red region (signifying the original principal amount) never changes. Please note: this app is based on modern web technologies and so will only operate correctly in modern browsers.

Amount Interest rate Term of loan Payments per year Payment in arrears Lock y-axis


This applet was built using d3.js, a terrific JavaScript library for manipulating documents based on data, built by Mike Bostock. Credit for the nice looking sliders/switches goes to Alexander Petkov's Powerange and Switchery (though I made a few changes to Powerange to suit my needs here).