👀 Examples

calculang proposes a separation of concerns.

Below, calculang models describe calculations. Applications appear separately and have separate codebases.

Applications use rather than replicate numbers, which are entirely explained by calculang 🙋

You can use ➤ Code blocks to see application code below.¹

calculang formulae are already shown, with additional options under 🤫

calculang design properties

• calculations defined by pure-functions without side-effects (or ‘formulae’)
• input inference: argument-passing boilerplate or ‘threading’ is inferred
• modularity with parent-definition precedence
• everything defined as a function - including constants and inputs

These are designed to promote flexible & reusable calculation code, and logically-structured models which are maintainable, general, and with low refactoring needs.

calculang generates pure-computation and portable Javascript modules, which are usable across application languages. calculang isn’t technically opinionated about how calculations are used (or ‘applied’).

disclaimers - important!

The assumptions, methodology and limitations of a model should be carefully considered for any purpose you apply it to.

I haven’t noted these here, or otherwise documented example models. Proceed with caution 🙏

html`
<style id="dn">
a {
  color: #f33
}
body {
  //background: #f8f8ff
}
code {
  white-space: pre-wrap;
}
  #first-column {
    padding: 15px;
    border-radius: 15px;
    background-color: lightgreen
  }
  .javascript {
    padding: 15px;
    border-radius: 8px;
    /*font-weight: bold;*/
    background-color: #efefef
  }
  .quarto-dark .javascript {
    background-color: #122;
    color: #eee
  }
  .quarto-dark #first-column {
    color: #111;
        background-color: green

  }
  .quarto-dark .vega-embed, .panel-input {
    padding: 10px 5px;
    border: 1px solid gray;
    border-radius: 5px;
    background: #ffdfdd !important;
    color:black
  }

  .quarto-dark #second-column {
        color: #111;

    background-color: red;
  }
  .quarto-dark select {
    color: red;
  }
  .quarto-dark input {
    color: red;
  }
  .quarto-dark  summary {
    color: blue;
  }
  
  .quarto-dark #second-column a {
    color: blue;
  }
  
  #second-column {
    padding: 15px;
    border-radius: 15px;
    background-color: pink;
  }
  #second-column:hover {
    opacity: 1;
  }
  .application {
    display: none;
  }
  .${shop_application} {
    display: block;
  }
  .modeldept {
    display: none;
  }
  .${modelname} {
    display: block;
  }
  .vega-embed, .panel-input {
    padding: 10px 5px;
    border: 1px solid gray;
    border-radius: 5px;
    background: #ffdfdd !important;
  }
  #model-relationships {
    ${example_details.modular ? '' : 'display: none;'} // todo determine this from cul_scopes introspection info
  }
</style>
`

//modelname = entrypoints_all[entrypoint][1].slice(0,-7)

default_example_id = q.get('id') ?? ''
show_hidden = q.get('hidden') == 'hidden' ?? false

a_thing2 = html`<select style="font-size: 1.5em">
${examples.map(category => `<optgroup label="${category.category}">
  ${category.tiles.filter(tile => ((!tile.disabled) || show_hidden)).map(d => `<option value="${d.id}"${d.id == default_example_id ? ' selected="selected"' : ''}}>${d.title}</option>`)}
  ${category.tiles.filter(d => d.id == default_example_id && d.disabled && (!show_hidden)).map(d => `<option value="${d.id}"${d.id == default_example_id ? ' selected="selected"' : ''}}>${d.title}</option>`)}
</optgroup>
`)}</select>`

md`*${example_details.subtitle}*`
cul_resources = {
  if (cul_js_cul)
  return Object.values(introspection_nomemo.cul_scope_ids_to_resource).map(loc => loc.slice(2).slice(0,loc.indexOf('?') != -1 ? loc.indexOf('?')-2 : 999)).map(d => d + ((d.slice(-3) != '.js') ? '.js' : '')).map(loc => dir+ loc)
  else return [...Array(Object.keys(introspection_nomemo.cul_scope_ids_to_resource).length)].map((_, i) => entrypoint_no_cul_js /* this is not modelname! this should be related to entrypoit, not id */+(calculang_source_nomemo.length? '-nomemo' : '') +'_esm/'+'cul_scope_'+i+'.mjs')
}

//cul_resources

output = {
  let o = [];
  cul_resources.forEach(loc => {
    o.push(fetch(loc).then(d => d.text()))
  })
  return o
}

// TODO replace duplicate (source) code by a message

calculang = [await output[0], cul_resources.length > 1 ? await output[1] : ''
, cul_resources.length > 2 ? await output[2] : ''
, cul_resources.length > 3 ? await output[3] : ''
, cul_resources.length > 4 ? await output[4] : ''
, cul_resources.length > 5 ? await output[5] : ''
, cul_resources.length > 6 ? await output[6] : '' // TODO warn when overflows
, cul_resources.length > 7 ? await output[7] : ''].filter(d => d != '')
//calculang

// "x.cul.js formulae?"
fff = calculang.map(d => d.split('\n')).map(d => [d.findIndex(e => e.indexOf('inputs:' + (options.includes('inputs') ? 'BLAH' : '')) != -1) ?? 999, ...d]).map(d => d.filter((e,i) => i <= d[0] || d[0] == -1)).map(d => d.slice(1)).map(d => d.join('\n')).map((d,i) => `***[${introspection_nomemo.cul_scope_ids_to_resource[i].split('?')[0].replaceAll('-nomemo', '')}](${cul_resources[i].replaceAll('-nomemo','')}) ${cul_js_cul ? `-> [js](${entrypoint_no_cul_js}_esm/cul_scope_${i}.mjs)` : ``}***

~~~js
${d.replaceAll('export const ' + (options.includes('export consts')
 ? 'BLAH' : ''), '')}
~~~
`
)


md`<br/>**inputs ⚙️** \`${inputs.filter(d => fns0.includes(d)).join('\`, \`')}\`${not_inputs.length ? ' | ~~\`' : ''}${not_inputs.map((d,i) => `${d}\`~~${i != not_inputs.length-1 ? ', ~~\`' : ''}`).join('')}`
not_inputs = inputs.filter(d => !fns0.includes(d))
dot`${scope_id_graph}`
md`${fff.join('\n\n')}`
viewof options = Inputs.checkbox(["export consts", "inputs"/*, "lists (todo)"*/], {label: "unhide?", value: [""]})

//md`---`


viewof cul_js = Inputs.radio(["📝 calculang source 💬", "✨ JS/ESM output ✨"], {label: "🫶", value: "📝 calculang source 💬"})

cul_js_cul = cul_js == "📝 calculang source 💬" ? true : false
viewof calculang_source_nomemo = Inputs.checkbox(["nomemo"], {value: ["nomemo"], label: 'see memo? 💀', disabled:cul_js=="📝 calculang source 💬"})
import {Tangle} from "@declann/colored-tangle"

viewof i_start = Inputs.input(1)

md`*starting i*: ${Inputs.bind(Inputs.range([-10, 150], {step:1, width: 50}), viewof i_start)}`
embed(
  calcuvizspec({
    models: modelname == 'fizzbuzz' ? [model] : [],
    input_cursors: [{}],
    mark: {type: 'text', fontSize:15, fontWeight: 'bold'},
    encodings: {
      x: {name: 'formula', type:'nominal', domain: ['fizz','buzz','fizzbuzz'], axis: {labelFontSize: 60}, sort: ['fizzbuzz']},
      y: {name: 'i_in', type:'nominal', domain: _.range(i_start, i_start+20), axis: {grid:true}},
      text: {name: 'value', type: 'nominal'},
      color: {name: 'value', type: 'nominal', legend:false},
    },
    width: 250,// height:50,
    spec_post_process: spec => { spec.background = "#fff"; spec.encoding.y.axis = {grid:true}; return spec;}
}))
viewof leap_year_start = Inputs.input(1990)

md`*starting year*: ${Inputs.bind(Tangle({min: -1000, max:5000, step:1, power:1.8, color:'darkblue'}), viewof leap_year_start)}`
import { calcuvegadata } from "baafa4b071a5b66a" // draft API!

leap_year_spec = ({
  background: 'white',
  "data": {"name": "data"},
  "datasets": { "data": leap_year_data0},
  "vconcat": [{
    "width": 480,
    "mark": {type: "line", point: true },
    "encoding": {
      "x": {
        "field": "year_in",
        "type": "quantitative",
        "scale": {"domain": {"param": "brush"}, zero: false, nice: false},
        "axis": {"title": "", format:".0f", grid: false, format: '.0f', ticks:true}
      },
      "y": {"field": "is_leap_year", "type": "quantitative",
            scale: {domain: [-0.1,1.1]},
              "axis": {format:".0f", grid: false, values: [0,1], format: '.0f', ticks: true}
            },
      "order": {"field": "year_in"},
      "tooltip": {field: "year_in"}
    }
  }, {
    "width": 480,
    "height": 60,
    "mark": {type: "line", size:0.1},
    "params": [{
      "name": "brush",
       value: { x: [leap_year_start, leap_year_start+50]}, // initial value here fails whenever I switch to this model after loading a different one ... understand
      //"value": {"year_in": [2000, 2010]},
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "encoding": {
      "x": {
        "field": "year_in",
        "type": "quantitative",
        scale: {zero:false, nice: false},
        axis: {format:".0f", grid: false, tickCount:12, ticks:true }
      },
      "y": {
        "field": "is_leap_year",
        "type": "quantitative",
        "axis": { "grid": false, values: [0,1], format: '.0f'}
      }
    }
  }]
})

leap_year_data = calcuvegadata({
  models: modelname == 'leap-year' ? [model] : [],
  spec: leap_year_spec,
  domains: { year_in: _.range(leap_year_start, leap_year_start+1001) },
  input_cursors: [{}]
})

viewof leap_year_viz = embed(leap_year_spec)

{
  leap_year_viz.data("data", leap_year_data).resize().run();
}
mutable leap_year_data0 = [] // includes data in spec for when I Open in Vega Editor

htl.html`<button onclick=${() => (mutable leap_year_data0 = leap_year_data)}>insert data -> vega editor (dev)</button>`
viewof frame_in = Scrubber(_.range(0,60*5), {autoplay: false, delay:50, label:'frame', initial: 2})

viewof speed_in = Inputs.range([-3,15], {value:3, label: 'speed', step:0.01})

starfield_spec = ({
  background: 'black',//'lightblue',
  "data": {"name": "data"},
  "datasets": { "data": starfield_data0},
    "height": 300, width: 300,
    layer: [{
    "mark": {type: "point", tooltip: true, clip: false},
    /*"params": [{
      "name": "brush",
       value: { x: [leap_year_start, leap_year_start+50]}, // initial value here fails whenever I switch to this model after loading a different one ... understand
      //"value": {"year_in": [2000, 2010]},
      "select": {"type": "interval", "encodings": ["x"]}
    }],*/
    "encoding": {
      "x": {
        "field": "x",
        "type": "quantitative",
        scale: {zero:false, nice: false, domain:[-50,50]},
        //axis: {format:".0f", grid: false, tickCount:12, ticks:true }
      },
      "y": {
        "field": "y",
        "type": "quantitative",
        scale: {zero:false, nice: false, domain:[-50,50]},
        //"axis": { "grid": false, values: [0,1], format: '.0f'}
      },
      "size": {
        "field": "z",
        "type": "quantitative",
        scale: {reverse:true},
        legend:false
        //scale: {zero:false, nice: false, domain:[-50,50]},
        //"axis": { "grid": false, values: [0,1], format: '.0f'}
      },
      color: {value:'white'}, //opacity: {value:1}
    }
    },
    {
      mark: 'rule',
      encoding: {

      "x": {
        "field": "x",
        "type": "quantitative",
        scale: {zero:false, nice: false, domain:[-50,50]},
        //axis: {format:".0f", grid: false, tickCount:12, ticks:true }
      },
      "y": {
        "field": "y",
        "type": "quantitative",
        scale: {zero:false, nice: false, domain:[-50,50]},
        //"axis": { "grid": false, values: [0,1], format: '.0f'}
      },
      "x2": {
        "field": "px",
        "type": "quantitative",
        scale: {zero:false, nice: false, domain:[-50,50]},
        //axis: {format:".0f", grid: false, tickCount:12, ticks:true }
      },
      "y2": {
        "field": "py",
        "type": "quantitative",
        scale: {zero:false, nice: false, domain:[-50,50]},
        //"axis": { "grid": false, values: [0,1], format: '.0f'}
      },
      color: {value:'white'}


      }
    }]
})

starfield_data = calcuvegadata({
  models: modelname == 'starfield' ? [model] : [],
  spec: starfield_spec,
  domains: { star_in: _.range(0, 100) },
  input_cursors: [{speed_in, frame_in, random_seed_in:'hello'}]
})

viewof starfield_viz = embed(starfield_spec)

{
  starfield_viz.data("data", starfield_data)/*.resize()*/.run();
}
mutable starfield_data0 = [] // includes data in spec for when I Open in Vega Editor

htl.html`<button onclick=${() => (mutable starfield_data0 = starfield_data)}>insert data -> vega editor (dev)</button>`
maze_in = [
  [33, 59, 92, 97, 80, 25, 71, 67, 29, 36, 76, 22, 58, 14, 42],
  [26, 2, 87, 64, 40, 76, 70, 75, 24, 19, 94, 86, 87, 40, 25],
  [26, 21, 57, 63, 100, 96, 21, 82, 22, 93, 15, 57, 49, 81, 73],
  [68, 55, 11, 67, 46, 73, 44, 32, 84, 100, 51, 87, 18, 75, 82],
  [80, 41, 36, 11, 43, 74, 39, 93, 35, 53, 73, 59, 27, 8, 30],
  [28, 86, 21, 75, 69, 27, 41, 88, 84, 83, 75, 90, 60, 11, 12],
  [77, 87, 0, 59, 35, 5, 79, 37, 45, 2, 29, 4, 99, 4, 43],
  [55, 91, 69, 24, 9, 67, 84, 100, 99, 41, 29, 62, 65, 27, 87],
  [30, 27, 12, 86, 21, 8, 40, 81, 81, 39, 56, 82, 40, 36, 79],
  [72, 6, 94, 64, 51, 42, 97, 93, 74, 1, 70, 97, 68, 42, 72],
  [0, 16, 20, 11, 1, 59, 48, 41, 87, 51, 53, 35, 25, 46, 21],
  [34, 57, 0, 98, 86, 30, 69, 25, 82, 84, 86, 2, 17, 67, 25],
  [88, 100, 23, 72, 12, 73, 51, 47, 4, 61, 44, 44, 49, 53, 27],
  [95, 31, 31, 39, 55, 64, 61, 52, 41, 33, 86, 0, 40, 48, 90],
  [79, 3, 62, 88, 27, 93, 29, 0, 91, 24, 17, 49, 2, 68, 33],
];

embed(
  calcuvizspec({
    models: modelname == 'maze' ? [model] : [],
    input_cursors: [{maze_in}],
    mark: {type: 'text', fontSize:11, fontWeight: 'bold'},
    encodings: {
      row: {name: 'formula', type:'nominal', domain: ['value','max', 'arrow', 'arrow_path', 'arrow_path_pretty'], axis: {labelFontSize: 60}, sort: ['value']},
      x: {name: 'x_in', type:'nominal', domain: _.range(0, 15), axis: {grid:false}},
      y: {name: 'y_in', type:'nominal', domain: _.range(0,15), axis: {grid:false}},
      text: {name: 'value', type: 'nominal'},
      //color: {name: 'value', type: 'quantitative', independent:true, legend:false},
    },
    width: 400,// height:50,
    //spec_post_process: spec => { spec.background = 'white'; spec.encoding.color.scale = {scheme:'viridis'}; return spec;}
  spec_post_process: spec => { spec.encoding.row.header = {labelLimit: 100};spec.background = 'white'; spec.encoding.color = {value: 'darkblue'}; return spec;}
}))
viewof num_snowflakes = Inputs.range([0,100], {label:'# snowflakes', value: 20, step: 1})
viewof w_in = Inputs.range([0,2], {label:'angular speed (w_in)', value: 0.6, step: 0.01})
viewof height_in = Inputs.range([100,500], {label:'height', value: 200, step: 20})
viewof f_in = Scrubber(_.range(0,60*100), {autoplay: false, delay:10, label:'frame'})

embed(
  calcuvizspec({
    models: modelname == 'snowflakes' ? [model] : [],
    input_cursors: [{f_in, w_in, width_in:400, height_in}],
    mark: {type:'text',clip:true},
    encodings: {
      x: { name: 'x', type: 'quantitative', scale: { domain: [0,400] } },
      y: { name: 'y', type: 'quantitative', sort:'descending', scale: { domain: [0,height_in] } },
      size: { name: 'size', type: 'quantitative', legend: false },
      angle: {name:'x', type: 'quantitative', scale: {range: [0,300] } },
      // different snowflakes:
      detail: {name: 'p_in', type:'nominal', domain: _.range(0,num_snowflakes,1) },
    },
    width: 300,
    height: 260,

    // viz customizations:
    spec_post_process: spec => {
      spec.encoding.text = { value: '❄️'}
      spec.background = 'darkred';
      return spec
    }
  })
, {theme:'vox', renderer: 'canvas'})
embed(
  calcuvizspec({
    models: modelname == 'snowflakes' ? [model] : [],
    input_cursors: [{ w_in, width_in:400, height_in}],
    mark: {type:'line', point: true, strokeWidth:'1px'},
    encodings: {
      x: { name: 'f_in', type: 'quantitative', domain: _.range(0,501,5) },
      y: { name: 'value', type: 'quantitative', independent: true },
      color: {name: 'p_in', type:'nominal', domain: [0,1, snowflake_in] },
      row: {name: 'formula', type:'nominal', domain: ['x','y','angle','size','radius','initial_angle'], sort: 'descending' },
    },
    width: 200,
    height: 30,

    // viz customizations:
    spec_post_process: spec => {
      spec.config = { point: { size: 10 } }
      spec.encoding.y.title = null;
      return spec
    }
  })
, {})
viewof snowflake_in = Inputs.range([0,num_snowflakes], {value: 10, label: 'chosen extra ❄️', step:1})
viewof petal_num_in = Inputs.range([0,50], {label:'# petals', value: 7, step: 1})
viewof petal_size_in = Inputs.range([0,50], {label:'petal size', value: 30, step:1})
viewof petals_roundy_spikiness_in = Inputs.range([0,2], {label:'petals roundy/spikiness', value: 0.5, step:0.1})
viewof flower_big = Inputs.toggle({label:'big?', value: false})
embed(
  calcuvizspec({
    models: modelname == 'flower' ? [model] : [],
    input_cursors: [{petal_num_in,petal_size_in, petals_roundy_spikiness_in}],
    mark: 'rect', // heatmap
    encodings: {
      x: { name: 'column_in', type: 'nominal', domain: _.range(0,101,1) },
      y: { name: 'row_in', type: 'nominal', domain: _.range(0,101,1) },
      color: {'name': 'value', type: 'quantitative', scale: {scheme: 'brownbluegreen', reverse: true}, legend: false,  },
      row: {
        name: 'formula', sort:'descending',
        domain: ['result', 'petals', 'head','face']
      }
    },
    width: 300*(flower_big ? 1.5 : 0.5),
    height: 250*(flower_big ? 1.5 : 0.5),

    // viz customizations:
    spec_post_process: spec => {
      spec.encoding.x.axis = { grid: false, domain: false, ticks: 0, labels: false }
      spec.encoding.y.axis = { grid: false, domain: false, ticks: 0, labels: false }
      return spec
    }
  })
)
viewof timing_in = Inputs.select(["start of today", "start of tomorrow"], {label:'from'})

md`**${(d3.format('.2%')(model.fractionLeftInYear({date_in: new Date(), timing_in})))}** of year reamining, or visually:`
Plot.plot({
  //marginLeft: 90,
  height:80,
  //width:5000,
  color: { legend: true },
  marks: [    Plot.axisX({anchor: "top"}),
,Plot.barX(
    [{sort: 1, status:'remaining',percent:100*model.fractionLeftInYear({date_in: new Date(), timing_in})},
    {sort: 0, status:'complete',percent:100*model.fractionIntoYear({date_in: new Date(), timing_in})
}]
,{ x: "percent", fill: "status", sort:'sort' })]
})
embed(
  calcuvizspec({
    models: modelname == 'monte-carlo-pension-calculator' ? [model] : [],
    input_cursors: [{
        random_seed_in: "something really random",

        "age_0_in": 30,
        "fund_value_0_in": 0,
        "retirement_age_in": 65,
        "missed_contribution_age_in": 0,
        "salary_age_0_in": 30,
        "salary_0_in": 30000,
        "salary_inflation_rate_in": 0.02,
        "empee_contribution_rate_in": 0.1,
        "emper_matching_rate_in": 1,
        "contribution_charge_rate_in":0.1,
        "management_charge_rate_in": 0.01}],
    mark: {type: 'text', fontSize:20, fontWeight: 'bold'},
    encodings: {
      x: {name: 'formula', type:'nominal', domain: ['retirement_fund_value'], axis: {labelFontSize: 60}},
      y: {name: 'simulation_in', type: 'ordinal', domain:_.range(0,10,1)},
      text: {name: 'value', type: 'quantitative', format:',.0f'},
      //color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
    },
    width: 90,// height:50,
}))
embed(
  calcuvizspec({
    models: modelname == 'monte-carlo-pension-calculator' ? [model] : [],
    input_cursors: [{
        random_seed_in: "something really random",

        "age_0_in": 30,
        "fund_value_0_in": 0,
        "retirement_age_in": 65,
        "missed_contribution_age_in": 0,
        "salary_age_0_in": 30,
        "salary_0_in": 30000,
        "salary_inflation_rate_in": 0.02,
        "empee_contribution_rate_in": 0.1,
        "emper_matching_rate_in": 1,
        "contribution_charge_rate_in":0.1,
        "management_charge_rate_in": 0.01}],
    mark: {type: 'line', point: false, fontSize:20, fontWeight: 'bold'},
    encodings: {
      //x: {name: 'formula', type:'nominal', domain: ['retirement_fund_value'], axis: {labelFontSize: 60}},
      x: {name: 'simulation_in', type: 'quantitative', domain:_.range(0,100,1)},
      y: {name: 'retirement_fund_value', type: 'quantitative', format:',.0f'},
      //color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
    },
    width: 300, height:100,
}))
embed(
  calcuvizspec({
    models: modelname == 'monte-carlo-pension-calculator' ? [model] : [],
    input_cursors: [{
        random_seed_in: "something really random",

        "age_0_in": 30,
        "fund_value_0_in": 0,
        "retirement_age_in": 65,
        "missed_contribution_age_in": 0,
        "salary_age_0_in": 30,
        "salary_0_in": 30000,
        "salary_inflation_rate_in": 0.02,
        "empee_contribution_rate_in": 0.1,
        "emper_matching_rate_in": 1,
        "contribution_charge_rate_in":0.1,
        "management_charge_rate_in": 0.01}],
    mark: {type: 'line', point: false, fontSize:20, fontWeight: 'bold'},
    encodings: {
      //x: {name: 'formula', type:'nominal', domain: ['retirement_fund_value'], axis: {labelFontSize: 60}},
      color: {name: 'simulation_in', type: 'nominal', domain:_.range(0,100,1)},
      x: {name: 'age_in', type: 'quantitative', domain:_.range(20,70,1)},
      y: {name: 'fund_value', type: 'quantitative', format:',.0f'},
      //color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
    },
    width: 300, height:400,
}))
viewof s = Inputs.toggle({ value: false, label: "persist interaction 🔨" })


viewof form = {
  let form = Inputs.form({
    age_0_in: Inputs.range([18,65], {label:'starting age', value:q.get('age_0_in') ?? 50, step:1}),
    retirement_age_in: Inputs.range([50,75], {label:'retirement age', value:65, step:1}),
    fund_value_0_in: Inputs.range([0,1000000], {label:'starting fund value', value:0, step:1000}),
    empee_contribution_rate_in: Inputs.range([0.00,0.30], {label:'empee contribution as % of salary', value:0.1, step:0.01}),
    emper_matching_rate_in: Inputs.range([0.00,2], {label:'emper matching rate', value:q.get('emper_matching_rate_in') ?? 1, step:0.02}),
    salary_0_in: Inputs.range([5000,300000], {label:'salary', value:q.get('salary_0_in') ?? 50000, step:1000}),
    salary_age_0_in: Inputs.range([18,65], {label:'salary ref. age', value:q.get('salary_age_0_in') ?? 50, step:1}),
    salary_inflation_rate_in: Inputs.range([-0.02,0.10], {label:'salary growth rate', value:0.02, step:0.002}),
    unit_growth_rate_in: Inputs.range([-0.02*0/*banned (along with neg charges) for technical reasons with the visual !!*/,0.10], {label:'investment growth rate', value:q.get('unit_growth_rate_in') ?? 0.05, step:0.002}),
    contribution_charge_rate_in: Inputs.range([-0.02*0,0.10], {label:'contribution charge rate', value:0.04, step:0.01}),
    management_charge_rate_in: Inputs.range([-0.02*0,0.10], {label:'management charge rate', value:0.01, step:0.002}),
    missed_contribution_age_in: Inputs.range([15,75], {label:'Missed contribution (scenario)', value:15, step:1}),
  }, {template});

  let state = false; // need to avoid circ. defn.

  form.oninput = (d) => {console.log('oninput',d);if (state == false) {mutable inputs_history = [...mutable inputs_history, form.value]; state = true; mutable statey = true; mutable changing = d.srcElement.parentElement.previousElementSibling.textContent} mutable inputs_history = [...mutable inputs_history.slice(0,-1), form.value]}
  form.onchange = () => { console.log('onchange');state = false; mutable statey = s /* false */; mutable inputs_history[mutable inputs_history.length-1] = form.value  };

  return form;
}
md`**retirement fund projection = <span style="color:darkorange"><span style="font-size:2em">€${f(new_value)}**</span></span> <span style="color:${good_guy ? 'green' : 'red'}; font-size:13px">**${statey ? (good_guy ? '↑' : '↓')+f(Math.abs(new_value - old_value)) : ' '}**</span>

*The retirement fund projection is the **pre-retirement area under inflows less the pre-retirement area under outflows** below.*`
{
  if (!statey) return md`.................................................................................................................................................................... ....................................................................................................................................................................`;
  else return md`impact <span style="color:${good_guy ? 'green' : 'red'}">€**${statey ? (good_guy ? '↑' : '↓')+f(Math.abs(new_value - old_value)) : ' '}**</span> due to **Δ ${changing}** (${d3.format(',.2f')(old_in)} -> ${d3.format(',.2f')(new_in)}) is visualised as **<span style="color:green">green boxes</span> - <span style="color:red">red boxes</span>** (inflows and outflows). 📦📦`

}
data_all2 = calcudata({
  models: modelname == 'pension-calculator' ? [model] : [],
  input_domains: {age_in:_.range(Math.min(inputs_history[input_cursor_id].age_0_in,inputs_history[input_cursor_id-1].age_0_in)-1,Math.max(inputs_history[input_cursor_id].retirement_age_in,inputs_history[input_cursor_id-1].retirement_age_in)+addl_years,1)},
  input_cursors: inputs_history.map(d => ({...d, /*age_in:d.retirement_age_in*/ /* TODO hacky? */})),
  outputs: [...formulae, 'check_cfs_vs_fund_value'],
  pivot: false
})//.map(d => d.formula == 'fund_charges' ? ({...d, value:-d.value}) : d) // TEMP9
.filter(d => d.input_cursor_id == input_cursor_id || (d.input_cursor_id == input_cursor_id-1 && statey))

// check_cfs_vs_fund_value is weakened as a check
embed({
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  //"background": "#eef",
  "padding": 5,
  "width": 400,
  //"height": 500,
  "style": "cell",
  signals:  [      {"name": "offset", "value": 80},
    {"name": "cellHeight", "value": 150},
    {"name": "height", "update": "2 * (offset + cellHeight)"}
],

  "data": [
    {
      "name": "data",
      "values": data_all2,
            "transform": [
        {
          type: 'formula',
          //expr: 'datum.value >=0', This is bloody hard to debug and do correctly, and must be correct for posneg swaps etc. So just banning negative charges for now and will fix this later!
          expr: 'indexof(["management_charge","contribution_charge"],datum.formula) == -1',
          as: 'posneg'
        },
        {
          type: 'formula', expr: 'abs(datum.value)', as: 'value'
        },
        {
          "type": "stack",
          "groupby": ["age_in"],
          "field": "value",
          "sort": {"field": ["formula", "input_cursor_id"], "order": ["ascending","descending"]},
          "as": ["value1_start", "value1_end"],
          "offset": "zero"
        },
      ]
    },
    {
      name: 'data_old',
      source: 'data',
                  "transform": [
        {
          type: 'filter',
          expr: `datum.input_cursor_id == ${input_cursor_id-1}`, // eliminates chk
        },
              
        {
          "type": "stack",
          "groupby": ["age_in"],
          "field": "value",
          "sort": {"field": ["formula", "input_cursor_id"], "order": ["ascending","descending"]},
          "as": ["value1_start", "value1_end"],
          "offset": "zero"
        },
]}
    
  ],
  scales: [    {
      "name": "gscale",
      "type": "band",
      "range": [0, {"signal": "height"}],
      "round": true,
      "domain": {
        "data": "data",
        "field": "posneg",
        /*"sort": {
          "field": "posneg",
          "op": "median",
          "order": "descending"
        }*/
      }
    },
           
    {
      "name": "y_shared",
      "type": "linear",
      domainMin: '0',// domainMax: '60000', // doesn't generalise
      "domain": {"data": statey?"data_old" : 'data', "fields": ["value1_start", "value1_end"]}, // give this a cushion ??
      "range": [{"signal": "cellHeight"}, 0],
      "nice": false,
      "zero": true,
      
    },
           
    {
      "name": "y_bad", // how to share y scale on the stack total ?!
      "type": "linear",
      domainMin: '0', domainMax: {signal: "domain('yyy')[1]*2"}, // doesn't generalise. Can I not x2 or update when dragging?
      "domain": {"data": "data", "fields": ["value1_start", "value1_end"]}, // give this a cushion ??
      "range": [{"signal": "cellHeight"}, 0],
      "nice": false,
      "zero": true,
      
    },
           
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "data", "field": "formula", "sort": ["empee_contribution_cost","check_cfs_vs_fund_value"]},
      "range": "category"
    },
],
  "marks": [
    {
      type: 'group',
      name: 'posneg',
      from: {
        facet: {
          data: 'data',
          name: 'posnegs',
          groupby: 'posneg'
        }
      },
    data: [{name: 'data_windowed', source:'posnegs', transform: [
              {
          "type": "window",
          "params": [null],
          "as": ["B_value"],
          "ops": ["lag"],
          "fields": ["value"],
          "sort": {
            "field": ["input_cursor_id"],
            "order": ["descending"]
          },
          "groupby": ["formula", "age_in"],
          "frame": [-1, 0]
        },
        {
          "type": "formula",
          "expr": "datum.value-datum.B_value",
          "as": "impact"
        },
        {"type": "formula", "expr": `datum.value > datum.B_value ? 0 : datum.B_value - datum.value`, "as": "adj"}, // I need to record the adj in id-1 for use in calc for id w. a follow-up window fn !
        {"type": "formula", "expr": `datum.input_cursor_id == ${input_cursor_id-1} ? datum.value > datum.B_value ? datum.value - datum.B_value : datum.B_value - datum.value : datum.value`, "as": "BplusAminusB"}, // I need to record the adj in id-1 for use in calc for id w. a follow-up window fn !
                {"type": "formula", "expr": `datum.adj`, "as": "adjposneg"},

        {
          "type": "window",
          "params": [null],
          "as": ["B_adj"],
          "ops": ["lag"],
          "fields": ["adj"],
          "sort": {
            "field": ["input_cursor_id"],
            "order": ["ascending"]
          },
          "groupby": ["formula", "age_in"],
          "frame": [-1, 0]
        },
        {
          "type": "formula",
          "expr": "datum.BplusAminusB-datum.B_adj",
          "as": "BplusAminusB"
        },
        {"type": "filter", "expr": "abs(datum.BplusAminusB)>=0.01"},

    ]}, 
    {
      "name": "data_0",
      "source": "data_windowed",
      "transform": [
        {
          "type": "stack",
          "groupby": ["age_in"],
          "field": "BplusAminusB",
          "sort": {"field": ["formula", "input_cursor_id"], "order": ["ascending","descending"]},
          "as": ["value_start", "value_end"],
          "offset": "zero"
        },
        { type: 'formula', 'expr': 'abs(datum.value_end)', as: 'abs_value_end'},
        { type: 'formula', 'expr': 'abs(datum.value_start)', as: 'abs_value_start'},
        /*{
          "type": "filter",
          "expr": "isValid(datum[\"age_in\"]) && isFinite(+datum[\"age_in\"]) && isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])"
        }*/
      ]
    }],
            "encode": {
        "enter": {
          "y": {"scale": "gscale", "field": "posneg", "offset": {"signal": "offset"}},
          "height": {"signal": "cellHeight"},
          "width": {"signal": "width"},
          "stroke": {"value": "#ccc"}
        }
      },
      marks: [


    {
      "name": "marks",
      "type": "rect",
      "style": ["bar"],
      "from": {"data": "data_0"},
      "encode": {
        "update": {
          "stroke": { "signal": `datum.posneg ? (datum.impact > 0 ? 'red' : 'green') : (datum.impact > 0 ? 'green' : 'red')`},
          //"stroke": { "signal": `datum.posneg ? (datum.input_cursor_id == ${input_cursor_id} ? 100 : -100) : (datum.input_cursor_id == ${input_cursor_id} ? -100 : 100)`},
          "strokeOpacity": {"value": 1},
          "tooltip": {
            "signal": "{formula: datum['formula'], value: format(datum.value, ',.2f'), Age: datum['age_in']}"
          },
          "fill": {"scale": "color", "field": "formula"},
          "opacity": {"scale": "opacity", "field": "input_cursor_id"},
          "strokeWidth": {"scale": "strokeWidth", "field": "input_cursor_id"},

          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"age_in: \" + (format(datum[\"age_in\"], \"\")) + \"; value: \" + (format(datum[\"value\"], \"\")) + \"; formula: \" + (isValid(datum[\"formula\"]) ? datum[\"formula\"] : \"\"+datum[\"formula\"])"
          },
          "x": {"scale": "x", "field": "age_in"},
          "width": {"signal": "max(0.25, bandwidth('x'))"},
          "y": {"scale": y, "field": "abs_value_end"},
          "y2": {"scale": y, "field": "abs_value_start"}
        }
      }
    }
  ],
  "scales": [    {
      "name": "y",
      "type": "linear",
      domainMin: '0',// domainMax: '60000', // doesn't generalise
      "domain": {"data": 'data_0', "fields": ["abs_value_start", "abs_value_end"]}, // give this a cushion ??
      "range": [{"signal": "cellHeight"}, 0],
      "nice": false,
      "zero": true,
      
    },
    {
      "name": "x",
      "type": "band",
      "domain": {"data": "data_0", "field": "age_in", "sort": true},
      "range": [0, {"signal": "width"}],
      "paddingInner": 0.2,
      "paddingOuter": 0.1
    },
    { name: 'opacity', type: 'ordinal', "domain": [input_cursor_id-1 , input_cursor_id]  , range: [1,statey ? 0.3 : 1]},
    { name: 'strokeWidth', type: 'ordinal', "domain": [input_cursor_id, input_cursor_id-1]  , range: [0,2]},
{
  "name": "threshold",
  "type": "threshold",
  "domain": [-99999999, 1],
  "range": ["green", "red", "green"]
} 
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      //"title": "age_in",
      //"labelAlign": "center",
      //"labelAngle": -10,
      "labelBaseline": "top",
      "zindex": 0,
      ticks: true,
      values: _.range(15,105,5)
    },
    {
      "scale": y,
      "orient": "left",
      "grid": true,
      gridOpacity: 0.2,
      "title": `${statey ? 'Δ ' : ''}fund value`,
      "labelOverlap": true,
      "tickCount": 5,
      "zindex": 0
    }
    ],
    },
      
{
      "type": "text",
      "from": {"data": "posneg"},
      
      "encode": {
        "enter": {
          "x": {"field": "width", "mult": 0.5},
          "y": {"field": "y", offset:-25},
          "fontSize": {"value": 31},
          opacity: {value: 0.7},
          //"fontWeight": {"value": "bold"},
          "text": {"signal": "datum.datum.posneg ? 'Inflows 💰' : 'Outflows 💸' "},
          "align": {"value": "center"},
          "baseline": {"value": "top"},
          "fill": {"value": "#000"}
        }
      }
    }],
        "legends": [{"fill": "color", "symbolType": "square", "title": "formula"}],
  "config": {
    "legend": {"orient": "right", "layout": {"right": {"anchor": "middle"}}}
  }

    })
viewof shared_y_scale = Inputs.toggle({label: 'shared y scale?', value: true})

md`<br/>`
DOM.download(serialize(data_all2), "pension_savings_calculator.csv", "csv download")
md`<br/>`
DOM.download(new Blob([unpivot.toCSV()], {type: "text/csv"}), "pension_savings_calculator_unpivot.csv", "csv download (pivoted)")
old_in = inputs_history[inputs_history.length-2][changing_i_in]

new_in = inputs_history[inputs_history.length-1][changing_i_in]

mutable changing = ''

changing_i = Array.from(viewof form.children.item(0).children).map((d,i) => ({d, i})).find(e => e.d.textContent.includes(changing)).i

changing_i_in = Object.entries(viewof form.value)[changing_i][0]

formulae = ['empee_contribution_tax_relief', 'empee_contribution_cost', 'emper_contribution', 'fund_growth', 'contribution_charge', 'management_charge']

y = shared_y_scale ? 'y_shared' : 'y'

f = d3.format(',.2f')

mutable statey = false;

mutable inputs_history = [JSON.parse(`{"age_0_in":${q.get('age_0_in') ?? 50},"fund_value_0_in":0,"unit_growth_rate_in":${q.get('unit_growth_rate_in') ?? 0.05},"retirement_age_in":65,"salary_0_in":${q.get('salary_0_in') ?? 50000},"salary_inflation_rate_in":0.02,"empee_contribution_rate_in":0.1,"emper_matching_rate_in":${q.get('emper_matching_rate_in') ?? 1},"contribution_charge_rate_in":0.04,"management_charge_rate_in":0.01,"salary_age_0_in":${q.get('salary_age_0_in') ?? 50},"missed_contribution_age_in":15}`
),JSON.parse(`{"age_0_in":${q.get('age_0_in') ?? 50},"fund_value_0_in":0,"unit_growth_rate_in":${q.get('unit_growth_rate_in') ?? 0.05},"retirement_age_in":65,"salary_0_in":${q.get('salary_0_in') ?? 50000},"salary_inflation_rate_in":0.02,"empee_contribution_rate_in":0.1,"emper_matching_rate_in":${q.get('emper_matching_rate_in') ?? 1},"contribution_charge_rate_in":0.04,"management_charge_rate_in":0.01,"salary_age_0_in":${q.get('salary_age_0_in') ?? 50},"missed_contribution_age_in":15}`
)]

input_cursor_id = inputs_history.length-1

addl_years = 2 // 2

new_value = model.retirement_fund_value(inputs_history[inputs_history.length-1])

old_value = model.retirement_fund_value(inputs_history[inputs_history.length-2])

good_guy = new_value - old_value > 0
viewof shop_application = Inputs.select(['shop-sliders','shop-x-sales-price'], {value:'shop-sliders',label:'Application ❓', width:150})
viewof purchase_price_in = Inputs.range([5,7], {step:0.05, label:'purchase_price', value:5, width:200})
viewof sales_price_in = Inputs.range([5,7], {step:0.05, label:'sales_price', value:6, width:200, disabled: shop_application == 'shop-sliders' ? false : true})
viewof expenses_in = Inputs.range([0,20000], {step:1000, label:'expenses', value:15000, width:200})
viewof units_in = Inputs.range([0,50000], {step:1000, label:'units', value:20000, width:200})
embed(
  calcuvizspec({
    models: modelname == 'shop' ? [model] : [],
    input_cursors: [{sales_price_in,purchase_price_in,expenses_in,units_in}],
    mark: {type: 'text', fontSize:20, fontWeight: 'bold'},
    encodings: {
      y: {name: 'formula', type:'nominal', domain: formulae_not_inputs, axis: {labelFontSize: 60}},
      text: {name: 'value', type: 'quantitative', format:',.0f'},
      color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
    },
    width: 90,// height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.y.sort = ["profit"]; spec.encoding.y.axis = {labelFontSize: 20, labelFontWeight: 'bold'}; return spec;}
}))
embed(
  calcuvizspec({
    models: modelname == 'shop' ? [model] : [],
    input_cursors: [{purchase_price_in,expenses_in,units_in}],
    mark: {type: 'text', fontSize:15, fontWeight: 'bold'},
    encodings: {
      x: {name: 'sales_price_in', type:'quantitative', domain: [5,6,7],  scale: {domain:[4,7]}},
      y: {name: 'formula', type:'nominal', domain: formulae_not_inputs, axis: {labelFontSize: 60}},
      text: {name: 'value', type: 'quantitative', format:',.0f'},
      color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
    },
    width: 200,// height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.y.sort = ["profit"]; spec.encoding.y.axis = {labelFontSize: 15, labelFontWeight: 'bold'}; return spec;}
}))
embed(
  calcuvizspec({
    models: modelname == 'shop' ? [model] : [],
    input_cursors: [{purchase_price_in,expenses_in,units_in}],
    mark: 'bar',
    encodings: {
      x: {name: 'sales_price_in', type:'nominal', domain: _.range(5,7.01,.1), format:',.2f'},
      y: {name: 'value', type: 'quantitative', format:',.0f', independent: true, zero: false},
      color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
      row: {name: 'formula', type:'nominal', domain: formulae_not_inputs, axis: {labelFontSize: 60}},
    },
    width: 230, height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.row.sort = ["profit"]; spec.encoding.row.title = null; spec.encoding.row.header = {labelFontSize: 16, labelFontWeight: 'bold'};  return spec;}
}))
embed(
  calcuvizspec({
    models: modelname == 'shop' ? [model] : [],
    input_cursors: [{purchase_price_in,expenses_in,units_in}],
    mark: {type:'line', point:true},
    encodings: {
      x: {name: 'sales_price_in', type:'quantitative', domain: _.range(5,7.01,.2), format:',.2f'},
      y: {name: 'value', type: 'quantitative', format:',.0f', independent: true, zero: false},
      color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
      row: {name: 'formula', type:'nominal', domain: formulae_not_inputs, axis: {labelFontSize: 60}},
    },
    width: 230, height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.row.sort = ["profit"]; spec.encoding.row.title = null; spec.encoding.row.header = {labelFontSize: 16, labelFontWeight: 'bold'};  return spec;}
}))
Inputs.bind(Inputs.range([5,7], {step:0.20, label:'purchase_price_in', value:5, width:200}), viewof purchase_price_in)
Inputs.bind(Inputs.range([0,20000], {step:1000, label:'expenses_in', value:15000, width:200}), viewof expenses_in)
formulae_not_inputs = Object.values(introspection.cul_functions).filter(d => d.reason == 'definition' && inputs.indexOf(d.name+'_in') == -1).map(d => d.name)

//formulae_not_inputs = //['profit','sales','purchases','expenses']

import {radio} from "@jgrunik/inputs"
embed(
  calcuvizspec({
    models: [modelname == 'shop-demand-curve' ? model : (modelname == 'shop-demand-curve-modular' ? model : {})],
    input_cursors: [{purchase_price_in,expenses_in}],
    mark: 'bar',
    encodings: {
      x: {name: 'sales_price_in', type:'nominal', domain: _.range(5,7.01,.1), format:',.2f'},
      y: {name: 'value', type: 'quantitative', format:',.0f', independent: true, zero: false},
      color: {name: 'formula', type:'nominal', domain: ff, legend:false},
      row: {name: 'formula', type:'nominal', domain: ff},
    },
    width: 230, height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.row.sort = ["profit"]; spec.encoding.row.title = null; spec.encoding.row.header = {labelFontSize: 16, labelFontWeight: 'bold'};  return spec;}
}))
ff = [...formulae_not_inputs, 'units']

embed(
  calcuvizspec({
    models: [modelname == 'shop-demand-curve' ? model : (modelname == 'shop-demand-curve-modular' ? model : {})],
    input_cursors: [{purchase_price_in,expenses_in}],
    mark: {type:'line', point:true},
    encodings: {
      x: {name: 'sales_price_in', type:'quantitative', domain: _.range(5,7.01,.2)},
      y: {name: 'value', type: 'quantitative', format:',.0f', independent: true, zero: false},
      color: {name: 'formula', type:'nominal', domain: ff, legend:false},
      row: {name: 'formula', type:'nominal', domain: ff},
    },
    width: 230, height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.row.sort = ["profit"]; spec.encoding.row.title = null; spec.encoding.row.header = {labelFontSize: 16, labelFontWeight: 'bold'};  return spec;}
}))
/*viewof annual_payment_in = Inputs.range([0,1000], {step: 100, value:1000, label: 'annual_payment_in'})
viewof interest_rate_in = Inputs.range([0,0.5], {step:0.01, label: 'interest_rate_in', value: 0.02})
viewof duration_in = Inputs.range([0,10], {step:1, value:5, label:'duration_in'})*/


// trying out lil-gui controls
function r2(){
  let preset = {}
  
  let savings_options = {
  annual_payment_in: 1000,
  interest_rate: 2,
  duration_in: 5,
    savePreset: () => {
        // save current values to an object
        preset = gui.save();
        loadButton.enable();
    },
    loadPreset: () => {
        gui.load( preset );
    }
}
  const container =DOM.element("div");
  const form=DOM.element("form")   
  //autoPlace is true by default, which will display outside cell,so change to false.
  const gui = new dat.GUI({ autoPlace: false, closeOnTop: true })

  gui.add(savings_options, 'annual_payment_in', 0, 1000).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  gui.add(savings_options, 'interest_rate', -1, 10, 1).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  gui.add(savings_options, 'duration_in', 0, 10, 1).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  gui.add( savings_options, 'savePreset' );

const loadButton = gui.add( savings_options, 'loadPreset' );
loadButton.disable();

   
  form.append(gui.domElement)
  container.value=savings_options
  container.append(form)
  return  container
}
viewof c = r2()
embed(
  calcuvizspec({
    models: modelname == 'savings' ? [model] : [],
    input_cursors: [{...c, interest_rate_in: c.interest_rate/100}],
    mark: {type: 'text', fontSize:15, fontWeight: 'bold'},
    encodings: {
      x: {name: 'formula', type:'nominal', domain: ['balance','interest','deposits','interest_rate'], axis: {labelFontSize: 60}},
      y: {name: 'year_in', type:'nominal', domain: _.range(0,c.duration_in+1,1), sort:'ascending'},
      text: {name: 'value', type: 'quantitative', format:',.2f'},
      color: {name: 'formula', type:'nominal', domain: ['balance','interest','deposits','interest_rate'], legend:false},
    },
  "width": 340, height:160
}))
/*viewof annual_payment_in = Inputs.range([0,1000], {step: 100, value:1000, label: 'annual_payment_in'})
viewof interest_rate_in = Inputs.range([0,0.5], {step:0.01, label: 'interest_rate_in', value: 0.02})
viewof duration_in = Inputs.range([0,10], {step:1, value:5, label:'duration_in'})*/



function r3(){
  let preset = {}
  
  let options = {
  skewness_in: -1,
  step_size: 0.25,
    savePreset: () => {
        // save current values to an object
        preset = gui.save();
        loadButton.enable();
    },
    loadPreset: () => {
        gui.load( preset );
    }
}

  const container =DOM.element("div");
  const form=DOM.element("form")   
  //autoPlace is true by default, which will display outside cell,so change to false.
  const gui = new dat.GUI({ autoPlace: false, closeOnTop: true })
  
  /* 
    !!! IMPORTANT:
    special handle for color,or observable will not observe the change imediately.   
    same with range control
    so you can simplely add .onChange for all control to dispatchEvent again
  */
  //gui.addColor(options,'color').onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  //gui.add(options,'types',['one','two','three'])
  //gui.add(options,'speed',{slow:1,fast:40})
  //gui.add(options,'age',1,40)
  //gui.addFolder('inputs ⚙️')
  gui.add(options, 'skewness_in', -2, 2).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  gui.add(options, 'step_size', 0.15, 0.3).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  gui.add( options, 'savePreset' );

  preset = gui.save();
const loadButton = gui.add( options, 'loadPreset' );
//loadButton.disable();

   
  form.append(gui.domElement)
  container.value=options
  container.append(form)
  return  container
}
viewof sp_padrao_options = r3()
sp_padrao_data = calcudata({
  models:modelname == 'sp-padrao' ? [model] : [],
  input_domains: {x_in: _.range(9,21,sp_padrao_options.step_size), y_in: _.range(-4,7,sp_padrao_options.step_size)},
  input_cursors: [{...sp_padrao_options}], 
  outputs: ['x','y','color'],
  pivot:true
})

//Inputs.table(sp_padrao_data)

embed({
  "data": {
    "name": "projection"
  },
  "mark": {
    "type": "point",
    "tooltip": true,
    "strokeWidth": 5,
    "clip": true
  },
  "encoding": {
    "x": {
      "field": "x_in",
      "type": "quantitative",
      "scale": {
        "zero": false,
        "domain": [
          9,
          21
        ]
      },
      "axis": {
        "labelAngle": 0,
        "orient": "top"
      }
    },
    "y": {
      "field": "y",
      "type": "quantitative",
      "scale": {
        "zero": false,
        "domain": [
          -3.5,
          6.7
        ]
      }
    },
    "detail": {
      "field": "x_in",
      "type": "nominal"
    },
    "shape": {
      "field": "y_in",
      "type": "nominal",
      "scale": {
        "range": [
          "square"
        ]
      }
    },
    "color": {
      "field": "color",
      "type": "nominal",
      "scale": {
        "range": (color_range.includes("🟢🟡🔵") ? ["green","yellow","blue"]
                     : (color_range.includes("xyz") ? ["black",          "#f0f0f0"]
                       : [          "black",          "#f0f0f0"        ]))
      }
    },
    "size": {
      "value": 100
    },
    "opacity": 
     opacity.length ? { "field": "y_in"} : {}
    
  },
  "config": {
    "legend": {
      "disable": true
    }
  },
  "width": 300 * (sp_padrao_size+1),
  "height": 250 * (sp_padrao_size+1),
  "datasets": {'projection':sp_padrao_data}
  })
viewof color_range = Inputs.select(["classic ⚫⚪", "🟢🟡🔵"], {label: "color scheme", value:"classic ⚫⚪"})

viewof opacity = Inputs.checkbox(["opacity"], {label: "effects", value: ["opacity"]})
viewof sp_padrao_size = Inputs.toggle({label:'large'})
// trying out lil-gui controls

function r5(){
  let preset = {}
  
  let options = {
    operation_in: 'union',
    i_in: 10,
    alpha_in: 69,
    beta_in: 38,
    dist_in: 1.88,
    fov_in: 34,
    screen_width_in: 30,
    screen_height_in: 30,
    shape_A_in: 'cube', shape_x_A_in: 0, shape_y_A_in:0, shape_z_A_in:0, shape_size_A_in: 0.4,
    shape_B_in: 'sphere', shape_x_B_in: 0, shape_y_B_in:0.3, shape_z_B_in:0, shape_size_B_in: 0.4,

    savePreset: () => {
      // save current values to an object
      preset = gui.save();
      loadButton.enable();
    },
    loadPreset: () => {
      gui.load( preset );
    }
}

  const container =DOM.element("div");
  const form=DOM.element("form")   
  //autoPlace is true by default, which will display outside cell,so change to false.
  const gui = new dat.GUI({ autoPlace: false, closeOnTop: true })
  
  gui.add(options, 'i_in', 0, 50, 1).name('# raymarching iterations');
  gui.add(options, 'operation_in', ['union', 'intersection', 'B-A', 'A-B']).name('operation?');


  const shape_A = gui.addFolder('shape A');
  shape_A.add(options, 'shape_A_in', ['sphere', 'cube', 'teapot']);
  shape_A.add(options, 'shape_x_A_in', -1, 1, 0.1);
  shape_A.add(options, 'shape_y_A_in', -1, 1, 0.1);
  shape_A.add(options, 'shape_z_A_in', -1, 1, 0.1);
  shape_A.add(options, 'shape_size_A_in', 0, 1, 0.1);


  const shape_B = gui.addFolder('shape B');
  shape_B.add(options, 'shape_B_in', ['sphere', 'cube'/*, 'teapot'*/]);
  shape_B.add(options, 'shape_x_B_in', -1, 1, 0.1);
  shape_B.add(options, 'shape_y_B_in', -1, 1, 0.1);
  shape_B.add(options, 'shape_z_B_in', -1, 1, 0.1);
  shape_B.add(options, 'shape_size_B_in', 0, 1, 0.1);

  gui.onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})));

  gui.add( options, 'savePreset' );

  preset = gui.save();
  const loadButton = gui.add( options, 'loadPreset' );
  //loadButton.disable();

   
  form.append(gui.domElement)
  container.value=options
  container.append(form)
  return  container
}
viewof raymarching_inputs = r5()
viewof alpha_in = Inputs.range([-180,180], {value: 69, step:1, label: "alpha_in"})

viewof beta_in = Inputs.range([-180, 180], {value: 38, step:1, label: "beta_in"})

viewof dist_in = Inputs.range([1, 3], {value: 1.88, step:0.01, label: "dist_in"})

viewof fov_in = Inputs.range([1,180], {value: 34, step:1, label: "fov_in"})

viewof sdf_shape_in = Inputs.select([
    'sphere',
    'cube',
    'cube_with_holes',
    'cube_with_holes2',
    'cube_with_holes3',
    'cube_with_holes4',
    'cube_and_torus',
    'teapot',
], {value: 'cube_with_holes4', label: "sdf_shape", disabled: true})

viewof screen_width_in = Inputs.range([0,150], {value: 30, step:10, label: "screen_width_in"})

viewof screen_height_in = Inputs.range([0,150], {value: 30, step:10, label: "screen_height_in"})



embed(
  calcuvizspec({
    models: modelname == 'raymarching' ? [model] : [],
    input_cursors: [{alpha_in, beta_in, dist_in, fov_in, shape_A_in: 'cube', screen_width_in, screen_height_in,...raymarching_inputs}],
    mark: 'rect', // heatmap
    encodings: {
      x: {'name': 'xq_in', type:'nominal', domain: _.range(0,screen_width_in,1)},
      y: {'name': 'yq_in', type:'nominal', domain: _.range(0,screen_height_in,1)},
      color: {'name': 'value', type:'quantitative'},
      row: {'name': 'formula', domain: ['brightness_2'/* can put more formulae here */]}
    },
    spec_post_process: spec => {
  spec.width = 300;
  spec.height = 250;
  spec.encoding.y.sort = 'descending'
  spec.encoding.x.axis = { grid: false, domain: false, ticks: 0, labels: false }
  spec.encoding.y.axis = { grid: false, domain: false, ticks: 0, labels: false }
  spec.config = {"legend": {"disable": true}}
  spec.resolve = {scale: {color:'independent'}}
  spec.mark.clip = true;
  return spec;
}
  })
)
sdf = require('/models/raymarching/sdf_composed.js')

data_sdf = calcudata({
    models: modelname == 'raymarching' ? [sdf] : [],
  input_cursors: [{z_in: 0, alpha_in, beta_in, dist_in, fov_in, shape_A_in: 'cube', screen_width_in, screen_height_in,...raymarching_inputs, i_in:100}],
  input_domains:  { x_in: _.range(-2,2.001,0.1/4),
  y_in: _.range(-2.5,2.001,0.1/4) }
,
  outputs:['sdf']
})

md`<br/>Plot of sdf_composed sdf @ z=0, iteration 100:`
viewof plot_sdf = Plot.plot({
  //width:400,
  //height:260,
  style: {
    background:'rgba(0,0,0,0)' // not applied to legend
  },
  color: {legend:true, reverse: true, label: `sdf`},
  x: { label:'x_in', tickFormat:d3.format('.2f'), ticks:_.uniq(data_sdf.map(d => d.x_in))},
  y: { label: 'y_in', tickFormat:d3.format('.2f'), ticks:_.uniq(data_sdf.map(d => d.y_in))},

  marks: [
    Plot.contour(data_sdf, { // https://observablehq.com/plot/marks/contour
      x: "x_in",
      y: "y_in",
      fill: "value", interpolate: Plot.interpolateNearest,blur:false,
      interval:0.15,
            stroke: "black"

    })
  ]
})
viewof saas_form = {
  let form = Inputs.form({
      mrr_in: Inputs.range([0, 500000], {label: "monthly revenue (mrr)", step: 5000, value:155000}),
      mrr_growth_in: Inputs.range([-0.3, .8], {label: "mrr growth factor", step: 0.01, value:0.15}),
      vc_1_in: Inputs.range([0, 1e7], {label: "venture capital R1 (vc)", step: 100000, value: 1000000 }),
      vc_2_in: Inputs.range([0, 1e7], {label: "venture capital R2 (vc)", step: 100000, value: 2000000 }),
      salary_per_employee_in: Inputs.range([0, 30000], {label: "salary/employee", step: 1000}),
      employees_0_in: Inputs.range([0, 50], {label: "employees @ start", step: 1, value:26}),
      new_employees_per_month_in: Inputs.range([0, 10], {label: "new employees per mth", step: 1, value:2}),
      rent_in: Inputs.range([0, 300000], {label: "rent", step: 10000, value:200000}),
  }, /*{template}*/);
  return form
}

viewof last_month_in = Inputs.range([0, 36], {label: "last month (0-index)", step: 1, value:17})

viewof npv_i_in = Inputs.range([-0.1, .2], {label: "npv interest rate (monthly!)", step: 0.001, value:0.0})
viewof grid = Inputs.checkbox(["☰ gridlines ☰"], {label: "", value: [""/*"☰ gridlines ☰"*/]})

saas_data = calcudata({
  models:modelname == 'saas-cashflows' ? [model] : [],
  input_domains: {month_in: _.range(-1,last_month_in+1,1)},
  input_cursors: [{...saas_form, npv_i_in, last_month_in}], 
  outputs: formulae_not_inputs,
  //pivot:true
})
md`The NPV over the ${last_month_in+1} months is **€${d3.format(',.2f')(model.npv({...saas_form, last_month_in, npv_i_in, month_in:-1}))}**`
embed({
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "projection"},
  "datasets": {projection:saas_data},
  "height": 200, "width": 230,
  "transform": [{'filter': 'indexof(datum.formula, "_cf") != -1'}],
  "encoding": {
        "x": {"field": "month_in"},
        "y": {"field": "value", "type": "quantitative", "axis": {"grid": grid.length, labelAngle:90}},
  },
  "layer": [
    {
      "transform": [{"filter": "datum.formula != 'total_cf'"}],
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "color": {"field": "formula", "type": "nominal"}
      }
    },
    {
      "transform": [{"filter": "datum.formula == 'total_cf'"}],
      "mark": {"type": "line", "point": true, size:3, "tooltip": true},
      "encoding": {
        "color": {"value": "black"},
        "opacity": {"value": 1},
        "strokeWidth": {"value": 2},
        "y": {"field": "value", "type": "quantitative", "title": "total_cf"}
      }
    }]
}, {theme:'fivethirtyeight'})
embed(
  calcuvizspec({
    models: modelname == 'saas-cashflows' ? [model] : [],
    input_cursors: [{...saas_form, npv_i_in, last_month_in}],
    mark: 'bar',
    encodings: {
      x: {name: 'month_in', type:'nominal', domain: _.range(-1,last_month_in+1,1)},
      y: {name: 'value', type: 'quantitative', format:',.0f', independent: true, zero: false},
      color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
      row: {name: 'formula', type:'nominal', domain: formulae_not_inputs, axis: {labelFontSize: 60}},
    },
    width: 230, height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.row.sort = ["profit"]; spec.encoding.row.title = null; spec.encoding.row.header = {labelFontSize: 16, labelFontWeight: 'bold'};  return spec;}
}))
embed(
  calcuvizspec({
    models: modelname == 'saas-cashflows' ? [model] : [],
    input_cursors: [{...saas_form, npv_i_in, last_month_in}],
    mark: {type:'line', point:true/*, interpolate: 'step-after'*/},
    encodings: {
      x: {name: 'month_in', type:'nominal', domain: _.range(-1,last_month_in+1,1)},
      y: {name: 'value', type: 'quantitative', format:',.0f', independent: true, zero: false},
      color: {name: 'formula', type:'nominal', domain: formulae_not_inputs, legend:false},
      row: {name: 'formula', type:'nominal', domain: formulae_not_inputs, axis: {labelFontSize: 60}},
    },
    width: 230, height:50,
    spec_post_process: spec => { spec.encoding.y.title = null; spec.encoding.row.sort = ["profit"]; spec.encoding.row.title = null; spec.encoding.row.header = {labelFontSize: 16, labelFontWeight: 'bold'};  return spec;}
}))
viewof point = location_ui({value: [-6.475492, 53.694712], label: "Co-ords"})


viewof clip1 = Inputs.toggle({label: "clip1", value: true})
viewof clip2 = Inputs.toggle({label: "clip2", value: true})
import {  location as location_ui } from "@roelandschoukens/inputs"
viewof date_in = Inputs.date({label: "start date", value: new Date(2023,11,22,18,0,0)})
md`**offset days:**`
d = date_fns.addDays(date_in, offset)
viewof fast = Inputs.toggle({label:'fast', value:false})
viewof offset = Scrubber(_.range(0,365,fast? 2 :1), {autoplay: false, delay:fast ? 3 : 60, label:'offset'})


title =  d3.timeFormat('%B')(d)

embed(calcuvizspec({
    models: modelname == 'sunsets' ? [model] : [],
  input_cursors: [{
        lat_in:point[1], lng_in:point[0], obj_in:'sun',
      }],
  mark: {type:'point',size:2000,filled:true,tooltip:true, clip:clip1},
  encodings: {
    y: {grid: false,name: 'altitude_obj', type:'quantitative', scale: {zero: false, domain: [0,1]}},
    x: {grid:false,name: 'azimuth_obj', type: 'quantitative', scale: {zero: false, domain: [0,2]}},
    color: {name: 'date_in', sort:'ascending', type: 'quantitative', legend:true, domain: 
  d3.timeHour.range(
    new Date(d).setHours(clip2 ? 13 : 0),
    new Date(d).setHours(clip2? 22 : 24),
    1
  ),}//_.range(-60,24*60,30).map(d => date_fns.addMinutes(new Date(date_in), d))},
    // row: additional months ..?
  },
  width:500*.6 * (clip1 ? 1 : 0.5),
  height:400*.6 * (clip1 ? 1 : 0.5),
  spec_post_process: s => { s.encoding.color.timeUnit = 'hours'; s.title = title; s.titleFontSize = 40;
                           
                           s.encoding.color.scale = {"scheme": "lightmulti"}; return s }
}), {actions:true, config: {view: {fill:'#fdfaff'}}})
/*viewof annual_payment_in = Inputs.range([0,1000], {step: 100, value:1000, label: 'annual_payment_in'})
viewof interest_rate_in = Inputs.range([0,0.5], {step:0.01, label: 'interest_rate_in', value: 0.02})
viewof duration_in = Inputs.range([0,10], {step:1, value:5, label:'duration_in'})*/



function r4(){
  let preset = {}
  
  let options = {no_points: 10000,
    savePreset: () => {
        // save current values to an object
        preset = gui.save();
        loadButton.enable();
    },
    loadPreset: () => {
        gui.load( preset );
    }
}

  const container =DOM.element("div");
  const form=DOM.element("form")   
  //autoPlace is true by default, which will display outside cell,so change to false.
  const gui = new dat.GUI({ autoPlace: false, closeOnTop: true })
  
  /* 
    !!! IMPORTANT:
    special handle for color,or observable will not observe the change imediately.   
    same with range control
    so you can simplely add .onChange for all control to dispatchEvent again
  */
  //gui.addColor(options,'color').onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  //gui.add(options,'types',['one','two','three'])
  //gui.add(options,'speed',{slow:1,fast:40})
  //gui.add(options,'age',1,40)
  gui.add(options, 'no_points', 0, 20000).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))  
  gui.add( options, 'savePreset' );

  preset = gui.save();
const loadButton = gui.add( options, 'loadPreset' );
//loadButton.disable();

   
  form.append(gui.domElement)
  container.value=options
  container.append(form)
  return  container
}
viewof copacabana_options = r4()
copacabana_data = calcudata({
  models:modelname == 'copacabana' ? [model] : [],
  input_domains: {p_in:_.range(0,copacabana_options.no_points)},
  input_cursors: [{}], 
  outputs: ['x','y','color'],
  pivot:true
})

Inputs.table(copacabana_data)
embed({
  "data": {"name": "projection"},
  "mark": {"type": "point", "tooltip": true, "opacity": 0.7, "strokeWidth": 5},
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "scale": {"zero": false},
      "axis": {"labelAngle": 0, "orient": "top"}
    },
    "y": {"field": "y", "type": "quantitative", "scale": {"zero": false}},
    "color": {"field": "color", "type": "nominal", scale},
    "shape": {"field": "p_in", "type": "nominal"},
    "size": {"value": 50}
  },
  "config": {"legend": {"disable": true}},
  "width": 300*(copacabana_size+1),
  "height": 250*(copacabana_size+1),
  "datasets": {projection:copacabana_data}})
scale = {
  if (copacabana_color_range == 'classic ⚫⚪')
    return ({"range": ["#dddde9","black"]})
  else if (copacabana_color_range == 'colorful 🎨')
    return ({scheme: 'category10'})
  else if (copacabana_color_range == '🟢🟡🔵')
    return ({range: ["green","yellow","blue"]})
  else
    return ({scheme: copacabana_color_range})
}

viewof copacabana_color_range = Inputs.select(["classic ⚫⚪", "colorful 🎨", "🟢🟡🔵", "blues", "browns"], {label: "color scheme", value:"classic ⚫⚪"})

viewof copacabana_size = Inputs.toggle({label:'large'})
viewof actual_interest_rate_co_in = Inputs.range([-1,6], {value:2, label:'actual_interest_rate_rate_co_in', step:1})
savings_rec_data = calcudata({
  models:modelname == 'savings-rec' ? [model] : [],
  input_domains: {year_in:_.range(0,6), actual_interest_rate_co_in: [actual_interest_rate_co_in-1,actual_interest_rate_co_in]},
  input_cursors: [{annual_payment_in:1000}], 
  outputs: ['balance','interest','deposits','interest_rate']
})

viewof savings_actualator = embed(
  {
  "data": {"name": "data"},
  "transform": [
    {
      "window": [{"op": "lag", "field": "value", "as": "A_value"}],
      "groupby": ["formula","year_in"],
      "sort": [{"field": "actual_interest_rate_co_in"}],
      "frame": [-1, 0]
    },
    {"calculate": "datum.value-datum.A_value", "as": "impact"},
  ],
  "encoding": {
    "y": {"field": "year_in", "type": "nominal", "sort": "ascending"},
    "color": {"field": "formula", "type": "nominal"},
    "x": {
      "field": "formula",
      "type": "nominal",
      "axis": {"labelAngle": 0, "orient": "top", "labelLimit": 90}
    }
  },
  layer: [{
            "params": [{"name": "y", "select": { "type": "point", "on": "mouseover", "nearest": true, "encodings": ["y"], "toggle":false}}],
  "mark": {
    "type": "text",
    "fontSize": 15,
    "fontWeight": "bold",
    "tooltip": false
  },
        "transform": [{"filter": `datum.actual_interest_rate_co_in != ${actual_interest_rate_co_in-1}`},
        //{"calculate": "datum.year_in > datum.actual_interest_rate_co_in", "as": "fut"}
        ],

  encoding: {
    "opacity":             {"condition": {"test": "datum.year_in > datum.actual_interest_rate_co_in", "value": 0.5}, "value": 1},
// {"field": "fut", "type": "nominal", "sort": "descending"},
        "text": {
      "field": "value",
      "type": "quantitative",
      "format": ",.2f",
      "axis": {"format": ",.2f"}
    },

  }
  },{
  "mark": {
    "type": "text", dx:20, dy: -10,
    "fontSize": 12,
    "fontWeight": "bold",//
    "tooltip": false
  },
        "transform": [{"filter": `abs(datum.impact) >= 0.00001 && datum.actual_interest_rate_co_in != ${actual_interest_rate_co_in-1}`}],

  encoding: {
            "color": {"value": "green", "condition": {"test": "datum.impact < 0", "value": "red"}},
                "opacity":             {"condition": {"test": "datum.year_in > datum.actual_interest_rate_co_in", "value": 0.5}, "value": 1},

        "text": {
      "field": "impact",
      "type": "quantitative",
      "format": ",.2f",
      "axis": {"format": ",.2f"}
    },

  }
  }],
  "config": {"legend": {"disable": true}},
  "datasets": { data: savings_rec_data
  },
  "width": 340, height:160
})



savings_actualator.addSignalListener("y", (_, r) => { // this didn't improve perf a lot vs event listener: nearly every mousemove is a signal change, I suppose
  //if (observable_world == 0) return;
  viewof actual_interest_rate_co_in.value = r.year_in[0];
  viewof actual_interest_rate_co_in.dispatchEvent(new CustomEvent('input'), {bubbles:true});
}) && 1
input_domains = ({
  x_in: _.range(-3,3.001,0.25),
  y_in: _.range(-3.5,5.001,0.25),
})

data = calcudata({
  models:modelname == 'heart-contour' ? [model] : [],
  input_cursors: [{}],
  input_domains,
  outputs:['f']
})

viewof plot = Plot.plot({
  //width:400,
  //height:260,
  style: {
    background:'rgba(0,0,0,0)' // not applied to legend
  },
  color: {legend, reverse: true, label: `f(x_in,y_in)`},
  x: { label:'x_in', tickFormat:d3.format('.2f'), ticks:_.uniq(data.map(d => d.x_in))},
  y: { label: 'y_in', tickFormat:d3.format('.2f'), ticks:_.uniq(data.map(d => d.y_in))},

  marks: [
    Plot.contour(data, { // https://observablehq.com/plot/marks/contour
      x: "x_in",
      y: "y_in",
      fill: "value", interpolate: Plot.interpolateNearest,blur,
      interval:intervals
    })
  ]
})
viewof legend = Inputs.toggle({value:false, label:'legend'})

viewof intervals = Inputs.range([1,10],{value:4,label: 'contour intervals', step:0.1, width:100})

viewof blur = Inputs.range([0,50],{value:4,label: 'blur', step:0.5, width:100})
import {interval} from '@mootari/range-slider'

viewof form_projectile = {
  let form = Inputs.form({
    angle_in: Inputs.range([-2,2], {value: 1, step:0.002, label: "Angle" }),
    power_in: Inputs.range([0,100], {value: 30, step:0.01, label: "Power" }),
    g_in: Inputs.range([0,3], {value: 1, step:0.01, label: "Gravity factor" }),
    drag_coefficient_in: Inputs.range([-0.1,0.1], {value: 0.01, step:0.001, label: "Air resistance" }),
    t_interval: interval([0,100], {step:1, label: 'time ↔️', color: 'skyblue', value:[0,60], width:200}),
  });

  let state = false;

  form.oninput = () => {console.log('oninput');if (state == false) {mutable inputs_history_projectile = [...mutable inputs_history_projectile, form.value]; state = true;} mutable inputs_history_projectile = [...mutable inputs_history_projectile.slice(0,-1), form.value]}
  form.onchange = () => { console.log('onchange');state = false; mutable inputs_history_projectile[mutable inputs_history_projectile.length-1] = form.value  };

  return form;
}

mutable inputs_history_projectile = [JSON.parse(`{"angle_in":1,"power_in":30,"g_in":1,"drag_coefficient_in":0.01,"t_interval":[0,60]}`
)]
clip = true


// NOTE: adding some hurried customisation and experimentation for fireworks effect! should be cleaner
embed(
  calcuvizspec({
    models: modelname == 'projectile' ? [model] : [],
    input_cursors: inputs_history_projectile,
    mark: {type:'point',clip},
    encodings: {
      detail: {name: 't_in', type: 'quantitative', domain: _.range(form_projectile.t_interval[0],form_projectile.t_interval[1]+0.1,1)},
      //opacity: {name: 't_in', type: 'quantitative', sort:'descending', scale:{domain:[0,100]}, legend:null/*not working => spec_post_process*/, domain: _.range(form_projectile.t_interval[0],form_projectile.t_interval[1]+0.1,1)},
      y: {name: 'y', type:'quantitative', sort: 'ascending', scale:{domain:[-1200,800], sort: 'descending'}},
      x: {name: 'x', grid:false, type: 'quantitative', scale:{domain:[-30,40]}},
      color: {name: 'input_cursor_id', type: 'nominal'},
    },
    width: 300, height: 220,
    spec_post_process: (spec) => {spec.encoding.y.axis = {tickCount:1, grid:true}; spec.datasets.tags = tags;
    spec.encoding.x.axis = {tickCount:3, grid:false};
    spec.transform = [
    {"lookup": "input_cursor_id", "from": {"data": {"name": "tags"}, "key":"i", "fields": ["tag"]}, "as": ["tag"]}
  ];
    spec.encoding.color = {"field": "tag", "type": "nominal", "sort": {"field": "input_cursor_id"}, "title": "scenario"}

    return spec}
}))
tags = [{i:0, tag:'initial'},...inputs_history_projectile.slice(1).map((d,i) => ({i:i+1, tag:Object.entries(d).filter(([k,v]) => v != inputs_history_projectile[i-1+1][k])[0]})).map(d => ({...d,tag:`${d.tag[0]} ${inputs_history_projectile[d.i-1][d.tag[0]]} -> ${d.tag[1]}`}))]
viewof dampener_in = Inputs.range([-1,2], {value: 0.90, step:0.01, label: "dampener factor"})//viewof sales_price_in = Inputs.range([5,7], {step:0.20, label:'sales_price_in', value:6, disabled: true})
viewof dx_in = Inputs.range([-5,5], {value: 3, step:0.5, label: "dx"})

viewof t = interval([0,120], {
  step: 1,
  value: [0,60],
  label: 'time',
  width:200
})

viewof frame_rate = Inputs.range([0,60], {step: 5, value:40, label: 'frame rate'})
bounce_data = calcudata({models:modelname == 'bounce-6' ? [model] : [],
                input_domains: {t_in: _.range(t[0], t[1], 1)},
                input_cursors: [{dx_in,dampener_in}], 
                outputs: ['x','y','dy','bouncing'],
                pivot: true
                })


p5(sketch => {
  //sync; 
  
  sketch.setup = function () {
    sketch.createCanvas(300, 120);
    sketch.frameRate(frame_rate);

  };

  var t = 0, w, h;
  
  sketch.draw = function () {

    sketch.background("#fed");
    sketch.stroke("black");
    if (bounce_data[t] == undefined) t = 0;
    w = 30; h = 30;
    if (bounce_data[t].bouncing) { w = 36; h = 18; }

    sketch.ellipse(100+bounce_data[t].x, 5+100 - bounce_data[t].y, w, h); // poor on move to calcudata but works

    // just for fun
    //if(t>0) { sketch.stroke("red"); sketch.line(bounce_data[t].x, bounce_data[t].y, bounce_data[t-1].x, bounce_data[t-1].y); } 
    
     t++;
    }
})
import {p5} from "@tmcw/p5"
Inputs.table(bounce_data)
viewof fov2 = interval([-3,3], {
  step: 0.005,
  value: [-1-Math.PI/2,1-Math.PI/2],
  label: 'field of view',
  width:200
})

viewof scene = embed(
  calcuvizspec({
    models: modelname == 'raycasting' ? [model] : [],
    input_cursors: [{player_x_in,player_y_in}],
    mark: {type:'bar', point:false, clip:true, tooltip:false},
    encodings: {
      x: {grid: false, name: 'ray_angle_in', type: 'quantitative', domain: [clamped_ray_angle_in, ..._.range(fov2[0],fov2[1],ray_angle_in_step_size)], nice:false, ticks:2},
      color: {name: 'ray_hit_color', type:'nominal', legend:false},
      y: {grid: false, name: 'inverse_ray_length', type: 'quantitative'},
      opacity: {name: 'inverse_ray_length', type: 'quantitative', legend:false},
    },
    width: 400, height:150,
    spec_post_process: spec => {
      spec.encoding.y.scale = {domain:[0,0.3],};
      spec.encoding.x.axis = labels ? {tickCount:2, grid:false} : null
      spec.encoding.y.axis = labels ? {grid:false} : null
      
      spec.params = [{"name": "ray_angle_in", "value": { "ray_angle_in": 0}, "select": { "type": "point", "on": "mouseover", "nearest": true, "encodings": ["x"], toggle:false}}];
      spec.encoding.color.condition = {"test": `datum.ray_angle_in==${clamped_ray_angle_in || 999}`,"value": "red"}
      spec.encoding.opacity.condition = {"test": `datum.ray_angle_in==${clamped_ray_angle_in || 999}`,"value": 1}
      return spec
    }
}))

viewof labels = Inputs.toggle({label: "labels", value: true})
viewof level = embed(
  calcuvizspec({
    models: modelname == 'raycasting' ? [model] : [],
    input_cursors: [{player_x_in,player_y_in,ray_angle_in: clamped_ray_angle_in/*:(fov[0]+fov[1])/2*/
    ,fov_in:fov2}],
    mark: {type:'rect',tooltip:false},
    encodings: {
      x: {grid: false, name: 'level_x_in', type:'nominal', domain: _.range(0,63.1,1)},
      y: {grid: false, name: 'level_y_in', type: 'nominal', domain: _.range(0,63.1,1)},
      color: {name: (observable_world ? 'level_player_ray_fov' : 'level_player'), type: 'quantitative', legend:false},
      //row: {name: 'formula', type:'nominal', domain: ['level', 'level_plus_player', 'level_plus_player_plus_ray']},
    },
    width:280, height:280,
    spec_post_process: spec => {
            spec.params = [{"name": "xy", "select": { "type": "point", "on": "mouseover", "nearest": true, "encodings": ["x", "y"], toggle:false}}];
            let a = spec.encoding.x.axis; spec.encoding.x.axis = {...a, ticks:false, labels:false}
            a = spec.encoding.y.axis; spec.encoding.y.axis = {...a, ticks:false, labels:false}
            spec.encoding.color.scale = {scheme: 'turbo'}
      return spec;
    }
}))


viewof player_x_in = Inputs.range([3,61], {step:1, value:32, label:'player x'})
viewof player_y_in = Inputs.range([3,61], {step:1, value:32, label:'player y'})

//viewof observable_world_v = Inputs.checkbox(["overlay field of view"], {value: true})

observable_world = true
import {viewof keys} from 'd/867e1424e1d093ab'

viewof keys
viewof time_in = Inputs.range([0,keys.length],{step:1,value:keys.length,label:'time_in'})

//time_in = keys.length

fov = model.fov_calcd({time_in,keys_in:keys.map(d => d.key).filter((d,i) => i < time_in), speed_in:3, fov_0_in:[-1-Math.PI/2,1-Math.PI/2]})

fov
keys
md`keys: ${keys.length == 0 ? '⌛' : keys.map(d => d.key).reverse().slice(0,10).map(d => d == 'ArrowUp' ? '⬆️' : d == 'ArrowDown' ? '⬇️' : d == 'ArrowLeft' ? '⬅️' : d == 'ArrowRight' ? '➡️' : d).join(' ')}`
e = model.inverse_ray_length$m.cache
e
Object.keys(e).length
viewof scene2 = embed(
  calcuvizspec({
    models: modelname == 'raycasting-playable' ? [model] : [],
    input_cursors: [{time_in,keys_in:keys.map(d => d.key).filter((d,i) => i < time_in), speed_in:3, fov_0_in:[-1-Math.PI/2,1-Math.PI/2],  }],
    mark: {type:'bar', point:false, clip:true, tooltip:false},
    encodings: {
      x: {grid: false, name: 'ray_angle_in', type: 'quantitative', domain: 
      [clamped_ray_angle_in2, ..._.range(fov[0],fov[1],ray_angle_in_step_size)]
      //[1,1.1,1.2]
      , nice:false, ticks:2},
      //color: {name: 'ray_hit_color', type:'nominal', legend:false},
      y: {grid: false, name: 'inverse_ray_length', type: 'quantitative'},
      opacity: {name: 'inverse_ray_length', type: 'quantitative', legend:false},
    },
    width: 400, height:150,
    spec_post_process: spec => {
      spec.encoding.y.scale = {domain:[0,0.3],};
      spec.encoding.x.axis = labels2 ? {tickCount:2, grid:false} : null
      spec.encoding.y.axis = labels2 ? {grid:false} : null
      
      spec.params = [{"name": "ray_angle_in", "value": { "ray_angle_in": 0}, "select": { "type": "point", "on": "mouseover", "nearest": true, "encodings": ["x"], toggle:false}}];
      //spec.encoding.color.condition = {"test": `datum.ray_angle_in==${clamped_ray_angle_in2 || 999}`,"value": "red"}
      spec.encoding.opacity.condition = {"test": `datum.ray_angle_in==${clamped_ray_angle_in2 || 999}`,"value": 1}
      return spec
    }
}))

viewof labels2 = Inputs.toggle({label: "labels", value: true})
4+4
clamped_ray_angle_in2
raycasting_playable_level_data = calcuvegadata({
  models: modelname == 'raycasting-playable' ? [model] : [],
  spec: raycasting_playable_level_spec.layer[0],
  domains: { level_x_in: _.range(0,63.1,1),level_y_in: _.range(0,63.1,1) },
  input_cursors: [{ }]
})

raycasting_playable_level_player_data = calcuvegadata({
  models: modelname == 'raycasting-playable' ? [model] : [],
  spec: raycasting_playable_level_spec.layer[1],
  domains: {},
  input_cursors: [{time_in,keys_in:keys.map(d => d.key), speed_in:3, fov_0_in:[-1-Math.PI/2,1-Math.PI/2] }]
})

raycasting_playable_level_player_data
raycasting_playable_level_spec = ({
  //"data": {"name": "data"},
  "datasets": { data: raycasting_playable_level_data0,
                player: raycasting_playable_level_player_data0 },
  layer: [{
    "data": {"name": "data"},
    "mark": {"type": "rect", "tooltip": false},
    "encoding": {
      "x": {
        "field": "level_x_in",
        "type": "nominal",
        "scale": {"rangeStep": 12},
        "axis": {"grid": false, "ticks": false, "labels": false}
      },
      "y": {
        "field": "level_y_in",
        "type": "nominal",
        "scale": {"rangeStep": 12},
        "axis": {"grid": false, "ticks": false, "labels": false}
      },
      "color": {
        "field": "level",
        "type": "quantitative",
        "scale": {"scheme": "turbo"}
      }
    },
  },
  {
    "data": {"name": "player"},
    mark: 'text',
    encoding: {
      x: {field:'player_x_calcd'},
      y: {field:'player_y_calcd'},
      text: {value:'🧑'},
    }
  }],
  "config": {"legend": {"disable": true}},
      width:280, height:280,
})

mutable raycasting_playable_level_data0 = [] // includes data in spec for when I Open in Vega Editor
mutable raycasting_playable_level_player_data0 = [] 

htl.html`<button onclick=${() => {mutable raycasting_playable_level_data0 = raycasting_playable_level_data; mutable raycasting_playable_level_player_data0 = raycasting_playable_level_player_data}}>LEVEL insert data -> vega editor (dev)</button>`
viewof raycasting_playable_level_viz = embed(raycasting_playable_level_spec)

{
  raycasting_playable_level_viz.data("data", raycasting_playable_level_data).resize().run();
}
{
  console.log(Object.entries(model.inverse_ray_length$m.cache).length)
  console.log(Object.entries(model.player_x_raw$m.cache).length)
  raycasting_playable_level_viz.data("player", raycasting_playable_level_player_data).resize().run();
}
viewof observable_world_v2 = Inputs.checkbox(["overlay field of view"], {value: true})

observable_world2 = observable_world_v2.length
viewof climate_sensitivity_in = Inputs.range([0,5], {step: 0.2, value:3, label: 'climate_sensitivity_in'})
viewof drawdown_factor_in = Inputs.range([0,0.001*2], {step: 0.001/5, value:0.001, label: 'drawdown_factor_in'})

md`**45%** emissions absorption currently hardcoded`
viewof emissions = embed(
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 350,
  "height": 200 ,//+ 0* climate_sensitivity_in,
  "padding": 5,
  "data": [
    // using climate_results makes this responsive but resets visual on refresh
    {"name": "results2", "values": [{"year_in":2100, "temperature_delta":1.23 /*BAD*/}]},
    {
      "name": "table",
      "values": [
        {"category": 1960, "amount": 4},
        {"category": 1990, "amount": 8},
        {"category": 2020, "amount": 28},
        {"category": 2025, "amount": 29},
        {"category": 2030, "amount": 30},
        {"category": 2035, "amount": 32},
        {"category": 2040, "amount": 33},
        {"category": 2045, "amount": 34},
        {"category": 2050, "amount": 38},
        {"category": 2100, "amount": 90},
        {"category": 2150, "amount": 5}
      ]
    },
    {
      "name": "seq",
      "transform": [
        {"type": "sequence", "start": 1960, "stop": 2200, "step": 5},
        {"type": "filter", "expr": "datum.data >= bau.category"}
      ]
    },
    {
      "name": "seq2",
      "transform": [
        {"type": "sequence", "start": 1960, "stop": 2200, "step": 5},
        {
          "type": "lookup",
          "from": "table",
          "key": "category",
          "fields": ["data"],
          "as": ["table"]
        },
        {"type": "filter", "expr": "datum.table != null"},
        {"type": "window", "ops": ["lag"], "fields": ["table"]},
        {"type": "filter", "expr": "datum.lag_table != null"},
        {
          "type": "formula",
          "expr": "datum.lag_table.amount+(datum.table.amount-datum.lag_table.amount)*(datum.table.category-datum.lag_table.category)",
          "as": "interpolated"
        }
      ]
    },
    {
      "name": "interpolated",
      "transform": [
        {"type": "sequence", "start": 1960, "stop": 2200, "step": 1},
        {
          "type": "lookup",
          "from": "table",
          "key": "category",
          "fields": ["data"],
          "values": ["category"],
          "as": ["group"]
        },
        {"type": "window", "ops": ["next_value"], "fields": ["group"]},
        {
          "type": "lookup",
          "from": "seq2",
          "key": "data",
          "fields": ["next_value_group"],
          "as": ["group"]
        },
        {"type": "filter", "expr": "datum.group != null"},
        {
          "type": "formula",
          "expr": "max(0,datum.data <= bau.category ? datum.group.lag_table.amount+(datum.group.table.amount-datum.group.lag_table.amount)*(datum.data-datum.group.lag_table.category)/(datum.group.table.category-datum.group.lag_table.category) : bau.amount+(0-bau.amount)*(datum.data-bau.category)/(zero_category-bau.category))",
          "as": "interpolated"
        },
        {
          "type": "formula",
          "expr": "datum.data < 2020 ? 'old' : 'future'",
          "as": "old"
        }
      ]
    },
    {
      "name": "interpolated_baseline",
      "transform": [
        {"type": "sequence", "start": 1960, "stop": 2200, "step": 1},
        {
          "type": "lookup",
          "from": "table",
          "key": "category",
          "fields": ["data"],
          "values": ["category"],
          "as": ["group"]
        },
        {"type": "window", "ops": ["next_value"], "fields": ["group"]},
        {
          "type": "lookup",
          "from": "seq2",
          "key": "data",
          "fields": ["next_value_group"],
          "as": ["group"]
        },
        {"type": "filter", "expr": "datum.group != null"},
        {
          "type": "formula",
          "expr": "datum.group.lag_table.amount+(datum.group.table.amount-datum.group.lag_table.amount)*(datum.data-datum.group.lag_table.category)/(datum.group.table.category-datum.group.lag_table.category)",
          "as": "interpolated"
        }
      ]
    },
    {
      "name": "seq3",
      "transform": [
        {"type": "sequence", "start": 1960, "stop": 2200, "step": 5},
        {
          "type": "lookup",
          "from": "seq2",
          "key": "data",
          "fields": ["data"],
          "as": ["table"]
        },
        {
          "type": "window",
          "ops": ["first_value"],
          "sort": {"field": "table"},
          "fields": ["table"]
        },
        {
          "type": "formula",
          "as": "aaa",
          "expr": "isValid(datum.table) ?  0 :  datum.lag_table"
        }
      ]
    },
    {
      "name": "table-first",
      "source": "table",
      "transform": [{"type": "filter", "expr": "datum.category == 1960"}]
    },
    {
      "name": "table-baus",
      "source": "table",
      "transform": [
        {"type": "filter", "expr": "datum.category <= bau.category"}
      ]
    }
  ],
  "signals": [
    {
      "name": "bau",
      "value": {"category": 2030, "amount": 30},
      "on": [{"events": "@baus:mouseover", "update": "datum"}]
    },
    {
      "name": "zero_category",
      "update": "max(zero_category,bau.category)",
      "value": 2050,
      "on": [
        {"events": "@zeros:mouseover", "update": "max(datum.data,bau.category)"}
      ]
    },
    {
      "name": "history",
      "value": "2030|2050",
      "on": [
        {
          "events": "@baus:mouseover,@zeros:mouseover",
          "update": "history+','+bau.category+'|'+zero_category"
        }
      ]
    },
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "zero": false,
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    },
    {
      "name": "emissions",
      "type": "ordinal",
      "domain": ["old", "future"],
      "range": ["darkgrey", "steelblue"]
    },
    {
      "name": "bemissions",
      "type": "ordinal",
      "domain": ["old", "future"],
      "range": ["brown", "blue"]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "format": ".0f",
      "labelFontSize": 20,
      "tickCount": 6
    },
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "interpolated_baseline"},
      "encode": {
        "enter": {"fill": {"value": "pink"}, "opacity": {"value": 0.1}},
        "update": {
          "x": {"scale": "xscale", "field": "data"},
          "width": {"value": 10},
          "y": {"scale": "yscale", "field": "interpolated"},
          "y2": {"scale": "yscale", "value": 0}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "interpolated"},
      "encode": {
        "enter": {
          "fill": {"scale": "emissions", "field": "old"},
          "opacity": {"value": 0.5}
        },
        "update": {
          "x": {"scale": "xscale", "field": "data"},
          "width": {"value": 9},
          "y": {"scale": "yscale", "field": "interpolated"},
          "y2": {"scale": "yscale", "value": 0}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0},
          "opacity": {"value": 0.1}
        },
        "update": {"fill": {"value": "steelblue"}}
      }
    },
    {
      "type": "line",
      "from": {"data": "table-baus"},
      "encode": {
        "enter": {
          "strokeWidth": {"value": 5},
          "stroke": {"value": "black"},
          "interpolate": {"value": "linear"},
          "strokeCap": {"value": "round"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "category", "band": 1},
          "y": {"scale": "yscale", "field": "amount"}
        }
      }
    },
    {
      "type": "rule",
      "encode": {
        "enter": {"strokeWidth": {"value": 5}, "strokeCap": {"value": "round"}},
        "update": {
          "x": {"scale": "xscale", "signal": "bau.category", "band": 1},
          "y": {"scale": "yscale", "signal": "bau.amount", "offset": 0},
          "x2": {"scale": "xscale", "signal": "zero_category", "band": 1},
          "y2": {"scale": "yscale", "value": 0, "offset": 0}
        }
      }
    },
    {
      "type": "rule",
      "encode": {
        "enter": {"strokeWidth": {"value": 5}, "strokeCap": {"value": "round"}},
        "update": {
          "x2": {"scale": "xscale", "value": 2200, "band": 1},
          "x": {"scale": "xscale", "signal": "zero_category", "band": 1},
          "y": {"scale": "yscale", "value": 0, "offset": 0}
        }
      }
    },
    {
      "type": "rule",
      "from": {"data": "table-first"},
      "encode": {
        "enter": {"strokeWidth": {"value": 5}, "strokeCap": {"value": "round"}},
        "update": {
          "x2": {"scale": "xscale", "field": "category", "band": 1},
          "x": {"scale": "xscale", "field": "category", "band": 0},
          "y": {"scale": "yscale", "field": "amount", "offset": 0}
        }
      }
    },
    {
      "type": "symbol",
      "name": "zeros",
      "from": {"data": "seq"},
      "encode": {
        "enter": {
          "size": {"value": 500},
          "fill": {"value": "lightblue"},
          "stroke": {"value": "black"},
          "shape": {"value": "triangle"},
          "opacity": {"value": 0.8}
        },
        "update": {
          "x": {"scale": "xscale", "field": "data", "band": 1},
          "y": {"scale": "yscale", "value": "0", "offset": 0}
        }
      }
    },
    {
      "type": "text",
      "name": "results",
      "from": {"data": "results2"},
      "encode": {
        "enter": {
          "fontSize": {"value": 50},
          "fill": {"value": "red"},
          "stroke": {"value": "black"},
          "align": {"value": "center"},
          "fontWeight": {"value": "bold"},
          "text": {"signal": "datum.temperature_delta == 999 ? '-' : 'max Δ T ≈ ' + format(datum.temperature_delta, ',.2f')"},
        },
        "update": {
          //"x": {"scale": "xscale", "field": "year_in", "band": 1,},
          "x": {"scale": "xscale", "value": 2075},
          "y": {"scale": "yscale", "value": "-30", "offset": 0}
        }
      }
    },
    {
      "type": "symbol",
      "name": "baus",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "size": {"value": 500},
          "fill": {"value": "pink"},
          "stroke": {"value": "black"},
          "shape": {"value": "square"},
          "opacity": {"value": 0.8}
        },
        "update": {
          "x": {"scale": "xscale", "field": "category", "band": 1},
          "y": {"scale": "yscale", "field": "amount", "offset": 0}
        }
      }
    }
  ]
}
)



//viewof emissions = Inputs.input([])

mutable emissions_ = emissions.data('interpolated')
climate1 = calcudata({
  models: modelname == 'simple-climate' ? [model] : [],
  input_cursors: [{emissions_table_in: emissions_.map(d => ({year_in:d.data, emissions_rate:d.interpolated})),climate_sensitivity_in,ppm_to_GtC_in:2.3,drawdown_factor_in}],
  input_domains: {
    year_in: [2015,2016,..._.range(2020,2151,10)],
  },
  outputs: ['emissions_rate','temperature_delta', 'CO2_concentration', 'concentration_factor']
})

// "gradual calculation"
// this should be calcd in-model
Tmax_year_1 = d3.greatest(climate1, d => d.value).year_in

climate2 = calcudata({
  models: modelname == 'simple-climate' ? [model] : [],
  input_cursors: [{emissions_table_in: emissions_.map(d => ({year_in:d.data, emissions_rate:d.interpolated})),climate_sensitivity_in,ppm_to_GtC_in:2.3,drawdown_factor_in}],
  input_domains: {
    year_in: _.range(Math.max(2015,Tmax_year_1-10),Tmax_year_1+11,1),
  },
  outputs: ['temperature_delta']
})

Tmax_year_2 = d3.greatest(climate2, d => d.value)//.year_in

// used in layer in table viz
climate_Tmax = calcudata({
  models: modelname == 'simple-climate' ? [model] : [],
  input_cursors: [{emissions_table_in: emissions_.map(d => ({year_in:d.data, emissions_rate:d.interpolated})),climate_sensitivity_in,ppm_to_GtC_in:2.3,drawdown_factor_in,
  year_in: Tmax_year_2.year_in}],
  input_domains: {
    //year_in: [2015,2016,..._.range(2020,2151,10)],
  },
  outputs: ['emissions_rate','temperature_delta', 'CO2_concentration', 'concentration_factor']
})



embed({
      width:380, height:340,
  "data": {"name": "data"},

  "encoding": {
    "y": {
      "field": "year_in",
      "type": "quantitative",
      "scale": {"zero": false},
      "sort": "ascending"
    },
    "x": {
      "field": "formula",
      "type": "nominal",
      "axis": {"labelAngle": 0, "orient": "top", "labelLimit": 90}
    },
    "color": {"field": "formula", "type": "nominal"},
    "opacity": {"value": 0.7},
    "text": {
      "field": "value",
      "type": "quantitative",
      "format": ".2f",
      "axis": {"format": ".2f"}
    }
  },
  "layer": [  
  {
    "transform": [{"filter": "datum.year_in == "+Tmax_year_2.year_in}],
    "mark": {
      "type": "text",
      "fontSize": 15,
      "fontWeight": "bold",
      "tooltip": true,
      //"dx": 1, "dy": 1
    },
    "encoding": {//"color": {"value": "red"},
    "opacity": {"value":1}}
  },
  {
    "transform": [{"filter": "datum.year_in <= 2100"}],
    "mark": {
      "type": "text",
      "fontSize": 16,
      "fontWeight": "bold",
      "tooltip": true
    }
  },
  ],
  "config": {"legend": {"disable": true}},
  "datasets": {
    "data": [...climate1,...climate_Tmax]
  }
})
update_climate = (name, value) => {
  if (value != undefined)
  mutable emissions_ = value;

  /*emissions.change('results2',emissions.insert('results2',calcudata({
    models: modelname == 'simple-climate' ? [model] : [],
    input_domains: {year_in: [2015,2100]},
    input_cursors: [{emissions_table_in: emissions_.map(d => ({year_in:d.data, emissions_rate:d.interpolated})),climate_sensitivity_in,ppm_to_GtC_in:2.3,drawdown_factor_in}],
    outputs: ['temperature_delta'],
    pivot:true
  }).map(({year_in,temperature_delta}) => ({year_in,temperature_delta})))).remove('results2',d => true).run()*/
  emissions.data('results2', 
    /*calcudata({
      models: modelname == 'simple-climate' ? [model] : [],
      input_domains: {year_in: [2100]}, // should show more, to demo drawdown
      input_cursors: [{emissions_table_in: emissions_.map(d => ({year_in:d.data, emissions_rate:d.interpolated})),climate_sensitivity_in,ppm_to_GtC_in:2.3,drawdown_factor_in}],
      outputs: ['temperature_delta'],
      pivot:true
    }).map(({year_in,temperature_delta}) => ({year_in,temperature_delta}))*/
    [Tmax_year_2].map(d => ({...d, temperature_delta:d.value}))
  ).run()
}
{emissions.addDataListener('interpolated', update_climate) };
{
  drawdown_factor_in;
  climate_sensitivity_in; // force recalc/coordination on input change
  update_climate()
  //emissions.insert('interpolated',[]).run()
}

calculang model

default_example_id = "shop"

show_hidden = false

Savings Calculator 🪙🪙,Savings Actual-ator 🔃,SaaS Cashflows 💵🌊,Loan Checker 🕵️,Pension Calculator 🚧🧓 Sunsets 🌞,Raycasting 3d worlds 🔫,Projectiles 🪨,Simple Climate 🌍🌡️ Heart Contours 💗,Ferny Maths 🌿,Function from São Paulo 🌇🎨,Flower 🌸,Falling Snowflakes ❄️ Shop Modelling,Shop Model Demand Curve I,Shop Model Demand Curve II,Shop Stressed Sales Fizz Buzz,Maze Money 🕸💰,Leap Year Calculator ⌚,Year Remaining 🕒,You 👉 be the finance minister 🎩

buy low sell high = 📈

cul_resources = Array(1) ["/models/shop-nomemo.cul.js"]

output = Array(1) [Promise]

calculang = Array(1) ["// shop model, formulae:\nexport const sales = () =…ts_in;\nexport const expenses = () => expenses_in;"]

fff = Array(1) ["***[./shop.cul.js](/models/shop.cul.js) -> [js](/m…() =>\n sales() - purchases() - expenses();\n\n~~~\n"]

inputs ⚙️ expenses_in, purchase_price_in, sales_price_in, units_in

not_inputs = Array(0) []

formulae 🟰

model relationships ♻️

./shop.cul.js -> js

// shop model, formulae:
sales = () =>
  units() * sales_price();

purchases = () =>
  units() * purchase_price();

profit = () =>
  sales() - purchases() - expenses();

🤫

unhide?

export constsinputs

options = Array(0) []

🫶

📝 calculang source 💬✨ JS/ESM output ✨

cul_js = "📝 calculang source 💬"

cul_js_cul = true

see memo? 💀

nomemo

calculang_source_nomemo = Array(1) ["nomemo"]

📺 application(s)

calcudonuts 🍩💫 on OHQ

  import {Tangle as Tangle} from "@declann/colored-tangle"

viewof i_start = EventTarget {value: 1}

i_start = 1

starting i:

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

Is it a leap year?

viewof leap_year_start = EventTarget {value: 1990}

leap_year_start = 1990

starting year: 1,990

  import {calcuvegadata as calcuvegadata} from "baafa4b071a5b66a"

leap_year_spec = Object {background: "white", data: Object, datasets: Object, vconcat: Array(2)}

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

mutable leap_year_data0 = Mutable {}

leap_year_data0 = Array(0) []

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

2

frame_in = 2

speed

speed_in = 3

starfield_spec = Object {background: "black", data: Object, datasets: Object, height: 300, width: 300, layer: Array(2)}

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

mutable starfield_data0 = Mutable {}

starfield_data0 = Array(0) []

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

A first maze dynamic programming puzzle solution with calculang.

For another DP solution, see an earlier zapis bracket counting problem (and formulae).

In this puzzle, we need to walk through a maze collecting some value (suppose money!); we want to maximize value collected before we complete the maze. We can’t walk backwards or away from the end point!

For an Excel solution I built this against and awesome video, watch this awesome talk by Felienne Hermans. I punch more characters than in the spreadsheet, but I’ll posit that at least these characters have meaning :)

maze_in = Array(15) [Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15), Array(15)]

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

Snowflakes simulation based on p5.js simulator by Aatish Bhatia.

See also: how the snowflakes fall 🌨️

Hit the Play button to let the snowflakes fall!

# snowflakes

num_snowflakes = 20

angular speed (w_in)

w_in = 0.6

height

height_in = 200

0

f_in = 0

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

🔍 snowflake dynamics 👀

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

chosen extra ❄️

snowflake_in = 10

# petals

petal_num_in = 7

petal size

petal_size_in = 30

petals roundy/spikiness

petals_roundy_spikiness_in = 0.5

big?

flower_big = false

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

loan validator 🕵️ (dev 📓)

from start of todaystart of tomorrow

timing_in = "start of today"

TypeError: model.fractionLeftInYear is not a function

OJS Error

TypeError: model.fractionLeftInYear is not a function

TypeError: model.fractionLeftInYear is not a function

OJS Error

TypeError: model.fractionLeftInYear is not a function

Inspired by @year_remaining

(using older model code e.g. tax config) You 👉 be the finance minister 🎩

Newer (DEV) Visual on OHQ

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

todo histogram

⚠️ caveats, information and open issues on ObservableHQ version apply here too ⚠️ This needs a lot of screen real-estate!, so works poorly on mobile

Pension calculations are full of sensitive big numbers. Drag and hold things about to visualize impact of changes on fund build-up!

inputs ⚙️

empee = employee; emper = employer

persist interaction 🔨

s = false

starting age

retirement age

starting fund value

empee contribution as % of salary

emper matching rate

salary

salary ref. age

salary growth rate

investment growth rate

contribution charge rate

management charge rate

Missed contribution (scenario)

form = Object {age_0_in: 50, retirement_age_in: 65, fund_value_0_in: 0, empee_contribution_rate_in: 0.1, emper_matching_rate_in: 1, salary_0_in: 50000, salary_age_0_in: 50, salary_inflation_rate_in: 0.02, unit_growth_rate_in: 0.05, contribution_charge_rate_in: 0.04, management_charge_rate_in: 0.01, missed_contribution_age_in: 15}

RuntimeError: model.retirement_fund_value is not a function

OJS Runtime Error

model.retirement_fund_value is not a function

RuntimeError: model.retirement_fund_value is not a function

OJS Runtime Error

model.retirement_fund_value is not a function

TypeError: Cannot read properties of undefined (reading 'filter')

OJS Error

TypeError: Cannot read properties of undefined (reading 'filter')

RuntimeError: Cannot read properties of undefined (reading 'filter')

OJS Runtime Error

Cannot read properties of undefined (reading 'filter')

shared y scale?

shared_y_scale = true

RuntimeError: Cannot read properties of undefined (reading 'filter')

OJS Runtime Error

Cannot read properties of undefined (reading 'filter')

RuntimeError: Cannot read properties of undefined (reading 'filter')

OJS Runtime Error

Cannot read properties of undefined (reading 'filter')

old_in = 50

new_in = 50

mutable changing = Mutable {}

changing = ""

changing_i = 0

changing_i_in = "age_0_in"

formulae = Array(6) ["empee_contribution_tax_relief", "empee_contribution_cost", "emper_contribution", "fund_growth", "contribution_charge", "management_charge"]

y = "y_shared"

f = ƒ(t)

mutable statey = Mutable {}

statey = false

mutable inputs_history = Mutable {}

inputs_history = Array(2) [Object, Object]

input_cursor_id = 1

addl_years = 2

TypeError: model.retirement_fund_value is not a function

OJS Error

TypeError: model.retirement_fund_value is not a function

TypeError: model.retirement_fund_value is not a function

OJS Error

TypeError: model.retirement_fund_value is not a function

RuntimeError: model.retirement_fund_value is not a function

OJS Runtime Error

model.retirement_fund_value is not a function

Application ❓ shop-slidersshop-x-sales-price

shop_application = "shop-sliders"

inputs ⚙️

purchase_price

purchase_price_in = 5

sales_price

sales_price_in = 6

expenses

expenses_in = 15000

units

units_in = 20000

👀

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

inputs ⚙️

👀

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

📊

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

📈

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

inputs ⚙️

purchase_price_in

expenses_in

formulae_not_inputs = Array(3) ["sales", "purchases", "profit"]

  import {radio as radio} from "@jgrunik/inputs"

📊

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

📈

ff = Array(4) ["sales", "purchases", "profit", "units"]

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

No application here.

This example is just to show that a model can redefine a formula in terms of it’s original definition.²

A calculang model need not even know how it can be stressed - stress and other functionality can be defined and managed independently.

r2 = ƒ()

annual_payment_in

interest_rate

duration_in

c = Object {annual_payment_in: 1000, interest_rate: 2, duration_in: 5, savePreset: ƒ(), loadPreset: ƒ()}

👀

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

r3 = ƒ()

skewness_in

step_size

sp_padrao_options = Object {skewness_in: -1, step_size: 0.25, savePreset: ƒ(), loadPreset: ƒ()}

👀

sp_padrao_data = undefined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

color scheme classic ⚫⚪🟢🟡🔵

color_range = "classic ⚫⚪"

effects

opacity

opacity = Array(1) ["opacity"]

large

sp_padrao_size = false

Originally posted to ObservableHQ

calculang and a fern 🌿

calculang and a fern 🌿 10 points at a time 🔎

See also teapot and more objects, older version but more responsive due to loops! old draft

Need to make more views of objects available in later model.

You need to manually increase # raymarching iterations to approx 18 (keyboard up arrows works), to keep responsiveness.

r5 = ƒ()

# raymarching iterations

operation?

unionintersectionB-AA-B

union

shape_A_in

spherecubeteapot

cube

shape_x_A_in

shape_y_A_in

shape_z_A_in

shape_size_A_in

shape_B_in

spherecube

sphere

shape_x_B_in

shape_y_B_in

shape_z_B_in

shape_size_B_in

raymarching_inputs = Object {operation_in: "union", i_in: 10, alpha_in: 69, beta_in: 38, dist_in: 1.88, fov_in: 34, screen_width_in: 30, screen_height_in: 30, shape_A_in: "cube", shape_x_A_in: 0, shape_y_A_in: 0, shape_z_A_in: 0, shape_size_A_in: 0.4, shape_B_in: "sphere", shape_x_B_in: 0, shape_y_B_in: 0.3, shape_z_B_in: 0, shape_size_B_in: 0.4, savePreset: ƒ(), loadPreset: ƒ()}

alpha_in

alpha_in = 69

beta_in

beta_in = 38

dist_in

dist_in = 1.88

fov_in

fov_in = 34

sdf_shape spherecubecube_with_holescube_with_holes2cube_with_holes3cube_with_holes4cube_and_torusteapot

sdf_shape_in = "cube_with_holes4"

screen_width_in

screen_width_in = 30

screen_height_in

screen_height_in = 30

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

sdf = Module {sdf_A$m: ƒ(key), sdf_A: ƒ(a), sdf_B$m: ƒ(key), sdf_B: ƒ(a), operation$m: ƒ(key), operation: ƒ(a), sdf$m: ƒ(key), sdf: ƒ(a), Symbol(Symbol.toStringTag): "Module"}

data_sdf = undefined

Plot of sdf_composed sdf @ z=0, iteration 100:

TypeError: Cannot read properties of undefined (reading 'map')

OJS Error

TypeError: Cannot read properties of undefined (reading 'map')

RuntimeError: Cannot read properties of undefined (reading 'map')

OJS Runtime Error

Cannot read properties of undefined (reading 'map')

inputs ⚙️

monthly revenue (mrr)

mrr growth factor

venture capital R1 (vc)

venture capital R2 (vc)

salary/employee

employees @ start

new employees per mth

rent

saas_form = Object {mrr_in: 155000, mrr_growth_in: 0.15, vc_1_in: 1000000, vc_2_in: 2000000, salary_per_employee_in: 15000, employees_0_in: 26, new_employees_per_month_in: 2, rent_in: 200000}

last month (0-index)

last_month_in = 17

npv interest rate (monthly!)

npv_i_in = 0

👀

☰ gridlines ☰

grid = Array(0) []

saas_data = undefined

TypeError: model.npv is not a function

OJS Error

TypeError: model.npv is not a function

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

📊

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

📈

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

Orginally posted @ some SaaS cashflows 💵🌊

For a different interaction with a cashflow model, check the pension calculator

controls 🕹️

Co-ords

6.5° W, 53.7° N

point = Array(2) [-6.475492, 53.694712]

clip1

clip1 = true

clip2

clip2 = true

  import {location as location_ui} from "@roelandschoukens/inputs"

start date

date_in = 2023-12-22

offset days:

d = 2023-12-22

fast

fast = false

0

offset = 0

title = "December"

RuntimeError: calcuvizspec is not defined

OJS Runtime Error

calcuvizspec is not defined

Originally posted @ Sunsets 🌞🌞

[Tax calculator impacts interaction 📈🔨 (Ireland & 🚧)] (https://observablehq.com/@declann/tax-calculator-impacts-interaction-ireland?collection=@declann/calculang)

Function from Copacabana 🎶🏖🌊🩴

(below is broken for now!)

r4 = ƒ()

no_points

copacabana_options = Object {no_points: 10000, savePreset: ƒ(), loadPreset: ƒ()}

👀

copacabana_data = undefined

TypeError: Cannot read properties of undefined (reading 'columns')

OJS Error

TypeError: Cannot read properties of undefined (reading 'columns')

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

scale = Object {range: Array(2)}

color scheme classic ⚫⚪colorful 🎨🟢🟡🔵bluesbrowns

copacabana_color_range = "classic ⚫⚪"

large

copacabana_size = false

Originally posted to ObservableHQ

inputs ⚙️

actual_interest_rate_rate_co_in

actual_interest_rate_co_in = 2

👀

highlight for actual-updates 🪄

savings_rec_data = undefined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

contour visual of f(x_in,y_in):

input_domains = Object {x_in: Array(25), y_in: Array(35)}

data = undefined

TypeError: Cannot read properties of undefined (reading 'map')

OJS Error

TypeError: Cannot read properties of undefined (reading 'map')

RuntimeError: Cannot read properties of undefined (reading 'map')

OJS Runtime Error

Cannot read properties of undefined (reading 'map')

inputs ⚙️

legend

legend = false

contour intervals

intervals = 4

blur

blur = 4

See also Hearty maths with calculang ❤️

inputs ⚙️

  import {interval as interval} from "@mootari/range-slider"

Angle

Power

Gravity factor

Air resistance

time ↔️

0 … 60

form_projectile = Object {angle_in: 1, power_in: 30, g_in: 1, drag_coefficient_in: 0.01, t_interval: Array(2)}

mutable inputs_history_projectile = Mutable {}

inputs_history_projectile = Array(1) [Object]

Projectile Path 🧭

clip = true

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

tags = Array(1) [Object]

inputs ⚙️

dampener factor

dampener_in = 0.9

dx

dx_in = 3

time

0 … 60

t = Array(2) [0, 60]

frame rate

frame_rate = 40

🎥

bounce_data = undefined

  import {p5 as p5} from "@tmcw/p5"

👀

TypeError: Cannot read properties of undefined (reading 'columns')

OJS Error

TypeError: Cannot read properties of undefined (reading 'columns')

I must optimise ray calcs according to approach in “Make your own raycaster part 1” on 3Dsage YT

Scrub the field of view interval below to ‘look around’

Click on bars to highlight rays (note 2-way co-ordination).

field of view

-2.57 … -0.57

fov2 = Array(2) [-2.57, -0.57]

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

labels

labels = true

🗺️ level

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

player x

player_x_in = 32

player y

player_y_in = 32

observable_world = true

Playable version (on a computer: click on Keyboard Target then use arrow keys)

Use keyboard and Keyboard Target to play!

  import {viewof keys as viewof keys, keys as keys} from "d/867e1424e1d093ab"

Keyboard target

time_in

time_in = 0

TypeError: model.fov_calcd is not a function

OJS Error

TypeError: model.fov_calcd is not a function

RuntimeError: model.fov_calcd is not a function

OJS Runtime Error

model.fov_calcd is not a function

Array(0) []

keys: ⌛

TypeError: Cannot read properties of undefined (reading 'cache')

OJS Error

TypeError: Cannot read properties of undefined (reading 'cache')

RuntimeError: Cannot read properties of undefined (reading 'cache')

OJS Runtime Error

Cannot read properties of undefined (reading 'cache')

RuntimeError: Cannot read properties of undefined (reading 'cache')

OJS Runtime Error

Cannot read properties of undefined (reading 'cache')

RuntimeError: model.fov_calcd is not a function

OJS Runtime Error

model.fov_calcd is not a function

RuntimeError: model.fov_calcd is not a function

OJS Runtime Error

model.fov_calcd is not a function

labels

labels2 = true

🗺️ level

Limited features as working on perf

the level_x/y where a ray hits wall would be useful to create just 1 rule mark for the ray, this is back down to calculang model improvements. Related: notes in maze model

I’m trying to avoid 64x64 scan/updates It works but for proper gameplay should do this better

8

RuntimeError: model.fov_calcd is not a function

OJS Runtime Error

model.fov_calcd is not a function

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

raycasting_playable_level_spec = Object {datasets: Object, layer: Array(2), config: Object, width: 280, height: 280}

mutable raycasting_playable_level_data0 = Mutable {}

raycasting_playable_level_data0 = Array(0) []

mutable raycasting_playable_level_player_data0 = Mutable {}

raycasting_playable_level_player_data0 = Array(0) []

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

RuntimeError: calcuvegadata is not defined

OJS Runtime Error

calcuvegadata is not defined

overlay field of view

observable_world_v2 = Array(0) []

observable_world2 = 0

Playable version (on a computer: click on Keyboard Target then use arrow keys)

inputs ⚙️

climate_sensitivity_in

climate_sensitivity_in = 3

drawdown_factor_in

drawdown_factor_in = 0.001

45% emissions absorption currently hardcoded

you-draw-it emissions scenarios

⚠️ made up data/trends ⚠️ not accurate/tested

👀

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

RuntimeError: calcudata is not defined

OJS Runtime Error

calcudata is not defined

calculang dev tools 🛠️🧰 (some of)

formula-inputs matrix

md`${function_inputs_table(introspection)}`

// this should be better than a matrix: it should be an indented tree where it's possible to follow the logic of the compiler incl. where inputs get summarised

// useful to do nomemo/memo option? (should always be the same, be aware memo functionality will change)

formula	expenses_in	purchase_price_in	sales_price_in	units_in
sales			✔️	✔️
purchases		✔️		✔️
profit	✔️	✔️	✔️	✔️

viewof graph_nomemo = Inputs.checkbox(["nomemo"], {value: ["nomemo"]})

g = dot`${graph_functions(graph_nomemo.length ? introspection_nomemo : introspection)}`

DOM.download(() => serializeSVG(g), undefined, "Download SVG")

nomemo

graph_nomemo = Array(1) ["nomemo"]

function serialize (data) {
 let parser = new json2csv.Parser();
 let csv = parser.parse(data);
 return new Blob([csv], {type: "text/csv"}) 
}

json2csv = require("json2csv@5.0.7/dist/json2csv.umd.js")

import {aq, op} from '@uwdata/arquero'

table_aq = aq.from(data_all2)

unpivot = table_aq.groupby('model_id','input_cursor_id','age_in').pivot('formula','value')

serialize = ƒ(data)

json2csv = Object {AsyncParser: ƒ(opts, transformOpts), Parser: ƒ(opts), Transform: ƒ(opts, transformOpts), default: Object, parse: ƒ(data, opts), parseAsync: ƒ(data, opts, transformOpts), transforms: Object}

  import {aq as aq, op as op} from "@uwdata/arquero"

RuntimeError: Cannot read properties of undefined (reading 'filter')

OJS Runtime Error

Cannot read properties of undefined (reading 'filter')

RuntimeError: Cannot read properties of undefined (reading 'filter')

OJS Runtime Error

Cannot read properties of undefined (reading 'filter')

cul scope id graph

viewof show_query_string = Inputs.checkbox(["show query string?"])

viewof scope_id_graph_nomemo = Inputs.checkbox(["nomemo"], {value: ["nomemo"]})

// defaults here are setup to protect you from what really happens when memo is on !

dot`${scope_id_graph}`

show query string?

show_query_string = Array(0) []

nomemo

scope_id_graph_nomemo = Array(1) ["nomemo"]

---

made with 💖 and calculang 🤗

The rest of this page is webpage workings - you may ignore, or check out other examples above.

---

appendix

model = require(`${entrypoint_no_cul_js}.js`)


embed_ = require('vega-embed');
embed = (spec, options) => embed_(spec, {actions, theme, renderer:'svg',...options})


/*viewof theme = radio({
  title: 'Please select a theme',
  description: 'The charts will update automatically.',
  options: [
    { label: 'Default', value: undefined },
    { label: 'Dark', value: 'dark' },
    { label: 'Microsoft Excel', value: 'excel' },
    { label: 'ggplot2', value: 'ggplot2' },
    { label: 'Quartz', value: 'quartz' },
    { label: 'Vox', value: 'vox' },
    { label: '538', value: 'fivethirtyeight' },
    { label: 'Los Angeles Times', value: 'latimes' },
    { label: 'Google Charts', value: 'googlecharts' },
    { label: 'PowerBI', value: 'powerbi' }
  ],
  value: 'powerbi'
})*/
theme = 'powerbi';

viewof actions = Inputs.toggle({label:'vega-embed actions?', value: false})

model = Module {sales: ƒ(…), purchases: ƒ(…), profit: ƒ(…), sales_price: ƒ(…), purchase_price: ƒ(…), units: ƒ(…), expenses: ƒ(…), Symbol(Symbol.toStringTag): "Module"}

theme = "powerbi"

vega-embed actions?

actions = false

introspection_fetch = await fetch(`${entrypoint_no_cul_js}.introspection.json`)

introspection = introspection_fetch.json({typed:true})

introspection_nomemo_fetch = await fetch(`${entrypoint_no_cul_js}${calculang_source_nomemo.length ? '-nomemo' : ''}.introspection.json`)

introspection_nomemo = introspection_nomemo_fetch.json({typed:true})

calculang_source_introspection = calculang_source_nomemo.length ? introspection_nomemo : introspection

formulae_objs = Object.values(calculang_source_introspection.cul_functions).filter(d => d.reason == 'definition' && inputs.indexOf(d.name+'_in') == -1)
input_formulae_objs = Object.values(calculang_source_introspection.cul_functions).filter(d => d.reason == 'definition' && inputs.indexOf(d.name+'_in') != -1)

inputs = Object.values(calculang_source_introspection.cul_functions).filter(d => d.reason == 'input definition').map(d => d.name).sort()

fns0 = Object.values(calculang_source_introspection.cul_functions).filter(d => d.cul_scope_id == 0).map(d => d.inputs).flat()

introspection_fetch = Response {}

introspection = Object {cul_functions: Object, cul_links: Array(11), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_sales\" [cul_scope_id=0,name=sales,c…=\"[object Object]\",label=\"input +expenses_in\"]\n}\n", memo_map: Object}

introspection_nomemo_fetch = Response {}

introspection_nomemo = Object {cul_functions: Object, cul_links: Array(11), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_sales\" [cul_scope_id=0,name=sales,c…=\"[object Object]\",label=\"input +expenses_in\"]\n}\n", memo_map: Object}

calculang_source_introspection = Object {cul_functions: Object, cul_links: Array(11), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_sales\" [cul_scope_id=0,name=sales,c…=\"[object Object]\",label=\"input +expenses_in\"]\n}\n", memo_map: Object}

formulae_objs = Array(3) [Object, Object, Object]

input_formulae_objs = Array(4) [Object, Object, Object, Object]

inputs = Array(4) ["expenses_in", "purchase_price_in", "sales_price_in", "units_in"]

fns0 = Array(16) ["units_in", "sales_price_in", "units_in", "purchase_price_in", "units_in", "sales_price_in", "purchase_price_in", "expenses_in", "sales_price_in", "sales_price_in", "purchase_price_in", "purchase_price_in", "units_in", "units_in", "expenses_in", "expenses_in"]

scope_id_graph_introspection = scope_id_graph_nomemo.length ? introspection_nomemo : introspection;

scope_id_graph_links = Object.entries(scope_id_graph_introspection.cul_scope_ids_to_resource).filter(([cul_scope_id]) => cul_scope_id != 0).map(([cul_scope_id, resource]) => new URLSearchParams(resource.split('?').pop()).get('cul_scope_id') + ' -> ' + new URLSearchParams(resource).get('cul_parent_scope_id'))

scope_id_graph_nodes = Object.entries(scope_id_graph_introspection.cul_scope_ids_to_resource).map(d => (`${d[0]} [${ d[0] == 0 ? 'color="green" style="filled" ' :  'color="yellow" style="filled" '}label="[${d[0]}]: ${show_query_string.length ? d[1].replaceAll('-nomemo', '') : d[1].replaceAll('-nomemo', '').split('?')[0]}"]`))

scope_id_graph = `digraph {
bgcolor="#90EE90"
rankdir="RL"
node [shape="box"]
${scope_id_graph_nodes.join('\n')}
${scope_id_graph_links.join('\n')}
}`

scope_id_graph_introspection = Object {cul_functions: Object, cul_links: Array(11), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_sales\" [cul_scope_id=0,name=sales,c…=\"[object Object]\",label=\"input +expenses_in\"]\n}\n", memo_map: Object}

scope_id_graph_links = Array(0) []

scope_id_graph_nodes = Array(1) ["0 [color=\"green\" style=\"filled\" label=\"[0]: ./shop.cul.js\"]"]

scope_id_graph = `digraph { bgcolor="#90EE90" rankdir="RL" node [shape="box"] 0 [color="green" style="filled" label="[0]: ./shop.cul.js"] }`

import { calcudata, calcuvizspec, graph_functions, function_inputs_table } from "@declann/little-calcu-helpers"

  import {calcudata as calcudata, calcuvizspec as calcuvizspec, graph_functions as graph_functions, function_inputs_table as function_inputs_table} from "@declann/little-calcu-helpers"

// by Mike Bostock reference: https://observablehq.com/@mbostock/saving-svg
serializeSVG = {
  const xmlns = "http://www.w3.org/2000/xmlns/";
  const xlinkns = "http://www.w3.org/1999/xlink";
  const svgns = "http://www.w3.org/2000/svg";
  return function serialize(svg) {
    svg = svg.cloneNode(true);
    const fragment = window.location.href + "#";
    const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
    while (walker.nextNode()) {
      for (const attr of walker.currentNode.attributes) {
        if (attr.value.includes(fragment)) {
          attr.value = attr.value.replace(fragment, "#");
        }
      }
    }
    svg.setAttributeNS(xmlns, "xmlns", svgns);
    svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
    const serializer = new window.XMLSerializer;
    const string = serializer.serializeToString(svg);
    return new Blob([string], {type: "image/svg+xml"});
  };
}

serializeSVG = ƒ(svg)

md`errors here usually **okay**!`

errors here usually okay!

{scene.addSignalListener("ray_angle_in", (_, r) => {
  //if (observable_world == 0) return;
  viewof ray_angle_in.value = Math.round(r.ray_angle_in*100)/100;
  viewof ray_angle_in.dispatchEvent(new CustomEvent('input'), {bubbles:true}); // I might never understand how to make this always work
})}

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

{level.addSignalListener("xy", (_, r) => { // this didn't improve perf a lot vs event listener: nearly every mousemove is a signal change, I suppose
  //if (observable_world == 0) return;
  viewof ray_angle_in.value = Math.round(Math.atan2((r.level_y_in[0] - player_y_in) , (r.level_x_in[0] - player_x_in))*100)/100;
  viewof ray_angle_in.dispatchEvent(new CustomEvent('input'), {bubbles:true});
})}

RuntimeError: interval is not defined

OJS Runtime Error

interval is not defined

{scene2.addSignalListener("ray_angle_in", (_, r) => {
  //if (observable_world == 0) return;
  viewof ray_angle_in2.value = Math.round(r.ray_angle_in*100)/100;
  viewof ray_angle_in2.dispatchEvent(new CustomEvent('input'), {bubbles:true}); // I might never understand how to make this always work
})}

RuntimeError: model.fov_calcd is not a function

OJS Runtime Error

model.fov_calcd is not a function

{level2.addSignalListener("xy", (_, r) => { // this didn't improve perf a lot vs event listener: nearly every mousemove is a signal change, I suppose
  //if (observable_world == 0) return;
  viewof ray_angle_in2.value = Math.round(Math.atan2((r.level_y_in[0] - player_y_in) , (r.level_x_in[0] - player_x_in))*100)/100;
  viewof ray_angle_in2.dispatchEvent(new CustomEvent('input'), {bubbles:true});
})}

RuntimeError: level2 is not defined

OJS Runtime Error (line 3925, column 2)

level2 is not defined

clamped_ray_angle_in = {
  if (ray_angle_in <= fov2[1] && ray_angle_in >= fov2[0])
    return ray_angle_in
  else return undefined
  }//_.clamp(ray_angle_in,fov2[0],fov2[1])


clamped_ray_angle_in2 = {
  if (ray_angle_in2 <= fov[1] && ray_angle_in >= fov[0])
    return ray_angle_in2
  else return undefined
  }//_.clamp(ray_angle_in,fov2[0],fov2[1])


viewof ray_angle_in = Inputs.range([-4,4], {step:0.001, label:'angle for active ray'})
viewof ray_angle_in2 = Inputs.range([-4,4], {step:0.001, label:'angle for active ray'})
viewof ray_angle_in_step_size = Inputs.select([0.01,0.02,0.04], {value:0.02, label: 'ray_angle_in steps'})

//emissions.addSignalListener('interpolated', update_climate)

// https://stackoverflow.com/questions/3820381/need-a-basename-function-in-javascript
function basename(path) {
   return path.split('/').reverse()[0];
}


//https://www.abeautifulsite.net/posts/javascript-functions-for-basename-and-dirname/
function dirname(path) {
  return path.match(/.*\//);
}

clamped_ray_angle_in = undefined

RuntimeError: model.fov_calcd is not a function

OJS Runtime Error

model.fov_calcd is not a function

angle for active ray

ray_angle_in = 0

angle for active ray

ray_angle_in2 = 0

ray_angle_in steps 0.010.020.04

ray_angle_in_step_size = 0.02

basename = ƒ(path)

dirname = ƒ(path)

examples_yaml = (await fetch('/gallery.yml')).text()

yaml = require('js-yaml@4.1.0/dist/js-yaml.min.js')

examples = yaml.load(examples_yaml)

//introspection = introspection_fetch.json({typed:true})



selected_model = Generators.input(a_thing2)

example_details = examples.map(d => d.tiles).flat().find(d => d.id == selected_model)

example_entrypoint = example_details.entrypoint

modelname = example_details.id//basename(example_entrypoint).slice(0,-7) // this means that each entrypoint file name must be unique ! Should introduce an identifier in yaml

entrypoint_no_cul_js = example_details.entrypoint.slice(0,-7)
//entrypoint

dir = dirname(example_entrypoint)

q = new URLSearchParams(location.search)

//dat=require("dat.gui")
dat = require('lil-gui')

import {Scrubber} from "@mbostock/scrubber"
date_fns = import("https://cdn.skypack.dev/date-fns@2.30.0")


// https://observablehq.com/@martien/horizontal-inputs
template = (inputs) => 
htl.html`<div class="styled">${Object.values(inputs)}</div>
<style>
  div.styled {
    text-align: left;
    column-count: 2;
  }
  div.styled {
    font-size:0.7em;
    /*font-weight: bold;*/
  }
  div.styled input {
    width:70px;
    /*font-weight: bold;*/
  }
  div.styled label:not(div>label):after {
    //content: ":";
  }
</style>`


a_thing2.onchange = (d) => {  console.log(d); history.pushState({ id: d.target.value, hidden:show_hidden }, "id " + d.target.value, "?id="+d.target.value+(show_hidden?'&hidden=hidden':''));
            window.plausible('pageview', { u: prepareUrl(["id", "hidden" ]) + window.location.search })

}

examples_yaml = `- category: Finance 💵🔍 description: calculang aims have applications in finance, where transparency and understanding about numbers is essential for decision-making. # nice to be able to emphasize "transparency and understanding" tiles: - title: Savings Calculator 🪙🪙 subtitle: makes estimates for a savings balance entrypoint: /models/savings/savings.cul.js id: savings # used in URL, must be unique across tiles under all categories modular: false thumbnail: thumbnails/savings-calculator.png - title: Savings Actual-ator 🔃 subtitle: tracks updates to actual balances and future estimates entrypoint: /models/savings/savings-rec.cul.js id: savings-rec modular: true thumbnail: thumbnails/savings-actualator.png - title: SaaS Cashflows 💵🌊 subtitle: Modelling a SaaS business cashflowsShow 288 truncated lines

yaml = Object {CORE_SCHEMA: d, DEFAULT_SCHEMA: d, FAILSAFE_SCHEMA: d, JSON_SCHEMA: d, Schema: ƒ(e), Type: ƒ(e, t), YAMLException: ƒ(e, t), default: Object, dump: ƒ(e, t), load: ƒ(e, t), loadAll: ƒ(e, t, n), safeDump: ƒ(), safeLoad: ƒ(), safeLoadAll: ƒ(), types: Object}

examples = Array(5) [Object, Object, Object, Object, Object]

selected_model = "shop"

example_details = Object {title: "Shop Modelling", subtitle: "buy low sell high = 📈", entrypoint: "/models/shop.cul.js", id: "shop", modular: false, thumbnail: "thumbnails/shop.png"}

example_entrypoint = "/models/shop.cul.js"

modelname = "shop"

entrypoint_no_cul_js = "/models/shop"

dir = Array(1) ["/models/", index: 0, input: "/models/shop.cul.js", groups: undefined]

q = URLSearchParams {}

dat = Object {BooleanController: class, ColorController: class, Controller: class, FunctionController: class, GUI: class, NumberController: class, OptionController: class, StringController: class, default: class}

  import {Scrubber as Scrubber} from "@mbostock/scrubber"

date_fns = Module {add: ƒ(dirtyDate, duration), addBusinessDays: ƒ(dirtyDate, dirtyAmount), addDays: ƒ(dirtyDate, dirtyAmount), addHours: ƒ(dirtyDate, dirtyAmount), addISOWeekYears: ƒ(dirtyDate, dirtyAmount), addMilliseconds: ƒ(dirtyDate, dirtyAmount), addMinutes: ƒ(dirtyDate, dirtyAmount), addMonths: ƒ(dirtyDate, dirtyAmount), addQuarters: ƒ(dirtyDate, dirtyAmount), addSeconds: ƒ(dirtyDate, dirtyAmount), addWeeks: ƒ(dirtyDate, dirtyAmount), addYears: ƒ(dirtyDate, dirtyAmount), areIntervalsOverlapping: ƒ(intervalLeft, intervalRight, options), clamp: ƒ(date, _ref), closestIndexTo: ƒ(dirtyDateToCompare, dirtyDatesArray), closestTo: ƒ(dirtyDateToCompare, dirtyDatesArray), compareAsc: ƒ(dirtyDateLeft, dirtyDateRight), compareDesc: ƒ(dirtyDateLeft, dirtyDateRight), daysInWeek: 7, daysInYear: 365.2425, …}

template = ƒ(inputs)

ƒ(d)

Footnotes

1. written in reactive Observable JS and using some calculang helper APIs, however calculang is technically unopinionated about how models are used.

2. Note the _ modifier and as keyword which are needed in this case