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