Rectangle width, offset, and band are not behaving correctly

[ajturner]

I'm trying to specify the bar spacing between two types of plots - Histograms and Ordinal.

Ordinal

the space between bars or groups of bars roughly equal the width of a single bar

per Stephen Few

However I can't seem to achieve this. Using the vega v2 editor choosing Bar, narrowing down to just 4 values and investigating width:

Width: { Band:true }

"marks": {
   "properties": {
       "enter": {
          "width": {"scale": "x", "band": true, "offset": -1},
}}}

Bars centered on Ticks, but I want half-width spacing between the bars

Width

"marks": {
   "properties": {
       "enter": {
          "width": { "band": false, "value": 60}
}}}

Bars no longer centered on ticks

Width and Offset

"marks": {
   "properties": {
       "enter": {
          "width": { "band": false, "value": 60, "offset": 30}
}}}

Offset only adding padding to the right-hand side, not "shifting" the entire bar to the right.

Histograms

Using Polestar to create a binned histogram:

The ranges should have the starting value on the left-side of the bar, and the end value on the right-side.

thoughts @kanitw @arvind

[marcprux]

This has been an open issue for a couple of years in Vega 1: https://github.com/trifacta/vega/issues/64

[arvind]

So a couple of things here. @kanitw and I figured out that if you set the padding property of the x scale to 0.5, that should get you the scenario you're looking for @ajturner.

With regards to an x/y center, I could be wrong (@jheer?) but 4d6cc14 added xc and yc properties, though we failed to document their inclusion. We'll resolve this with the v2 documentation.

There's probably some work we can do with the extent properties (x, x2, xc, width and y, y2, yc, height) to make such positioning tasks easier. Any ideas?

[marcprux]

FTR, I couldn't get the "xc" property to do anything different than "x" with "rect" marks. However, the scale "padding" does help solve this problem:

{
  "width": 500,
  "height": 200,
  "padding": "strict",
  "data": [
    {
      "name": "table",
      "values": [
        {"x": "Category 1",  "y": 11}, {"x": "Category 2",  "y": 22},
        {"x": "Category 3",  "y": 44}, {"x": "Category 4",  "y": 88}
      ]
    }
  ],
  "scales": [
    {
      "name": "xs",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table", "field": "x"},
      "padding": 0.5
    },
    {
      "name": "ys",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "y"}
    }
  ],
  "axes": [
    {"type": "x", "scale": "xs"},
    {"type": "y", "scale": "ys"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "xs", "field": "x"},
          "width": {"scale": "xs", "band": true},
          "y": {"scale": "ys", "field": "y"},
          "y2": {"scale": "ys", "value": 0},
          "fill": {"value": "steelblue"}
        }
      }
    }
  ]
}