How do you create grouped (individual) pie charts in Vega using the pie transform from a single dataset?

Question

I would like to create a network (graph) diagram using small pies as the nodes. However, I cannot figure out the right approach for generating the individual pies to use for the nodes.

I have a dataset with all of the values and would essentially like to apply a "groupby" operation before computing the "pie" transform (link), and then use "detail" to separate the pies into their individual elements, but the transform and marks do not seem to support either of these options directly. Instead, the pie transform seems to compute the layout based on all of the underlying data.

Consider this simple example based on the basic Vega pie chart (link to Online Vega Editor):

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic pie chart example.",
  "width": 200,
  "height": 200,
  "autosize": "none",

  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4, "group": 1},
        {"id": 2, "field": 6, "group": 1},
        {"id": 3, "field": 10, "group": 1},
        {"id": 4, "field": 3, "group": 2},
        {"id": 5, "field": 7, "group": 2},
        {"id": 6, "field": 8, "group": 2}
      ],
      "transform": [{"type": "pie", "field": "field"}]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    }
  ],

  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "fill": {"scale": "color", "field": "id"},
          "outerRadius": {"value": 50},
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "opacity": {"value": 0.8}
        }
      }
    }
  ]
}

In this example, I would like to use the group field to create two separate pies (each with three slices), but cannot figure out where in the specification this operation should occur. Once I have the individual pies, it should be straightforward to use them within the network layout by updating their x and y values (so I have excluded that part of this example for simplicity).

Answer 1

Is this what you want?

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic pie chart example.",
  "width": 200,
  "height": 300,
  "autosize": "pad",
  "data": [
    {
      "name": "table",
      "values": [
        {"id": 1, "field": 4, "group": 1},
        {"id": 2, "field": 6, "group": 1},
        {"id": 3, "field": 10, "group": 1},
        {"id": 4, "field": 3, "group": 2},
        {"id": 5, "field": 7, "group": 2},
        {"id": 6, "field": 8, "group": 2}
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "id"},
      "range": {"scheme": "category20"}
    },
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table", "field": "group"},
      "range": "height",
      "padding": 0
    }
  ],
  "marks": [
    {
      "type": "group",
      "name": "f",
      "from": {"facet": {"data": "table", "name": "facet", "groupby": "group"}},
      "encode": {"update": {"y": {"scale": "yscale", "field": "group"}}},
      "marks": [
        {
          "type": "arc",
          "from": {"data": "facet"},
          "transform": [{"type": "pie", "field": "datum.field"}],
          "encode": {
            "enter": {
              "startAngle": {"field": "startAngle"},
              "endAngle": {"field": "endAngle"},
              "fill": {"scale": "color", "field": "id"},
              "outerRadius": {"value": 50},
              "x": {"signal": "width / 2"},
              "y": {"signal": "height / 2"},
              "opacity": {"value": 0.8}
            }
          }
        }
      ]
    }
  ]
}