How to use the vega.View function in vega

loadJSON('examples/specs/' + example + '.vl.json', function(vlSpec: TopLevelSpec) {
      const vgSpec = vl.compile(vlSpec).spec;
      const runtime = vega.parse(vgSpec); // may throw an Error if parsing fails
      new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(document.querySelector('.viz#'+ example + '> div.view'))
        .renderer('canvas')
        .run();

      d3.select('.viz#'+ example + '> .desc').text(vlSpec.description || '');
    });
  });

this.container.innerHTML = '';

      try {
        const runtime = vg.parse(vegaSpec);

        // Tell loader to resolve data and image files
        // relative to the spec file
        const loader = vg.loader({
          baseURL: path.dirname(filePath),
          mode: 'file'
        });

        window.VEGA_DEBUG.view = null;

        this.view = new vg.View(runtime, {loader})
          .initialize(this.container)
          .renderer(renderer)
          .hover()
          .run();

        window.VEGA_DEBUG.view = this.view;
      } catch (error) {
        this.showError(`Invalid vega spec: ${error.message}`);
      }
    }
  }

export function embed(vlSpec) {
    const vgSpec = compile(vlSpec).spec;
    view = new View(parse(vgSpec))
        .renderer('svg')
        .initialize('#vis')
        .run();
}
const winSrc = ['mousemove', 'mouseup'];

export function embedExample($target: any, spec: TopLevelSpec, actions = true, tooltip = true) {
  const {spec: vgSpec} = compile(spec);

  const view = new vega.View(vega.parse(vgSpec), {loader: loader}).renderer('svg').initialize($target);

  if (tooltip) {
    const handler = new Handler().call;
    view.tooltip(handler);
  }

  view.run();

  if (actions) {
    select($target)
      .append('div')
      .attr('class', 'vega-actions')
      .append('a')
      .text('Open in Vega Editor')
      .attr('href', '#')
      .on('click', function() {

async constructView() {
    const { spec, data, onViewRender } = this.props
    const loader = vega.loader()
    const logLevel = vega.Warn
    const renderer = 'svg'

    try {
      const vgSpec = vl.compile(spec).spec

      const runtime = vega.parse(vgSpec)

      const view = new vega.View(runtime, {
        loader,
        logLevel,
        renderer
      })
        .initialize(this.nodeRef.current)
        .change('source', vega.changeset().insert(data))

      try {
        VegaTooltip(view)
      } catch (e) {}

      this.view = view
      await view.runAsync()
      onViewRender && onViewRender(view)
    } catch (e) {}
  }

async function renderSpecToBuffer(spec) {
  const view = new Vega.View(Vega.parse(spec)).renderer('none').initialize();
  const canvas = await view.toCanvas();
  const buffer = canvas.toBuffer();

  return buffer;
}

renderVega(props) {
    this.refs.chart.style.width = this.refs.chart.getBoundingClientRect().width + 'px';

    let runtime;
    let view;

    runtime = vega.parse(props.vegaSpec);
    view = new vega.View(runtime)
      .logLevel(vega.Warn)
      .initialize(this.refs.chart)
      .renderer(props.renderer)

    if (props.mode === MODES.Vega) {
      view.hover()
    }

    view.run();

    this.refs.chart.style.width = 'auto';

    if (this.props.tooltip) {
      vegaTooltip.vega(view);
    }

export async function generateChart(path: string, dataPoints: DataPoint[]): Promise {
  const wrappedDataPoints = [
    {
      name: "main",
      values: dataPoints.map(dp => ({ ...dp, c: 0 })),
    },
  ];
  const finalChartDef: any = {
    ...chartDefinition,
    data: wrappedDataPoints,
  };

  const view = new vega.View(vega.parse(finalChartDef), { renderer: "none" }).initialize();

  const canvas = await view.toCanvas();

  fs.writeFileSync(path, canvas.toBuffer());
}