Vega-Lite: How do I include image marks in a doughnut chart?

user_6673754 0
Viewed 212

I would like to have image marks surrounding my doughnut chart instead of texts. The example for image marks use x and y for its coordinate. How should I adjust that for a doughnut chart where we work with radius and theta?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4, "image": url},
      {"category": "b", "value": 6, "image": url},
      {"category": "c", "value": 10, "image": url},
      {"category": "d", "value": 3, "image": url},
      {"category": "e", "value": 7, "image": url},
      {"category": "f", "value": 8, "image": url}
    ]
  },
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }],
  "view": {"stroke": null}
}

New vega version:

Open the Chart in the Vega Editor

vega vega-lite
1 Answers

After some trials and reading through the doc, it seems Image Mark cannot be positioned by theta encoding, but the example shows that x and y encodings are supported.

Therefore, I worked out this positioning via simple trigonometry and an extra layer to place the images in the doughnut:

{
    "transform": [
        {"joinaggregate": [{"op":"sum", "field": "value", "as": "total"}]},
        {
            "window": [{"op": "sum", "field": "value", "as": "cum"}],
            "frame": [null, 0]
        },
        {"calculate": "cos(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "y"},
        {"calculate": "sin(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "x"}
    ],
    "mark": {"type": "image", "width": 20, "height": 20},
    "encoding": {
        "url": {"field": "image"},
        "x": {"field": "x", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null},
        "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null}
    }
}

Yet another Vega Editor

As the order is messed up by the color encoding mentioned in comments below, a new window transform is added to generate an extra ordering field which is provided to color field

Renewed Vega Editor

3 changes were made: (2021-07-16)

  • Using cos in the calculate of y
  • Using sin in the calculate of x
  • Messing up the data value to check if working

Old & Wrong Vega Editor

user_127262940
Related