ƒ

calculang ✍️ editable and dangerous! 🧙‍♂️⚠️
javascript ✨ generated from calculang ⬆️
dev tools 🧰

reactive workings (todo):

inputs ⚙️
const spec = ({
  // vega-lite
  mark: {type:'point', point: false, filled: true, tooltip:true},
  encoding: {
    x: { field: 'x_in', type: 'ordinal', grid:false },
    y: { field: 'y_in', type: 'ordinal', grid:false },
    //row: { name: 'formula', domain: formulae_not_inputs },
    color: { field: 'alive', legend: true },
    shape: {value:'square'}
  },
  width:180, //Math.min(300,width-150), // messy !!! container width works but overstates
  height: 180,
  background:'rgba(0,0,0,0)',
  data: { name: "data" },
})

// interactivity via vega signals and listeners
const viz = embed('#viz', spec)
const data_source = calcuvegadata({
  models: [model],
  spec,
  domains: {
    x_in: _.range(0,size_in),
    y_in: _.range(0,size_in),
  },
  input_cursors: [
    { ...c }
  ]
})
viz.view.data("data", data_source)/*.resize()*/.run(); // turn off resize
Performance notes (old)
  • initial grid as a function input is very important to take stress off naive memo with JSON stringify hash

  • at 50x50, rendering appears a bottleneck; bypass calcudata? (object structure poor)

  • stream data to vega, or render to canvas or css grid? (with animation?) (somehow vega svg faster than vega canvas and I think FF faster than chromium)

  • memory usage is out of control: manually try memo eviction strategies