How to use vega - 10 common examples

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 || '');
    });
  });

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 || '');
    });
  });

public handleDragEnd = (evt: React.DragEvent, opts?) => {
    const props = this.props;
    const sel = sg.get(SELECTED);
    const cell = sg.get(CELL);
    const bindField = this.state.bindField;
    const dropped = tupleid(sel) && tupleid(cell);
    const dsId = bindField.source ? props.srcId : props.dsId;

    try {
      if (dropped) {
        const lyraId = +sel.mark.role.split('lyra_')[1];
        vega.extend(bindField, opts); // Aggregate or Bin passed in opts.
        props.bindChannel(dsId, bindField, lyraId, cell.key);
      }
    } catch (e) {
      console.error('Unable to bind primitive');
      console.error(e);
    }

    sg.set(MODE, 'handles');
    sg.set(CELL, {});
    this.setState({bindField: null});

    if (!dropped) {
      ctrl.update();
    }
  }

reader.onload = (lEvent) => {
      const format = file.name.split('.').pop().toLowerCase();
      var values;
      try {
        console.log('TRY')
        // if (format === 'txt' || (format !== "csv" && format !== "tsv")) {
        //   throw Error();
        // }
        values = vega.read(lEvent.target.result, {type: format});
        // let csvFormat = d3.dsvFormat(","); should be csvFormat??
        // values = csvFormat.parse(lEvent.target.result);
        setData(values);
        setComponentClasses(Object.keys(values[0]));
        toggleLoading();
        toggleDataLoaded();
      } catch (err) {
        console.log('CATCH', err)
        const separator = prompt('Write a delimiter for your dataset (e.g: ;)');
        let ssv = d3.dsvFormat(separator);
        values = ssv.parse(lEvent.target.result);
        delete values.columns;
        setData(values);
        setComponentClasses(Object.keys(values[0]));
        toggleLoading();
        toggleDataLoaded();

setTimeout(function() {
      if (that.cancelled) {
        return;
      }
      // Recreate the vega spec
      resolve(vg.parse(ctrl.manipulators()));
    }, 10);
  });

export function embedExample($target, spec, actions = true, tooltip = true) {
    const vgSpec = compile(spec).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', '#')
            // tslint:disable-next-line
            .on('click', function () {
            post(window, editorURL, {
                mode: 'vega-lite',

public componentDidMount() {
    this.view = new View(parse(this.props.spec), {
      renderer:  'svg',  // renderer (canvas or svg)
      container: `#${this.props.groupName}-${this.props.id}`   // parent DOM container
    });
    this.view.width(100);
    this.view.height(100);
    this.view.runAsync();
  };

} catch (error) {
          vegaSpec = spec;
        }
      } else {
        vegaSpec = spec;
      }

      // Clear existing view
      if (this.view) {
        this.view.finalize();
      }

      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();

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}`);
      }
    }
  }

diff(vnode) {
        let {data, identifier} = vnode.attrs;
        let newData = data.filter(datum => !this.dataKeys.has(datum[identifier]));

        this.dataKeys = new Set(data.map(datum => datum[identifier]));
        this.instance
            // .width(offsetWidth)
            // .height(offsetHeight + (heightOffset || 0))
            .change('embedded', vega.changeset()
                .insert(newData)
                .remove(datum => !this.dataKeys.has(datum[identifier])))
            .run();
    }