Vega-lite interactive Bar Chart

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"
    }
  }
}