How to set up dropdown options dynamically based on data in Vega

The short answer is there is no way to make the dropdown options refer to a data field. So let's look at the long answer.

Here's my issue. I have a table of names. I want to display those names in a dropdown for the user to select one of them. Then I want to filter some data based on the selected value. So I'd love to do something like this:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "GPU Benchmarks",
  "width": 1400,
  "height": 1300,
  "padding": 5,
  "signals": [
      {
      "name": "selected_game",
      "bind": {
        "input": "select",
        "options": {"data": "games", "field": "name"}
      }
    }
  ],
  "data": [
    {
      "name": "games",
      "url": "some url..."
    }, {
      "name": "data_to_filter",
      "transform": [{
        "type": "filter",
        filter based on selected_game
      }]
      "url": "some other url"
    }
  ],
  ...

This feature is missing from Vega, and there were feature requests filed:

• https://github.com/vega/vega/issues/778 from Apr 2017.
• In that ticket, someone referred to a PR they were working on in 2019, but it got abandoned.

Another option is to generate the input ourself in the HTML, then bind it to Vega. See the doc.

A final option is to simply generate the whole list of options somewhere else, and put it directly in the list of bound options. I went with that:

  "signals": [
      {
      "name": "selected_game",
      "bind": {
        "input": "select",
        "options": ["game1", "game2", ...]
      }
    }
  ],
  "data": [
    {
      "name": "game_benchmarks",
      "url": "some url",
      "transform": [
        { "type": "filter", "expr": "datum.name == game_name" }
      ]
    }
  ]
  ...