Creating custom bar chart in Vega-Lite - vega-lite

Question

I am a newbie to Vega-Lite and I am trying to replicate a chart similar to this
Following is my code and it does not generate what I need.
{
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"width":800,
"height":600,
"autosize":{
"type":"fit",
"contains":"padding"
},
"data":{
"url":"data/cars.json"
},
"mark":{
"type":"rect",
"tooltip":true,
"strokeWidth":0.1,
"stroke":"white"
},
"encoding":{
"x":{
"field":"Horsepower",
"type":"quantitative",
"bin":{
"maxbins":100
},
"axis":{
"labelAngle":0
}
},
"y":{
"aggregate":"count",
"field":"Horsepower",
"type":"quantitative"
}
}
}
Here is what it does
What do I need to do to be able to get my desired output? There is a question here already asked on the topic How to reproduce the Unsub histogram in Altair? but it was done in python altair, which I am not trying to do. I want to generate that using solely Vega-Lite.
Thank you in advance.

Answer 1

You can use a bin transform followed by a window transform to generate the fields required to create this kind of chart. For example (open in editor):
{
"data": {"url": "data/cars.json"},
"transform": [
{"bin": {"maxbins": 50}, "field": "Horsepower", "as": "Horsepower"},
{"window": [{"op": "count", "as": "index"}], "groupby": ["Horsepower"]}
],
"mark": {
"type": "rect",
"tooltip": true,
"strokeWidth": 0.3,
"stroke": "white"
},
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative", "bin": "binned"},
"x2": {"field": "Horsepower_end"},
"y": {
"field": "index",
"type": "ordinal",
"scale": {"reverse": true},
"title": "count"
}
},
"width": 400,
"height": 300
}