Understanding Vertical Bar charts in Vega

Question

I've been playing around with Vega, but I can't get my head around how to turn a vertical bar chart into an horizontal bar chart.

A similar question was posted a while ago here: vega horizontal bar charts but the provided answer isn't very clear on what exactly is being done to the code to produce the desired result. I also haven't been able to get the solution to run!

My understanding for now is that you need to switch the X and Y axis and scales, but where I get lost is in getting the mark to be flipped as well? I've tried setting the "x" and "y" attributes but I just get a blank chart in return... It really feels like I'm only missing one thing as my axes are right, but can't figure what it is!

EDIT: made some progress! My columns are now appearing, but their position is weirdly shifted vs the actual ticks. I've looked into adjusting the "points" parameter of the ordinal scale, but as a result the last column

The plot I obtain right now.

And with the "points" parameter set to true for the y scale.

Here's the code I have so far below

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "points": true
      "range": "height",
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": {
            "r": {
              "value": 66
            },
            "g": {
              "value": 190
            },
            "b": {
              "value": 244
            }
          }
        }
      }
    }
  ]
}

Antoine Chesnais Antoine Chesnais · Accepted Answer · 2016-02-17T10:15:38

Victory!

Here's a working spec!

I used the "padding" property of the ordinal scale to get the desired result.

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "height",
      "points": true,
      "padding": 1,
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": [
            66,
            190,
            244
          ]
        }
      }
    }
  ]
}

Understanding Vertical Bar charts in Vega

1 Answers