Skip to content

Instantly share code, notes, and snippets.

@AlainRo

AlainRo/.block

Last active October 29, 2017 14:46
Show Gist options
  • Save AlainRo/2b76eafc5add50ceb707179fb2040c27 to your computer and use it in GitHub Desktop.
Save AlainRo/2b76eafc5add50ceb707179fb2040c27 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-Lite
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<title>Vega Lite Bar Chart</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js"></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>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A simple bar chart with embedded data.",
"width": 360,
"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"}
}
};
// Embed the visualization in the container with id `vis`
const opt = {renderer: "svg"};
vegaEmbed("#vis", vlSpec, opt);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment