Deneb 100% Stacked bar chart - sort of colors by another column

[belvoir99]

EDIT: I have solved this - see my 'reply' below. Thanks.

I have created a 100% stacked bar chart (normalize in Vega Lite terminology) and have managed to apply a column with hex codes to the visual so that I can use colors that have been specified in a table. Works beautifully!

My next challenge has defeated me - sorting each Year Group column by another column called SortOrder. 

In the example below, Year 1 (the first column on the left) should be sorted in, from the bottom up, {yellow, green, blue} order. This is because row 0 (yellow) has SortOrder 16, row 1 (green) has SortOrder 17 and row 2 (blue) has SortOrder 18. Instead it is sorting yellow, blue, green which is some unknown sort order.

I did place a 'sort' segment of code in the 'condition' part of the 'color' code but it had no effect. I also put it in the 'y' section but again it didn't do anything. I've been looking at the documentation at https://vega.github.io/vega-lite/docs/condition.html and https://vega.github.io/vega-lite/docs/sort.html but just can't see how to do it. I'm pretty new to Deneb which is undoubtedly the issue!
Here's the 'sort' segment I tried:

"sort": {
	"field": "SortOrder",
	"op": "min",
	"order": "descending"
}

Here's the Deneb visual and dataset with Year 1 highlighted in red:

Here's my Deneb specification code without any 'sort' code added:

{
  "data": {"name": "dataset"},
  "mark": {
    "type": "bar",
    "tooltip": true
  },
  "encoding": {
    "x": {
      "field": "Year Group",
      "type": "nominal"
    },
    "y": {
      "field": "Pupil Count",
      "type": "quantitative",
      "aggregate": "sum",
      "stack": "normalize",
      "axis": {"labelAngle": 0}
    },
    "color": {
      "condition": {
        "test": "datum['SortOrder']",
        "field": "HexCodes",
        "legend": null,
        "scale": null
      },
      "value": "#d3d3d3"
    },
    "tooltip": [
      {
        "field": "Assessment",
        "type": "nominal"
      },
      {
        "field": "Pupil Count",
        "type": "quantitative"
      },
      {
        "field": "SortOrder",
        "type": "nominal"
      }
    ]
  }
}

Any help would be gratefully received!!! Thanks!

[belvoir99 · Accepted solution]

If anyone finds this interesting, after much research, I have solved the Legend issue too.

See this webpage - https://vega.github.io/vega-lite/docs/scale.html#example-setting-color-range-based-on-a-field

Originally I built the 'color' section of the code above from someone's post, but the code is much simpler and works just fine!

    "color": {
      "type": "nominal",
      "field": "Assessment",
      "scale": {"range": {"field": "HexCodes"}}
    },

See below:

Now I just need to tidy it up!

[belvoir99]

I found the solution in this article - https://vega.github.io/vega-lite/docs/stack.html#sorting-stack-order 

I needed to add an 'order' section: 

    "order": {"aggregate": "min", "field": "SortOrder"},

NEXT CHALLENGE:

• I need to get the Legend working - at present it just returns the hexcodes as a list. If you have any ideas on this, I'd be very happy!