uh squine and cosquare

Inspired by this tweet; hover or tap in the square!

const a_data = await calcudata({
  models: [model],
  input_cursors: [{}],
  input_domains: {
    t_in: _.range(0,2, .01)
  },
  outputs: ['C_sq', 'S_sq']
})

const a = embed('#a',
  {
    params: [{name:'p',value:0},{name:'p1',value:1}],
    width: 200, height: 100,
    layer: [
    {
    mark: 'rule',
      transform: [{calculate: 'p', as: 'p2'}],
    encoding: {
      x: {datum:{expr:'datum.p2'}, type: 'quantitative', axis: {values: [0,1,2], format:',.0f'}},
      color: {value:'red'},
      size: {value:3}
    }},{
    mark: 'rule',
      transform: [{calculate: '+p+1', as: 'p3'}],
    encoding: {
      x: {datum:{expr:'datum.p3'}, type: 'quantitative', axis: {values: [0,1,2], format:',.0f'}},
      color: {value:'red'},
      size: {value:3}
    }},{
    mark: 'line',
    encoding: {
      x: {field:'t_in', type:'quantitative', axis: {format:',.2f', grid:false}},
      y: {field:'value', type:'quantitative', axis:{grid:true, values:[0]}},
      color: {field:'formula'}
    }}]
  }, {renderer: 'svg', actions:false});

For t=, squine is and cosquare is

import embed from 'npm:vega-embed';

const b = embed('#b',
  {
    width: 220, height: 220,
    
    layer: [
      {
    params: [{name: 'p', value: {t_in:0}, select: {type:'point', toggle:false, "on": "pointermove", nearest: true, fields:["t_in"]} }],

        mark: {type:'point', filled:true},
        encoding: {
          detail: {field:'t_in'},
          x: {field:'C_sq', type:'quantitative', axis:{orient:'top',grid:true, values:[0]}, scale: {domain: [-2,2]}},
          y: {field:'S_sq', type:'quantitative', axis:{grid:true, values:[0]}, scale: {domain: [-2,2]}},
          color: {condition: {param:'p', value:'purple', empty: false}, value:'purple'},
          opacity: {condition: {param:'p', value:0.8, empty: false}, value:0.1},
          stroke: {value:'red'},
          strokeWidth: {condition: {param:'p', value:3, empty: false}, value:0.1},
          size: {condition: {param:'p', value:400, empty: false}, value:300},
          order: {condition: {param:'p', value:10}, value:0}
        },
      }/*,
      {
        mark: 'rule',
        encoding: {
          x: {datum: 0},
          x2: {datum: {expr:'p.t_in'}},
          y: {datum: 0},
          x2: {datum: {expr:'p.t_in'}},
        }
      }*/
      /*{
        mark: 'point',
        encoding: {
          color: {field:'t_in'},
          x: {field:'C_sq', type:'quantitative', axis:{grid:false, values:[1,-1]}, scale: {domain: [-2,2]}},
          y: {field:'S_sq', type:'quantitative', axis:{grid:false, values:[1,-1]}, scale: {domain: [-2,2]}},
        },
      }*/
    ]
  }, {renderer: 'svg', actions:false});