Embedding Vega-Lite

See this repository for full code of this page.

The easiest way to use Vega-Lite on your own web page is with vega-embed, a library we built to make the process as painless as possible.

To embed a Vega-Lite specification on your web page first load the required libraries (D3, Vega, Vega-Lite, Vega-Embed).

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.5/vega.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/1.3.1/vega-lite.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/2.2.0/vega-embed.js" charset="utf-8"></script>

We suggest that you install Vega-Lite with npm to get the latest stable version. To install Vega-Lite with npm, simply install it as you would any other npm module.

npm install vega-lite

Alternatively you can download the latest Vega-Lite release and add it to your project manually. In this case, you will also have to download Vega, D3, and Vega-Embed.

The next step is to create a DOM element that the visualization will be attached to.

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

Then use Vega-Embed’s provided function to embed your spec.

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.