vegaliteapi.svelte

<div id="vis"></div>

<input type="range" id="duration" name="duration" min="1" max="72" bind:value={value}>
<label for="duration">Duration</label>
Value: {value}

<script>
    import * as vl from 'vega-lite-api';
    import * as vega from 'vega';
    import * as vegaLite from 'vega-lite';
    import * as vegaTooltip from 'vega-tooltip';
    import * as aq from 'arquero';
    import {onMount} from 'svelte';

    let mounted = false;

    onMount(() => {
      mounted = true;
      const options = {
        config: {
          // Vega-Lite default configuration
        },
        init: (view) => {
          // initialize tooltip handler
          console.log("init called");
          view.tooltip(new vegaTooltip.Handler().call);
        },
        view: {
          // view constructor options
          // remove the loader if you don't want to default to vega-datasets!
          loader: vega.loader({
            baseURL: "https://cdn.jsdelivr.net/npm/vega-datasets@2/",
          }),
          renderer: "canvas",
        },
      };
      // register vega and vega-lite with the API
      vl.register(vega, vegaLite, options);
      let t = generateTable(value, 56);
      drawGraph(t);
    });

    let value = 32;

    $: {
        let t = generateTable(value, 56);
        drawGraph(t);
    }

    function generateTable(duration, months) {
// (curr + (tar - curr) / ( 1 + 361 ^ (( offset + start + duration/2 - monthNo) / duration))
        let t = aq.table( {monthNo: aq.op.sequence(1, months) } );
        t = t.params({ curr: 0.1, tar: 0.75, exp: 361, offset: 10, start: 6, duration: duration})
        t = t.derive( { value: (d, p) => p.curr + (p.tar - p.curr) / (1 + p.exp ** (( p.offset + p.start + p.duration / 2 - d.monthNo) / p.duration))});
        return t;
    }

    function drawGraph(table) {
        vl.markLine()
            .data(table)
            .encode(
                vl.x().fieldQ("monthNo"),
                vl.y().fieldQ("value").scale({'domainMax': 1})
            )
            .render()
            .then(viewElement => {
                document.getElementById('vis').replaceChildren(viewElement);
            });
    }
</script>