data sorting issue in funnel chart in vegalite

Question

i want to create a funnel chart and i find a vega spec with sorted data it look good - Editor link

but my issue is that when i used unsorted data it not look like funnel is there any way in vegalite to make it in proper order as funnel look means by any sorting of vegalite it is possible?

Answer 1

Sorting is available in vega-lite, The editor config which you attached through link is already containing a sorting config in y-axis encoding. You can read more about the sorting config in vega-lite documentation

Now to solve your issue, I have interchanged some Count field values so it becomes unsorted data and added the sorting config with descending order.

"encoding": {
    "y": {
      "field": "Pipeline",
      "type": "nominal",
      "sort": {"field": "Count", "order": "descending"}
    }
  },

You can refer the link or the code below:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Draw funnel chart in Vega/ Vega-lite",
  "data": {
    "values": [
      {"Pipeline": "Consultation", "Count": 40000},
      {"Pipeline": "Qualified", "Count": 100000},
      {"Pipeline": "Negotiation", "Count": 30000},
      {"Pipeline": "Prototype", "Count": 10000},
      {"Pipeline": "Closing", "Count": 140000},
      {"Pipeline": "Won", "Count": 20000},
      {"Pipeline": "Finalized", "Count": 80000}
    ]
  },
  "encoding": {
    "y": {
      "field": "Pipeline",
      "type": "nominal",
      "sort": {"field": "Count", "order": "descending"}
    }
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {"field": "Pipeline", "type": "nominal", "legend": null},
        "x": {"field": "Count", "type": "quantitative", "stack": "center"}
      }
    },
    {
      "mark": "text",
      "encoding": {"text": {"field": "Count", "type": "quantitative"}}
    }
  ],
  "width": 500
}

Let me know if this works.