radial_multiple_arc_v1

radial_multiple_arc_v1.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A radial bar chart with multiple arcs, one for each category as a percentage of the whole.",
  "params": [
    {
      "name": "baseRadius",
      "value": 50,
      "bind": {"input": "range", "min": 0, "max": 100, "step": 1}
    },
    {
      "name": "arcWidth",
      "value": 10,
      "bind": {"input": "range", "min": 1, "max": 50, "step": 1}
    },
    {
      "name": "cornerRadius",
      "value": 2,
      "bind": {"input": "range", "min": 0, "max": 50, "step": 1}
    },
    {
      "name": "padAngle",
      "value": 0.02,
      "bind": {"input": "range", "min": 0, "max": 0.2, "step": 0.01}
    }
  ],
  "data": {
    "values": [
      {"category": "A", "value": 30},
      {"category": "B", "value": 20},
      {"category": "C", "value": 50},
      {"category": "D", "value": 40},
      {"category": "E", "value": 10}
    ]
  },
  "transform": [
    {"window": [{"op": "rank", "as": "rank"}], "groupby": []},
    {"calculate": "datum.rank * arcWidth + baseRadius", "as": "radius"},
    {"calculate": "(datum.rank + 1) * arcWidth + baseRadius", "as": "radius2"}
  ],
  "mark": {
    "type": "arc",
    "cornerRadius": {"expr": "cornerRadius"},
    "padAngle": {"expr": "padAngle"}
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "radius": {"field": "radius", "type": "quantitative"},
    "radius2": {"field": "radius2", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}