vega horizontal bar 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/).