Module

x/vega_lite/site/demo.html

A concise grammar of interactive graphics, built on Vega.
vega/vega-lite
Latest
File
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
------<!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>