---
---

<!doctype html>
<html>
  <head>
    <title>Vega-Lite Bar Chart</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/vega@{{ site.data.versions.vega }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.data.versions.vega-lite }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.data.versions.vega-embed }}"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Template for Embedding Vega-Lite Visualization</h1>
    <div>See code at <a href="https://github.com/vega/vega-lite-demo">https://github.com/vega/vega-lite-demo</a></div>
    <!-- Container for the visualization -->
    <div id="vis"></div>

    <script>
      // Assign the specification to a local variable vlSpec.
      var vlSpec = {
        "data": {
          "values": [
            {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
            {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
            {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
          ]
        },
        "mark": "bar",
        "encoding": {
          "y": {"field": "a", "type": "nominal"},
          "x": {
            "aggregate": "average", "field": "b", "type": "quantitative",
            "axis": {
              "title": "Average of b"
            }
          }
        }
      };

      // 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'
      };

      // Embed the visualization in the container with id `vis`
      vegaEmbed('#vis', vlSpec, opt)
        .then(function (result) {
          // Callback receiving the View instance and parsed Vega spec
          // result.view is the View, which resides under the '#vis' element
        })
        .catch(console.warn);
    </script>
  </body>
</html>
