Circle Packing: Which shape of data is needed for the pack transform?

Question

I try to create a circle packing chart. My data is already in tree form. This is what I tried:

{
  "width": 932,
  "height": 932,
  "data": {
    "name": "tree",
    "values": {
      "name": "root",
      "children" : [
        {"name" : "leaf1", "value" : 100},
        {"name" : "branch",
        "children" : [
          {"name" : "leaf2", "value" : 200},
          {"name" : "leaf3", "value" : 300}
        ]}
      ]
    },
    "transform": [
      {
        "type": "pack",
        "field": "value",
        "size": [{"signal": "width"}, {"signal": "height"}]
      }
    ]
  },
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "tree", "field": "value"},
      "range": {"data": "tree", "field": "value"}
    }
  ]
}

Results in an Error [Error] w transform requires a backing tree data source. Any pointers are appreciated.

Answer 1

Corresponding to the Vega documentation, the Pack Transform

processes a collection of special tree node objects generated by an upstream nest or stratify transform.

therefore, I examined the stratify-test in the Vega repo and this is the generated data:

{
  data: {
    id: "a",
  },
  height: 2,
  depth: 0,
  parent: null,
  id: "a",
  children: [
    {
      data: {
        id: "b",
        pid: "a",
      },
      height: 0,
      depth: 1,
      parent: [Circular],
      id: "b",
    },
    {
      data: {
        id: "c",
        pid: "a",
      },
      height: 1,
      depth: 1,
      parent: [Circular],
      id: "c",
      children: [
        {
          data: {
            id: "d",
            pid: "c",
          },
          height: 0,
          depth: 2,
          parent: [Circular],
          id: "d",
        },
      ],
    },
  ],
  lookup: {
    a: [Circular],
    b: {
      data: {
        id: "b",
        pid: "a",
      },
      height: 0,
      depth: 1,
      parent: [Circular],
      id: "b",
    },
    c: {
      data: {
        id: "c",
        pid: "a",
      },
      height: 1,
      depth: 1,
      parent: [Circular],
      id: "c",
      children: [
        {
          data: {
            id: "d",
            pid: "c",
          },
          height: 0,
          depth: 2,
          parent: [Circular],
          id: "d",
        },
      ],
    },
    d: {
      data: {
        id: "d",
        pid: "c",
      },
      height: 0,
      depth: 2,
      parent: {
        data: {
          id: "c",
          pid: "a",
        },
        height: 1,
        depth: 1,
        parent: [Circular],
        id: "c",
        children: [
          [Circular],
        ],
      },
      id: "d",
    },
  },
}