Skip to content

Instantly share code, notes, and snippets.

@john-guerra
Last active March 16, 2023 21:11
Show Gist options
  • Save john-guerra/a90b26fc3c99a925b05d51a479c16af2 to your computer and use it in GitHub Desktop.
Save john-guerra/a90b26fc3c99a925b05d51a479c16af2 to your computer and use it in GitHub Desktop.
vega-lite JavaScript API browser example with vegaEmbed
license: mit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/vega@5.7.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@5.1.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0"></script>
<script>
const chartSpec = vl
.markBar()
.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(["b", "a"])
)
.toJSON();
vegaEmbed("#chart", chartSpec);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment