Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
horizontal barchart using vega.js
{
"width": 400,
"height": 200,
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
{"x": 7, "y": 19}, {"x": 8, "y": 87},
{"x": 9, "y": 52}, {"x": 10, "y": 48},
{"x": 11, "y": 24}, {"x": 12, "y": 49},
{"x": 13, "y": 87}, {"x": 14, "y": 66},
{"x": 15, "y": 17}, {"x": 16, "y": 27},
{"x": 17, "y": 68}, {"x": 18, "y": 16},
{"x": 19, "y": 49}, {"x": 20, "y": 15}
]
}
],
"scales": [
{
"name": "y",
"type": "ordinal",
"range": "height",
"domain": {"data": "table", "field": "y"}
},
{
"name": "x",
"type": "linear",
"range": "width",
"domain": {"data": "table", "field": "x"},
"nice": true
}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"enter": {
"y": {"scale": "y", "field": "y"},
"height": {"scale": "y", "band": true, "offset": -1},
"x": {"scale": "x", "field": "x"},
"x2": {"scale": "x", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment