Search code examples
visualizationpie-chartvega-literadial

How do you create a radial plot with pre-defined radius data?

I am working on a variation of the Radial Plot in Vega-Lite where I would like to pre-define the radius of the arcs. However, when I add a "rad" attribute to the data and try to use that to set the radius, I begin to have very strange results as shown in the image below. It appears that the pie chart is trying to group-by the radius (or something) rather than keeping them as part of the same stack. Is there something I can do to fix this issue and get the desired result using Vega-Lite's built-in arc and pie functionality?

broken radial chart with overlapping arcs

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple radial chart with embedded data.",
  "data": {
    "values": [
      {"data": 12, "rad": 12}, 
      {"data": 23, "rad": 11}, 
      {"data": 47, "rad": 10}, 
      {"data": 6,  "rad": 12}, 
      {"data": 52, "rad": 9}, 
      {"data": 19, "rad": 8}
    ]
  },
  "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"},
  "encoding": {
    "theta": {"field": "data", "type": "quantitative", "stack": true},
    "radius": {"field": "rad", "scale": {"type": "linear"}},
    "color": {"field": "data", "type": "nominal", "legend": null}
  }
}

I tried simply referencing the expected data field and removing the "stack" and "scale" encodings, but none of these seemed to behave as expected, so I am wondering if this is a bug with the underlying behavior.

Solution

  • It's currently a bug: https://github.com/vega/vega-lite/issues/7957

    Is Vega an option?