๐Ÿ‘€ 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.1

calculang formulae are already shown, with additional options under ๐Ÿคซ

  • 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โ€™).

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 ๐Ÿ™


calculang model


formulae ๐ŸŸฐ


model relationships โ™ป๏ธ

๐Ÿคซ

๐Ÿ“บ application(s)

calcudonuts ๐Ÿฉ๐Ÿ’ซ on OHQ

Is it a leap year?

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 :)

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!

๐Ÿ” snowflake dynamics ๐Ÿ‘€

loan validator ๐Ÿ•ต๏ธ (dev ๐Ÿ““)

Inspired by @year_remaining

You ๐Ÿ‘‰ be the finance minister ๐ŸŽฉ

Newer (DEV) Visual on OHQ

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

inputs โš™๏ธ

๐Ÿ‘€

inputs โš™๏ธ
inputs โš™๏ธ

No application here.

This example is just to show that a model can redefine a formula in terms of itโ€™s original definition.2

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

๐Ÿ‘€

๐Ÿ‘€

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.

inputs โš™๏ธ

Orginally posted @ some SaaS cashflows ๐Ÿ’ต๐ŸŒŠ

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

controls ๐Ÿ•น๏ธ

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!)

๐Ÿ‘€

Originally posted to ObservableHQ

inputs โš™๏ธ

๐Ÿ‘€

highlight for actual-updates ๐Ÿช„


contour visual of f(x_in,y_in):

inputs โš™๏ธ

See also Hearty maths with calculang โค๏ธ

inputs โš™๏ธ

Projectile Path ๐Ÿงญ

inputs โš™๏ธ

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).

๐Ÿ—บ๏ธ level

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

Use keyboard and Keyboard Target to play!

๐Ÿ—บ๏ธ 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

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

inputs โš™๏ธ

you-draw-it emissions scenarios

โš ๏ธ made up data/trends โš ๏ธ not accurate/tested

๐Ÿ‘€


calculang dev tools ๐Ÿ› ๏ธ๐Ÿงฐ (some of)

formula-inputs matrix

Code 
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)
Code 
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")
Code 
function serialize (data) {
 let parser = new json2csv.Parser();
 let csv = parser.parse(data);
 return new Blob([csv], {type: "text/csv"}) 
}

json2csv = require("[email protected]/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')

cul scope id graph

Code 
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}`





made with ๐Ÿ’– and calculang ๐Ÿค—


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













appendix

Code 
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})
Code 
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()
Code 
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')}
}`
Code 
import { calcudata, calcuvizspec, graph_functions, function_inputs_table } from "@declann/little-calcu-helpers"
Code 
// 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"});
  };
}
Code 
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(/.*\//);
}
Code 
examples_yaml = (await fetch('/gallery.yml')).text()

yaml = require('[email protected]/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/[email protected]")


// 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 })

}

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โ†ฉ๏ธŽ

|