How to setup a month slider filter on Vega-Lite? - json

Question

I've been trying to create a proportional symbol map with a month filter slider so that the bubbles change as I shift the slider. However, I've only been able to make a slider appear but the interactivity doesn't seem to work. I'd be very glad if someone could help me with this. This is the code I have so far. Thanks!
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 450,
"title": "Refugee Diaspora From Ukraine Post Invasion",
"projection": { "type": "equalEarth" },
"layer": [
{
"data": {
"url": "https://raw.githubusercontent.com/syedzubinhafiz/test_london/main/ne_110m.topojson.json",
"format": { "type": "topojson", "feature": "ne_110m_admin_0_countries" }
},
"mark": { "type": "geoshape", "fill": "lightgray", "stroke": "white" }
},
{
"data": {
"url": "https://raw.githubusercontent.com/syedzubinhafiz/test_london/main/combined.csv"
},
"mark": { "type": "circle" },
"params": [
{
"name": "Month Selection",
"value": 3,
"select": { "type": "point", "fields": ["month"] },
"bind": {
"month": { "input": "range", "min": 3, "max": 9, "step": 1 }
}
}
],
"transform": [
{
"timeUnit": "month",
"field": "date",
"as": "month"
},
{ "filter": { "field": "month", "gt": 3 } }
],
"encoding": {
"longitude": { "field": "centroid_lon", "type": "quantitative" },
"latitude": { "field": "centroid_lat", "type": "quantitative" },
"tooltip": [{ "field": "country" }, { "field": "individuals" }],
"size": {
"field": "individuals",
"type": "quantitative",
"title": "Immigrants"
},
"color": {
"field": "country",
"type": "nominal",
"scale": { "type": "linear", "scheme": "category10" }
}
}
}
]
}
`