vega-litevegavega-embed

data sorting issue in funnel chart in vegalite


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 with un sorted it not making 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?


Solution

  • 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.