Search code examples
vega-lite

VegaLite Split Slices and aggregate by ranges

I'm trying to create a similar dashboard using VegaLite: enter image description here

My example is in this link

Is there a way to configure the ranges in the dashboard and show it in a similar way as in the screenshot? In need to devide the pie chart to two ranges:

0<=x<1

X>=1

Solution

  • You could use a binned transform or if you want just two discrete categories then a calculated field works just fine and can also be used in the legend.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"username": "client1", "value": 4},
      {"username": "client2", "value": 0.6},
      {"username": "client3", "value": 0},
      {"username": "client4", "value": 3},
      {"username": "client5", "value": 7},
      {"username": "client6", "value": 8}
    ]
  },
  "transform": [
    {"calculate": "datum.value>=3?'>=3':'<3'" ,"as": "binned"}
  ]
  ,
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "aggregate": "count" },
    "color": {"field": "binned", "type": "nominal"}
  }
}