Kibana index data binding in the Vega Tree graph is difficult

Static data was successfully connected to the Vega-V5 tree graph, however when I attempted to attach Kibana index data, it failed. Is it feasible to link the index data from Kibana to the Vega Tree graph?

Eg: my_index

[{"id": 1,
    "name": "teacher",
    "timestamp":"2023-01-13T05:23:35Z"
  },
  {
    "id": 2,
    "name": "student1",
    "parent": 1,
    "timestamp":"2023-01-13T05:23:35Z"
  },
  {
    "id": 3,
    "name": "student2",
    "parent": 1,
    "timestamp":"2023-01-13T05:23:35Z"
  },
{
    "id": 5,
    "name": "student3",
    "parent": 2,
    "size": 3,
    "timestamp":"2023-01-13T05:23:35Z"
  }],

Kibana is getting the data as seen below when I attempt to bind it.

How I connected the Vega Tree graph with Kibana my index:

"data": [
    {
      "name": "tree",
      "url": {
                "%context%": true,
              "%timefield%":"timestamp",
                "index": "my_index",
                "body" : {"from": 0,
   "size": 10},
            "format": {
                "property": "hits.hits"
            }
  },
      "transform": [
        {
          "type": "stratify",
          "key": "id",
          "parentKey": "parent"
        },
        {
          "type": "tree",
          "method": {"signal": "layout"},
          "size": [{"signal": "height"}, {"signal": "width - 100"}],
          "separation": {"signal": "separation"},
          "as": ["y", "x", "depth", "children"]
        }
      ]
    },

All data combined into a single hit:
image

I think the missing bit was to set the _source prefix for field names.
I've managed to create a tree with this Vega spec:


{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
  "width": 600,
  "height": 1600,
  "padding": 5,

  data: [
    {
      name: tree
      url: {
        %context%: true
        %timefield%: timestamp
        index: my_tree_index
        body: {
          from: 0
          size: 10
        }
      }
      format: {
        property: hits.hits
      }
      transform: [
        {
          "type": "stratify",
          "key": "_source.id",
          "parentKey": "_source.parent"
        },
        {
          "type": "tree",
          "method": "tidy",
          "size": [{"signal": "height"}, {"signal": "width - 100"}],
          "separation": true,
          "as": ["y", "x", "depth", "children"]
        }
      ]
    },
    {
      "name": "links",
      "source": "tree",
      "transform": [
        { "type": "treelinks" },
        {
          "type": "linkpath",
          "orient": "horizontal",
          "shape": "diagonal"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "linear",
      "range": {"scheme": "magma"},
      "domain": {"data": "tree", "field": "depth"},
      "zero": true
    }
  ],

  "marks": [
    {
      "type": "path",
      "from": {"data": "links"},
      "encode": {
        "update": {
          "path": {"field": "path"},
          "stroke": {"value": "#ccc"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "tree"},
      "encode": {
        "enter": {
          "size": {"value": 100},
          "stroke": {"value": "#fff"}
        },
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "fill": {"scale": "color", "field": "depth"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "tree"},
      "encode": {
        "enter": {
          "text": {"field": "_source.name"},
          "fontSize": {"value": 9},
          "baseline": {"value": "middle"}
        },
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "dx": {"signal": "datum.children ? -7 : 7"},
          "align": {"signal": "datum.children ? 'right' : 'left'"},
          "opacity": 1
        }
      }
    }
  ]
}

With your example data I have: