Vega-lite default bar width strange

Question

I'm seeing the following oddly styled chart. I understand I can explicitly change the padding etc., but the default vega-lite layout is usually pretty good. I'm confused what I'm doing that's leading to this sub-normal behavior. Thanks! Here is the code in the vega-lite editor

I understand that I can also change x's type to ordinal to make the styling better, though I'm not sure I understand still why it is the difference I see. I need the type to be quantitative so I get the min/max brush bound, as opposed to the set.

Also I actually do not even know how to manually set the bar width after reading the documentation here https://vega.github.io/vega-lite/docs/scale.html. If anyone might have a working example that would be great.

Thanks.

Answer 1

As @marcprux mentioned, there is pre-binned support so you don't have to repeat the bin transform here. However, currently the prebinned support requires both bin_start and bin_end.

For now you could modify the spec to derive a new bin_end field and use it with x2.

{
  "data": ...
  "transform": [{
    "calculate": "datum.ShareWomen_bin+0.1",
    "as": "ShareWomen_bin_end"
  }],
  "mark": "bar",
  "encoding": {
    "x": {"bin": {"binned": true, "step": 0.1}, "field": "ShareWomen_bin", "type": "quantitative", "title": "ShareWomen_bin"},
    "x2": {"field": "ShareWomen_bin_end"},
    "y": {"field": "count", "type": "quantitative"}
  }
}

like this spec.

I can see that we shouldn't require deriving bin_end and thus have created an issue to track this feature request: https://github.com/vega/vega-lite/issues/6086.

Btw, the quantitative scale only affects the bar position.

To set the bar size directly, you can use size property in a mark definition:

mark: {type: "bar", size: 5}

Answer 2

Since you declare "x" as a quantitative field, there's no assumption that the points along the axis are evenly distributed. E.g., you could add in some data points in between the others:

      {"ShareWomen_bin": 0.83, "count": 40, "is_overview": true},
      {"ShareWomen_bin": 0.87, "count": 70, "is_overview": true},

and you would see them rendered in between the other bars:

As you mention, you can specify that the bars should be encoded as ordinal values. Another solution is to leave it as quantitative, but specify that it is binned, in which case the bars will also be rendered as if they were ordinal:

    "x": {"field": "ShareWomen_bin", "type": "quantitative", "bin": true},

Since it appears that your data is already binned, you should read about how vega-lite supports pre-binned data: https://vega.github.io/vega-lite/docs/bin.html#binned