donut_exmaple_vl_v2

donut_exmaple_vl_v2.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A half-donut chart with adjustable parameters and custom data.",
  "params": [
    {
      "name": "radius",
      "value": 0,
      "bind": {"input": "range", "min": 0, "max": 100, "step": 1}
    },
    {
      "name": "radius2",
      "value": 50,
      "bind": {"input": "range", "min": 0, "max": 100, "step": 1}
    },
    {
      "name": "theta_single_arc",
      "value": -3.14,
      "bind": {"input": "range", "min": -6.28, "max": 0}
    },
    {
      "name": "theta2_single_arc",
      "value": 0,
      "bind": {"input": "range", "min": 0, "max": 6.28}
    },
    {
      "name": "cornerRadius",
      "value": 0,
      "bind": {"input": "range", "min": 0, "max": 50, "step": 1}
    },
    {
      "name": "padAngle",
      "value": 0.02,
      "bind": {"input": "range", "min": 0, "max": 1.57}
    },
    {
      "name": "strokeWidth",
      "value": 4,
      "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
    }
  ],
  "hconcat": [
    {
      "title": "Half-Donut Arc",
      "data": {"values": [{}]},
      "mark": {
        "type": "arc",
        "radius": {"expr": "radius"},
        "radius2": {"expr": "radius2"},
        "theta": {"expr": "theta_single_arc"},
        "theta2": {"expr": "theta2_single_arc"},
        "cornerRadius": {"expr": "cornerRadius"},
        "padAngle": {"expr": "padAngle"},
        "strokeWidth": {"expr": "strokeWidth"}
      }
    },
    {
      "title": "Stacked Arcs (Half-Donut)",
      "data": {
        "values": [
          {"category": "A", "value": 30},
          {"category": "B", "value": 20},
          {"category": "C", "value": 50},
          {"category": "D", "value": 40},
          {"category": "E", "value": 10}
        ]
      },
      "mark": {
        "type": "arc",
        "theta": {"expr": "theta_single_arc"},
        "theta2": {"expr": "theta2_single_arc"},
        "radius": {"expr": "radius"},
        "radius2": {"expr": "radius2"},
        "cornerRadius": {"expr": "cornerRadius"},
        "padAngle": {"expr": "padAngle"},
        "strokeWidth": {"expr": "strokeWidth"}
      },
      "encoding": {
        "theta": {"field": "value", "type": "quantitative"},
        "color": {"field": "category", "type": "nominal"}
      }
    }
  ]
}