Skip to content

Instantly share code, notes, and snippets.

@mcnuttandrew

mcnuttandrew/.block

Last active June 28, 2019 20:45
Show Gist options
  • Save mcnuttandrew/0b4684a742b116e32ec80a759b6ffef6 to your computer and use it in GitHub Desktop.
Save mcnuttandrew/0b4684a742b116e32ec80a759b6ffef6 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-Lite - Categorical Bar Chart By Colum
Raw
.block
license: bsd-3-clause
Raw
README.md

Vega-lite example

Categorical Bar Chart from Columns

Sometimes you have data structured as a collection of columns in a table and you want to be able to draw a bar chart with each column getting it's own bar. This is an example of how to do that.

Raw
bar.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A simple bar chart with embedded data.",
"width": 360,
"data": {
"values": [
{"a": 1, "b": 2, "c": 3},
{"a": 2, "b": 4, "c": 9},
{"a": 3, "b": 8, "c": 27},
{"a": 4, "b": 16, "c": 81}
]
},
"transform": [
{"fold": ["a", "b", "c"]}
],
"mark": "bar",
"encoding": {
"x": {"field": "key", "type": "ordinal"},
"y": {"field": "value", "type": "quantitative", "aggregate": "mean"},
"tooltip": {"field": "b", "type": "quantitative"}
}
}
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@4"></script>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "bar.vl.json";
vegaEmbed('#vis', spec)
// result.view provides access to the Vega View API
.then(result => console.log(result))
.catch(console.warn);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment