Vega-lite interactive Bar Chart - graph

Question

I am trying to make a basic interactive chart where the user can select a country and observe a single measurement based on the height of the bar. However, prior to selecting a country, the chart shows all the bars stacked on top of each other. once a country is selected i achieve the view that i want.
{"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": "https://raw.githubusercontent.com/ConorQuah/ConorQuah.github.io/main/Happiness%26liberties_s%26e.csv"
},
"title": {
"text": "Happiness and Liberty",
"subtitle":"view the happiness of different countries. Notice how the colour of the bar changes!",
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start"
},
"height": 300,
"width": 300,
"transform": [{"filter": {"selection": "Region"}}],
"selection": {
"Region": {
"type": "single",
"fields": ["Country"],
"bind": {
"input": "select",
"options": [
"null",
"Finland",
"Sweden",
"New Zealand",
"United Kingdom",
"Serbia",
"Zimbabwe",
"Afghanistan"
],
"name": "Select a country"
}
}
},
"mark": {"type": "bar", "width":50},
"encoding": {
"color": {
"field": "Civil liberties",
"title": "Civil liberties",
"scale":{"scheme":"redyellowgreen", "domain":[0,60]},
"type": "quantitative"
},
"y": {
"field": "Happiness",
"scale": {"domain": [0,10]},
"type": "quantitative",
"title": "Happiness"
}
}
}

Answer 1

Here you go:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/ConorQuah/ConorQuah.github.io/main/Happiness%26liberties_s%26e.csv"
},
"title": {
"text": "Happiness and Liberty",
"subtitle": "view the happiness of different countries. Notice how the colour of the bar changes!",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start"
},
"params": [
{
"name": "p",
"select": {"type": "point", "fields": ["Country"]},
"bind": { "name": "Country",
"input": "select",
"options": [
"Pick a Country",
"Finland",
"Sweden",
"New Zealand",
"United Kingdom",
"Serbia",
"Zimbabwe",
"Afghanistan"
]
}
}
],
"height": 300,
"width": 300,
"transform": [{"filter": "datum.Country ==p_Country"}],
"mark": {"type": "bar", "width": 50},
"encoding": {
"color": {
"field": "Civil liberties",
"title": "Civil liberties",
"scale": {"scheme": "redyellowgreen", "domain": [0, 60]},
"type": "quantitative"
},
"y": {
"field": "Happiness",
"scale": {"domain": [0, 10]},
"type": "quantitative",
"title": "Happiness"
}
}
}