vega-lite JavaScript API browser example

A very simple example of how to run the wonderful JavaScript API for vega-lite directly in the browser

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="chart"></div>

vl.register(vega, vegaLite, options);

vl.markBar({ tooltip: true })
        .data([
          { 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 },
        ])
        .encode(
          vl.x().fieldQ("b"),
          vl.y().fieldN("a"),
          vl.tooltip([vl.fieldQ("b"), vl.fieldN("a")])
        )
        .render()
        .then((chart) => {
          document.getElementById("chart").appendChild(chart);
        });
    </script>
  </body>
</html>

https://cdn.jsdelivr.net/npm/vega

https://cdn.jsdelivr.net/npm/vega-lite

https://cdn.jsdelivr.net/npm/vega-lite-api

https://cdn.jsdelivr.net/npm/vega-tooltip