Amortization schedule

_.md

[ Launch: Amortization schedule ] 8365957 by poezn

assets.svg

config.json

{"description":"Amortization schedule","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":true,"thumbnail":"http://i.imgur.com/BJ7FdBZ.png"}

inlet.js

// A = i x P x ((1+i)^n)/(1+i)^n - 1
// A = monthly payment
// P = initial principal
// i = monthly interest rate
// n = number of payments
 
 
// ==================================
// HERE. THIS DATA CHANGES EVERYTHING
var apr = 4.3; // in percent
var term = 30; // in years 
var p = 100000;
// ALRIGHT WE'RE DONE
// ==================================
 
 
 
 
 
var i = apr / 1200;
var n = term * 12;
var monthlyPayment = i * p * Math.pow((1+i), n) / (Math.pow((1+i), n) - 1);
 
var schedule = [];
var balance = p;
 
for (var j = 0; j < n; j++) {
  var paidInterest = balance * i;
  var paidPrincipal = monthlyPayment - paidInterest;
  var balance = balance - paidPrincipal;
  schedule.push({
    amount: monthlyPayment,
    paidPrincipal: paidPrincipal,
    paidInterest: paidInterest,
    balance: balance
  })
}
 
// =========
var circleScale = d3.scale.sqrt()
.domain([0, d3.sum(schedule, function(d, i) { return d.paidInterest; } )])
.range([0, 70]);
 
var format = d3.format("4.2f");
 
var renderInterest = function(d, i) {
  var data1 = schedule.slice(0, i);
  var data2 = schedule.slice(i);
  
  var data = [
    d3.sum(data1, function(d, i) { return d.paidInterest }),
    d3.sum(data2, function(d, i) { return d.paidInterest })
  ];
  
  var circles = g.selectAll("circle")
  .data(data);
  
  console.log(data);
  
  circles.enter().append("circle")
  .attr({
    "cx": function(d, i) { return 80 + i * 300},
    "cy": 400
  })
  .style({
    "fill": "#CC7EAA"
  });
  
  circles.attr({
    "r": circleScale
  });
  
  d3.select("#monthid")
  .text("Month " + (i+1) + "/" + n);
 
  d3.select("#interest")
  .text("Interest: $" + format(d.paidInterest));
 
  d3.select("#principal")
  .text("Principal: $" + format(d.paidPrincipal));
 
  d3.select("#monthlypayment")
  .text("Monthly Payment: $" + format(monthlyPayment));
 
};
 
var w = 360,
    h = 200,
    width = w / n;
 
var scale = d3.scale.linear()
.domain([0, monthlyPayment])
.range([0, h])
 
var months = g.selectAll("g.month")
.data(schedule)
.enter().append("g")
.attr({
  "transform": function(d, i) {
    var tx = 20 + i * width
        ty = 20;
    return "translate(" + [tx, ty] + ")";
  },
  "width": width
})
.on("mouseover", renderInterest);
 
 
months.append("rect")
.attr({
  "height": h,
  "width": width
})
.style({
  "fill": "#7E83CC"
});
 
months.append("rect")
.attr({
  "height": function(d, i) {
    return scale(d.paidInterest);
  },
  "width": width,
  "transform": function(d, i) {
    var tx = 0,
        ty = h - scale(d.paidInterest);
    return "translate(" + [tx, ty] + ")"
  }
})
.style({
  "fill": "#CC7EAA"
});
 
 
renderInterest(schedule[0], 0);

styles.css

text {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, sans-serif
}