How I can sort my bar chart with the text value

Question

so, I have this code where I want to sort my values on y axis of bar chart by using value from my column rank,pls note this is numeric but after multiple try i am not able to do the changes.

> `{
>   "background": "#F2F2F2",
>   "height": "container",
>   "width": "container",
>   "data": {
>     "values": [
>       {"x": "Japan", "y": 46, "rank":1,"img": "https://cdn.countryflags.com/thumbs/japan/flag-800.png"},
>       {"x": "China", "y": 30,"rank":3 ,"img": "https://www.countryflags.com/wp-content/uploads/china-flag-png-large.png"},
>       {"x": "Russia", "y": 20,"rank":2, "img": "https://cdn.countryflags.com/thumbs/russia/flag-800.png"},
>       {"x": "Australia", "y": 46,"rank":4, "img": "https://www.countryflags.com/wp-content/uploads/flag-jpg-xl-9-2048x1024.jpg"}
>     ]
>   },

>   "layer": [{
>   "mark": {"type":"bar","height": {"band": 0.1},"color":"#73171F" },
> "encoding": {
>     "y": {"field": "x", "type": "nominal","axis":null},
>     "x": {"field": "y", "type": "quantitative","axis":null,"order": {"field": "rank", "type": "quantitative"}
>         }


>     }},
> {
>       "mark": {
>         "type": "image",
>         "width": 50,
>         "height": 50,

>         "baseline": "middle"
>       },
>       "encoding": {
>         "y": {"field": "x", "type": "nominal"},
>         "x": {"field": "y", "type": "quantitative"},
>          "x": {"value": -90},
>         "url": {"field": "img", "type": "nominal"}
>       }
>     },
>     {
>       "mark": {
>         "type": "text",
>         "baseline": "middle",
>         "align": "left" 

>       },
>       "encoding": {
>         "y": {"field": "x", "type": "nominal"},
>         "x": {"value": -50}, 
>         "text": {"field": "x", "type": "nominal"},
>         "color": {"value": "#535945"}
>       }
>     },
>     {
>       "mark": {
>         "type": "text",
>         "baseline": "middle",
>         "align": "left" 

>       },
>       "encoding": {
>         "y": {"field": "x", "type": "nominal"},
>         "x": {"value": -150}, 
>         "text": {"field": "rank", "type": "quantitative", "format":"d"},
>         "color": {"value": "#535945"}
>       }
>     }
>   ]
> }

> ```
type here
> ```
> `

I tried sorting it by providing sort, order functions but no use, I need some help with sorting part,rest is working fine. Thanks!!

Answer 1

Try this: https://vega.github.io/vega-lite/docs/sort.html

// A Single View or a Layer Specification
{
  ...,
  "mark/layer": ...,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      "sort": ...,         // sort
      ...
    },
    "y": ...,
    ...
  },
  ...
}

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "background": "#F2F2F2",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {
        "x": "Japan",
        "y": 46,
        "rank": 1,
        "img": "https://cdn.countryflags.com/thumbs/japan/flag-800.png"
      },
      {
        "x": "China",
        "y": 30,
        "rank": 3,
        "img": "https://www.countryflags.com/wp-content/uploads/china-flag-png-large.png"
      },
      {
        "x": "Russia",
        "y": 20,
        "rank": 2,
        "img": "https://cdn.countryflags.com/thumbs/russia/flag-800.png"
      },
      {
        "x": "Australia",
        "y": 46,
        "rank": 4,
        "img": "https://www.countryflags.com/wp-content/uploads/flag-jpg-xl-9-2048x1024.jpg"
      }
    ]
  },
  "encoding": {
    "y": {
      "field": "x",
      "type": "nominal",
      "axis": null,
      "sort": {"field": "rank", "order": "ascending"}
    },
    "x": {"field": "y", "type": "quantitative", "axis": null}
  },
  "layer": [
    {
      "mark": {"type": "bar", "height": {"band": 0.1}, "color": "#73171F"},
      "encoding": {
        "y": {
          "field": "x",
          "type": "nominal",
          "axis": null,
          "sort": {"field": "rank", "order": "ascending"}
        },
        "x": {"field": "y", "type": "quantitative", "axis": null}
      }
    },
    {
      "mark": {
        "type": "image",
        "width": 50,
        "height": 50,
        "baseline": "middle"
      },
      "encoding": {
        "y": {"field": "x", "type": "nominal"},
        "x": {"value": -90},
        "url": {"field": "img", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "text", "baseline": "middle", "align": "left"},
      "encoding": {
        "y": {"field": "x", "type": "nominal"},
        "x": {"value": -50},
        "text": {"field": "x", "type": "nominal"},
        "color": {"value": "#535945"}
      }
    },
    {
      "mark": {"type": "text", "baseline": "middle", "align": "left"},
      "encoding": {
        "y": {"field": "x", "type": "nominal"},
        "x": {"value": -150},
        "text": {"field": "rank", "type": "quantitative", "format": "d"},
        "color": {"value": "#535945"}
      }
    }
  ],
  "config": {}
}