Vega-lite bar chart space between bars

Question

D3 newbie. How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below. I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.

   {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 1200,
  "height": 900,
  "data": {
    "url": "data/seattle-weather.csv"
  },
  "mark": "bar",
  "encoding": {

    "x": {
      "aggregate": "count",
      "type": "quantitative"
    },

    "size": {
      "value": 40



    },
    "y": {
      "field": "date",
      "type": "temporal",
      "timeUnit": "month",
      "axis": {
        "title": "Regions"
      }
    },

    "color": {
      "field": "weather",
      "type": "nominal",
      "scale": {
        "domain": [
          "0-20 days",
          "21-27 days",
          ">28 days"
        ],
        "range": [
          "red",
          "orange",
          "green"
        ]
      },
      "legend": {
        "title": "Case Ageing"
      }
    }
  }
}

Answer 1

I can understand your confusion. It seems there are three questions:

1. How do I change bin width for histograms? This is documented here . If you have trouble with a reproducible example, I will be happy to help.
2. How do I adjust the spacing of the bars? This is controlled by padding , paddingInner and paddingOuter all documented at the encoding level and at the config level . You might be having trouble since you are setting size manually with "size": {"value": 40} , but I am guessing this is a remnant from experimenting. Here is a working spec from this gist . You can play with paddingOuter , paddingInner , or add padding to apply to both inner and outer.
3. How do I change font styling? See this gist .