Embedding Vega-Lite

Fork our Vega-Lite Block if you want to quickly publish a Vega-Lite visualization on the web.

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://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.33/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.5/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.17/vega-embed.js"></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.

// optional argument passed to Vega-Embed to specify vega-lite spec. More info at https://github.com/vega/vega-embed
var opt = {
  "mode": "vega-lite"

vega.embed("#vis", vlSpec, opt, 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 Vega-Embed documentation.