Vega-lite bar chart space between bars - d3.js

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:
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.
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.
How do I change font styling? See this gist.