vega horizontal bar charts - charts

Question

The vega documentation/tutorials suggest that setting up a horizontal bar chart is easy, but I can't figure it out for the life of me. How would I go about changing a vertical bar chart, such as http://vega.github.io/vega-editor/index.html?spec=bar, to a horizontal one?

Answer 1

Like this
{
"width": 200,
"height": 210,
"padding": "auto",
"data": [
{
"name": "raw",
"values": [
{"x": "A","y": 28},
{"x": "B","y": 55},
{"x": "C","y": 43},
{"x": "D","y": 91},
{"x": "E","y": 81},
{"x": "F","y": 53},
{"x": "G","y": 19},
{"x": "H","y": 87},
{"x": "I","y": 52}
],
"format": {"parse": {"y": "number"}},
"transform": [{"type": "filter","test": "(d.data.y!==null)"}]
}
],
"scales": [],
"marks": [
{
"_name": "cell",
"type": "group",
"properties": {
"enter": {"width": {"value": 200},"height": {"value": 210}}
},
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "raw","field": "data.y"},
"range": [0,200],
"zero": true,
"reverse": false,
"round": true,
"nice": true
},
{
"name": "y",
"type": "ordinal",
"domain": {"data": "raw","field": "data.x"},
"sort": true,
"range": [0,210],
"bandWidth": 21,
"round": true,
"nice": true,
"points": true,
"padding": 1
}
],
"axes": [
{
"type": "x",
"scale": "x",
"properties": {
"grid": {
"stroke": {"value": "#000000"},
"opacity": {"value": 0.08}
}
},
"layer": "back",
"format": "",
"ticks": 5,
"titleOffset": 38,
"grid": true,
"title": "y"
},
{
"type": "y",
"scale": "y",
"properties": {
"labels": {"text": {"template": "{{data | truncate:25}}"}},
"grid": {
"stroke": {"value": "#000000"},
"opacity": {"value": 0.08}
}
},
"layer": "back",
"titleOffset": 28,
"grid": true,
"title": "x"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "raw"},
"properties": {
"enter": {
"x": {"scale": "x","field": "data.y"},
"x2": {"value": 0},
"yc": {"scale": "y","field": "data.x"},
"height": {"value": 21,"offset": -1},
"fill": {"value": "#4682b4"}
},
"update": {
"x": {"scale": "x","field": "data.y"},
"x2": {"value": 0},
"yc": {"scale": "y","field": "data.x"},
"height": {"value": 21,"offset": -1},
"fill": {"value": "#4682b4"}
}
}
}
],
"legends": []
}
]
}
I generated this chart from
{
"data": {
"values": [
{"x":"A", "y":28}, {"x":"B", "y":55}, {"x":"C", "y":43},
{"x":"D", "y":91}, {"x":"E", "y":81}, {"x":"F", "y":53},
{"x":"G", "y":19}, {"x":"H", "y":87}, {"x":"I", "y":52}
]
},
"marktype": "bar",
"encoding": {
"y": {"type": "O","name": "x"},
"x": {"type": "Q","name": "y"}
}
}
with vega-lite (https://vega.github.io/vega-lite/).