Savings Calculator 🪙🪙

Projected savings balance at end of year is €

💡 Click a number to highlight workings

const spec = ({
  // vega-lite
    encoding: {
    x: { field: 'formula', type: 'nominal', "axis": {"labelAngle": 0, "orient": "top", title:null, "labelLimit": 300, labelFontSize: 20} },
    y: { field: 'year_in'/*, axis: {titleFontSize:20, labelFontSize: 30, } */ },
    color: {field: 'formula', legend: false},
    text: {field: 'value', format:',.2f'},
    size: {value: 12}
  },
  layer: [

    {
      mark: {type:'text', fontWeight:'bold', dx:2, dy:2},
      transform: [{filter: "datum.highlight"}],
      encoding: {
            size: {value: 15},
        color: {value:'yellow'}
      }
    },
    {
      mark: {type:'text', tooltip:false, from: 'data'},
            //transform: [{filter: "!datum.current"}], // messes selection; better out or using conditional size
      encoding: {
        size: { value: 12, condition: {test: 'datum.current', value: 1} }
      },
        params: [
    {
      name: "formula",
      //value: { ray_angle_in: 0 },
      select: {
        type: "point",
        //on: "mousemove{0,50}",
        on: "mouseup, touchup, [mousedown, mouseup] > mousemove",
        //on: "[touchdown, touchup] > touchmove, [mousedown, mouseup] > mousemove", //{10, 100}",
        //        on: "[mousedown, mouseup] > mousemove",
        nearest: true,
        toggle: false,
        clear: false,
        encodings: ["x", "y"]
      }
    }
  ]

    },
    {
      mark: {type:'text', fontWeight:'bold', dx:0, dy:0},
      transform: [{filter: "datum.current"}],
      encoding: {
        color: {value:'black'},
        size: {value: 14}
      }
    },
  ],

  data: { name: "data" },
  autosize: { "type": "fit", "contains": "padding"},
  // no reactive w/h due to https://github.com/observablehq/framework/issues/1194
  width: 450,//Math.min(500,content_width-30),//Math.min(400,content_width),
  height: 300-30,//Math.min(500,content_width-30)/1.2,//Math.min(400,content_width-30),
  background:'rgba(0,0,0,0)',
})

// interactivity via vega signals and listeners
const viz = embed('#viz', spec)

const data_source = calcuvegadata({
  models: [model],
  spec,
  domains: {
    formula: formulae_not_inputs,
    year_in: _.range(0,cursor.duration_in+0.1),
  },
  input_cursors: [
    { ...cursor }
  ]
})

// is this data_source_with_highlights data flow ok ... ?
viz.view.data("data", data_source_with_highlights).resize().run(); // turn off resize

viz.view.addSignalListener("formula", (a, b) => {
  setCursor('year_in', b.year_in[0])
  setFormula(b.formula[0])
});