Skip to content

Instantly share code, notes, and snippets.

@AlainRo

AlainRo/.block

Created March 7, 2018 10:02
Show Gist options
  • Save AlainRo/a823e5c2a39663aaebadd7659ed78ce2 to your computer and use it in GitHub Desktop.
Save AlainRo/a823e5c2a39663aaebadd7659ed78ce2 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-lite Bar Chart with Tooltip
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vega-tooltip@0/build/vega-tooltip.min.css">
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0"></script>
</head>
<body>
<div id="vis-bar"></div>
<script>
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A simple bar chart with embedded data.",
"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" }
}
}
var opt = {
mode: "vega-lite",
renderer : "svg",
actions: false
};
vegaEmbed("#vis-bar", vlSpec, opt).then(function (result) {
vegaTooltip.vegaLite(result.view, vlSpec);
}).catch(console.error);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment