Add filtering with a selection menu, it does not work

Question

My purpose is when I click one of the city_name, then the graph will filter to only show information about that city.

The code at params section is what I add for filtering with a selection menu in Vegta-Lite. (The method I am trying to use)

However, as shown as the picture below, even I filter by Brisbane, the graph still give me everything instead of just one line graph. (i.e. My filter menu does not work.)

It's wired, the selection menu is already exist, but it cannot link to my graph. Feels like this selection menu exist independently....

Anyone know how can I fix this?

i.e. How can I make my selection menu link to my graph so that I can filter by city_name?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 800, "height": 200,
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/data/rainfall_tidy.csv"},

  "params": [
    {
      "name":"City_Selection",
      "bind":{
        "input":"select",
        "options":[
          null,
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
  ],
  "labels":[
    "Show All",
    "Adelaide",
    "Brisbane",
   "Canberra",
    "Melbourne",
   "Perth",
   "Sydney"
  ],
  "name":"City_Selection:"
}
}
],

  "mark": {
    "type": "line",
    "point": {
      "filled": false,
      "fill": "white"
    }
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date"},
    "y": {"aggregate":"mean", "field": "rainfall", "type": "quantitative"},
    "color": {"field": "city_name", "type": "nominal"}
  }
}

Answer 1

The "params" approach to defining selections is currently experimental, and not fully implemented in the current release of Vega-Lite.

If you want to use an input box to filter data, the most straightforward approach is to follow the Input Element Binding section of the Vega-Lite documentation, and use a Filter transform to filter your data based on the selection you create.

Here is an example (view in Vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 800,
  "height": 200,
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {
    "url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/data/rainfall_tidy.csv"
  },
  "selection": {
    "city_selector": {
      "type": "single",
      "fields": ["city_name"],
      "bind": {
        "input": "select",
        "options": [
          null,
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
        ],
        "labels": [
          "Show All",
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
        ],
        "name": "City Selection:"
      }
    }
  },
  "transform": [{"filter": {"selection": "city_selector"}}],
  "mark": {"type": "line", "point": {"filled": false, "fill": "white"}},
  "encoding": {
    "x": {"timeUnit": "year", "field": "date"},
    "y": {"aggregate": "mean", "field": "rainfall", "type": "quantitative"},
    "color": {
      "field": "city_name",
      "type": "nominal",
      "scale": {
        "domain": [
          "Adelaide",
          "Brisbane",
          "Canberra",
          "Melbourne",
          "Perth",
          "Sydney"
        ]
      }
    }
  }
}