How can I get my Vega marks to update when a signal changes?

Question

I am using Vega to plot a bar chart. I also have a drop down list 'signal' that is used to specify the sort order of the data:

...

  "signals": [
    {
      "name": "sortby",
      "value": "name",
      "bind": {"input": "select", "options": ["name", "net_worth"]}
    }
  ],
  "data": [
    {
      "name": "people",
      "values": [
        {"name": "Grimes", "net_worth": 1.2},
        {"name": "Johnny", "net_worth": 6},
        {"name": "Elon", "net_worth": 100},
        {"name": "Amber", "net_worth": 0.1}
      ],
      "transform": [
        {
          "type": "collect",
          "sort": {"field": {"signal": "sortby"}, "order": "ascending"}
        }
      ]
    }
  ],
...

The sort transform is working correctly, when the chart is initially rendered, the data is sorted according to the default sort value of 'name'.

When I change the selected sortby value I see that the 'people' data is correctly sorted (I can see this by inspecting the Data Viewer tab in the Vega editor), however the marks do not update.

I've made sure that the encode.update definition for the marks holds all the positional data. I'm a bit stumped as to why the chart doesn't update, it feels like it's probably just due to a simple oversight by me and I'm hoping that someone here can spot what the issue is!

The full code is pasted below and is also available in the editor: Open the Chart in the Vega Editor

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 400,
  "padding": 5,
  "signals": [
    {
      "name": "sortby",
      "value": "name",
      "bind": {"input": "select", "options": ["name", "net_worth"]}
    }
  ],
  "data": [
    {
      "name": "people",
      "values": [
        {"name": "Grimes", "net_worth": 1.2},
        {"name": "Johnny", "net_worth": 6},
        {"name": "Elon", "net_worth": 100},
        {"name": "Amber", "net_worth": 0.1}
      ],
      "transform": [
        {
          "type": "collect",
          "sort": {"field": {"signal": "sortby"}, "order": "ascending"}
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "people", "field": "name"},
      "range": "height",
      "padding": 0.1
    },
    {
      "name": "xscale",
      "domain": {"data": "people", "field": "net_worth"},
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [
    {"orient": "top", "scale": "xscale"},
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "people"},
      "encode": {
        "enter": {"fill": {"value": "steelblue"}},
        "update": {
          "height": {"scale": "yscale", "band": 1},
          "width": {"scale": "xscale", "field": "net_worth"},
          "x": {"scale": "xscale", "value": 0},
          "y": {"scale": "yscale", "field": "name"}
        },
        "exit": {"width": {"scale": "xscale", "value": 0}}
      }
    }
  ]
}

Answer 1

This is currently an open bug as described here: https://github.com/vega/vega/issues/1417. You can register your interest on that page to see when it will be fixed. In the meantime, I have used the workaround described to get the functionality you're after.

Editor.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 400,
  "padding": 5,
  "signals": [
    {
      "name": "sortby",
      "value": "name",
      "bind": {"input": "select", "options": ["name", "net_worth"]}
    }
  ],
  "data": [
    {
      "name": "people",
      "values": [
        {"name": "Grimes", "net_worth": 1.2},
        {"name": "Johnny", "net_worth": 6},
        {"name": "Elon", "net_worth": 100},
        {"name": "Amber", "net_worth": 0.1}
      ],
      "transform": [
        {
          "type": "window",
          "sort": {"field": {"signal": "sortby"}},
          "ops": ["row_number"],
          "fields": [null],
          "as": ["rank"]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {
        "data": "people",
        "field": "name",
        "sort": {"field": "rank", "op": "min"}
      },
      "range": "height",
      "padding": 0.1
    },
    {
      "name": "xscale",
      "domain": {"data": "people", "field": "net_worth"},
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [
    {"orient": "top", "scale": "xscale"},
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "people"},
      "encode": {
        "enter": {"fill": {"value": "steelblue"}},
        "update": {
          "height": {"scale": "yscale", "band": 1},
          "width": {"scale": "xscale", "field": "net_worth"},
          "x": {"scale": "xscale", "value": 0},
          "y": {"scale": "yscale", "field": "name"}
        },
        "exit": {"width": {"scale": "xscale", "value": 0}}
      }
    }
  ]
}