Search code examples
vega-lite

Vega-lite default bar width strange

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

e

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.

Solution

  • 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:

    enter image description here

    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},

    enter image description here

    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