Embedding Vega-Lite in a Web Page

This document assumes that you have a Vega-Lite specification as a JSON object in a variable called vlSpec. You can find an example specification in our getting started tutorial.

Load the Required Libraries

To use Vega-Lite on your own web page, load the required libraries (D3, Vega, and Vega-Lite). You can optionally load vega-embed to enable the convenient vg.embed method.

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//vega.github.io/vega/vega.js" charset="utf-8"></script>
<script src="//vega.github.io/vega-lite/vega-lite.js" charset="utf-8"></script>
<script src="//vega.github.io/vega-editor/vendor/vega-embed.js" charset="utf-8"></script>

We suggest that you install Vega-Lite with bower or npm, to get the latest stable version of Vega-Lite. To install Vega-Lite with npm, runtime

npm install vega-lite

Alternatively you can download the latest Vega-Lite release and add it to your project manually.

Then, create an HTML element that the visualization should be attached to.

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

Render the Visualization

You can either use the convenient vg.embed method or call vl.compile and vg.parse separately.

Embed Vega Web Components with vega-embed

Directly add the visualization to the element you created with vega-embed.

var embedSpec = {
  mode: "vega-lite",
  spec: vlSpec
}
vg.embed("#vis", embedSpec, function(error, result) {
  // Callback receiving the View instance and parsed Vega spec
  // result.view is the View, which resides under the '#vis' element
});

Vega-embed automatically adds links to export an image, view the source, and open the specification in the online editor. These links can be individually disabled. For more information, read the documentation in the vega wiki.

Call Vega-Lite and Vega separately

To compile a Vega-Lite specification into a Vega specification, call vl.compile.

var vgSpec = vl.compile(vlSpec).spec;

Then we can render the Vega specification with the Vega runtime’s vg.parse.spec method.

vg.parse.spec(vgSpec, function(chart) {
  chart({el:"#vis"}).update();
});