interest-exploration

spec.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Plots two functions using a generated sequence.",
  "width": 600,
  "height": 300,
  "data": [{
    "name": "month",
    "values": [

    ],
    "transform": [
      {"type": "sequence", "start": 0, "stop": 60, "as": "t"},
      {
        "type": "formula",
        "expr": "pow((1 + rate/100/12),datum.t)",
        "as": "z"
      },
      {
        "type": "formula",
        "expr": "datum.z*balance",
        "as": "interest"
      },
      {
        "type": "formula",
        "expr": "contribution*((datum.z-1)/(rate/100 / 12))",
        "as": "contributed"
      },
      {
        "type": "formula",
        "expr": "datum.contributed+datum.interest",
        "as": "y"
      }
    ]
  }],
  "signals": [
    {
      "name": "balance",
      "value": 1000,
      "bind": {"input": "range", "min": 10, "max": 20000, "step": 1, "debounce": 10}
    },
    {
      "name": "contribution",
      "value": 100,
      "bind": {"input": "range", "min": 0, "max": 2000, "step": 20, "debounce": 10}
    },
    {
      "name": "rate",
      "value": 1.1,
      "bind": {"input": "range", "min": 0.01, "max": 3.00, "step": 0.05, "debounce": 10}
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "month", "field": "t"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "month", "field": "y"},
      "domainMax": 30000
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x"},
    {"orient": "left", "scale": "y"}
  ],

      "marks": [
        {
          "type": "line",
          "from": {"data": "month"},
          "encode": {
            "update": {
              "x": {"scale": "x", "field": "t"},
              "y": {"scale": "y", "field": "y"},
              "strokeWidth": {"value": 2}
            },
            "hover": {
              "strokeOpacity": {"value": 0.5}
            }
          }
        }
      ]
}