How to use vega-embed - 10 common examples

}
        }

        let schema = schemaMap[plotType[0]];
        if (!schema) app.alertError("invalid plot type");
        // console.log(schema);
        let flip = plotflip(plotType);
        json.vars = nodeNames;
        facetSpecifications[i] = fillVegaSchema(schema, json, flip);
    }));

    let specification = facetSpecifications.length === 1
        ? facetSpecifications[0]
        : {vconcat: facetSpecifications, config: {axisY: {minExtent: 30}}}

    vegaEmbed('#plot', specification, {width: 800, height: 600});
}

}
                },
                "mark": { "type": "line", "tooltip": { "content": "data" } },
                "selection": {
                    "selector016": {
                        "bind": "scales",
                        "encodings": [
                            "x",
                            "y"
                        ],
                        "type": "interval"
                    }
                }
            }
            try {
                vegaEmbed(document.querySelector('#chartplace'), chartData);
            } catch (ex) {
                console.warn('Could not create vega chart:', ex);
            }
        }

reloadImage (config) {
      config.data = {"values": this.values}
      vegaEmbed('#' + this.source, config, {tooltip: {offsetY: -110}, mode: 'vega-lite',}) 
    }
  }

useEffect(() => {
    if (spaceChart.current && subspaceList.length > 0) {
      embed(spaceChart.current, {
        data: {
          values
        },
        vconcat: [
          {
            mark: 'rect',
            selection: {
              dim: {
                type: 'single',
                on: 'click',
                encodings: ['y']
              }
            },
            encoding: {
              x: { field: 'measureName', type: 'nominal' },
              y: {

'mark': {'type': 'text', 'baseline': 'middle'},
      'encoding': {
        'text': {
          'condition': {
            'test': 'datum["noFill"] == true',
            'field': 'diagCount',
            'type': 'nominal',
          },
          'field': 'count',
          'type': 'nominal',
        },
      }
    });
  }

  await embed(drawArea, spec, embedOpts);
  return Promise.resolve();
}

processed = processed.filter(point => point['variable'] === eventdata.aggregationHeadersLabels['dyad'][0]);

                vegaSchema = {
                    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
                    "data": {"values": processed},
                    "mark": "line",
                    "encoding": {
                        "x": {"field": eventdata.aggregationHeadersLabels['date'][0], "type": "temporal", "axis": {"format": "%Y-%m-%d"}},
                        "y": {"field": preferences['melt'], "type": "quantitative"},
                        "color": {"field": "value", "type": "nominal"}
                    }
                };
            }
        }

        vegaEmbed('#plotResults', vegaSchema, {actions: false, width: width, height: height});
    }
}

'text': {'fontSize': options.fontSize},
      'legend': {
        'labelFontSize': options.fontSize,
        'titleFontSize': options.fontSize,
      }
    },
    'data': {'values': values, 'name': 'values'},
    'mark': 'bar',
    'encoding': {
      'x': {'field': 'index', 'type': xType, 'axis': xAxis},
      'y': {'field': 'value', 'type': yType, 'axis': yAxis}
    }
  };

  await nextFrame();
  const embedRes = await embed(drawArea, spec, embedOpts);
  instances.set(drawArea, {
    view: embedRes.view,
    lastOptions: options,
  });
}

createDataChart () {
    const { testData, trainingData, predictions, showTestData } = this.props;
    const trainXs = trainingData.xs.dataSync();
    const trainYs = trainingData.ys.dataSync();
    const testXs = testData.xs.dataSync();
    const testYs = testData.ys.dataSync();
    const trainValues = Array.from(trainYs).map((y, i) => ({trainX: trainXs[i], trainY: trainYs[i], pred: predictions[i]}));
    const values = showTestData ?
      trainValues.concat(Array.from(testYs).map((y, i) => ({testX: testXs[i], testY: testYs[i]})))
      : trainValues;
 
    return renderChart(this.dataChart, createDataSpec(values, showTestData), { actions: false });
  }

vegaEmbed('#plotMax' + plt + count, vegaSchema, {actions: false, width: width, height: height});
            }
        }
        for (var plt in eventdata.discoveryData[eventdata.selectedDataset]["data"]["min"]) {
            for (var count in eventdata.discoveryData[eventdata.selectedDataset]["data"]["min"][plt][0]) {
                let vegaSchema = {
                    "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
                    "data": {"values": [...melt(eventdata.discoveryData[eventdata.selectedDataset]["data"]["min"][plt][0][count]["data"], ["date"])]},
                    "mark": "line",
                    "encoding": {
                        "x": {"field": "date", "type": "temporal", "axis": {"format": "%Y-%m-%d"}},
                        "y": {"field": "value", "type": "quantitative"},
                        "color": {"field": "variable", "type": "nominal"}
                    }
                };
                vegaEmbed('#plotMin' + plt + count, vegaSchema, {actions: false, width: width, height: height});
            }
        }
    }
}

return {'x': xvals[i], 'y': yvals[i]};
   });

   const spec = {
     '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
     'width': 300,
     'height': 300,
     'data': {'values': values},
     'mark': 'point',
     'encoding': {
       'x': {'field': 'x', 'type': 'quantitative'},
       'y': {'field': 'y', 'type': 'quantitative'}
     }
   };

   return renderChart(container, spec, {actions: false});
 }