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 (Vega, Vega-Lite, Vega-Embed).

<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.14/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.20/vega-embed.js"></script>

We suggest that you use cdnjs for deployments.

If you prefer to host the dependencies yourself, we suggest that you use npm to install the libraries(Vega, Vega-Lite, and Vega-Embed) to get the latest stable version. To install with npm, simply install it as you would any other npm module.

npm install vega
npm install vega-lite
npm install vega-embed

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, 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.

// More argument info at https://github.com/vega/vega-embed
vega.embed("#vis", yourVlSpec);

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.

Here is the final HTML file in the easiest way to embed Vega-Lite:

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Vega-Lite</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.14/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.20/vega-embed.js"></script>
</head>
<body>

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

  <script type="text/javascript">
    var yourVlSpec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
      "description": "A simple bar chart with embedded data.",
      "data": {
        "values": [
          {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
          {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
          {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "ordinal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    }
    vega.embed("#vis", yourVlSpec);
  </script>
</body>
</html>