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