# Kibana index data binding in the Vega Tree graph is difficult

**URL:** <https://discuss.elastic.co/t/kibana-index-data-binding-in-the-vega-tree-graph-is-difficult/323103>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [January 13, 2023, 8:18am UTC](https://discuss.elastic.co/t/kibana-index-data-binding-in-the-vega-tree-graph-is-difficult/323103 "2023-01-13T08:18:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dimple.P](https://avatars.discourse-cdn.com/v4/letter/d/9dc877/32.png) [@Dimple.P](https://discuss.elastic.co/u/Dimple.P)\
**Post date:** [January 13, 2023, 8:18am UTC](https://discuss.elastic.co/t/kibana-index-data-binding-in-the-vega-tree-graph-is-difficult/323103/1 "2023-01-13T08:18:28Z")

</div>

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

```auto
[{"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:

```auto
"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](https://us1.discourse-cdn.com/elastic/original/3X/6/a/6a827895cc7407cb77af75e8ccf789f202d1983c.png)

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/4/5/4540e34be238cf1244934f428455606393393873.png)

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [January 13, 2023, 11:23am UTC](https://discuss.elastic.co/t/kibana-index-data-binding-in-the-vega-tree-graph-is-difficult/323103/2 "2023-01-13T11:23:33Z")

</div>

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:

```json

{
  "$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:

 ![Screenshot 2023-01-13 at 12.23.10](https://us1.discourse-cdn.com/elastic/original/3X/0/7/071218bfeea433acc0d69a23ced03a5dc423eaf3.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [February 10, 2023, 11:24am UTC](https://discuss.elastic.co/t/kibana-index-data-binding-in-the-vega-tree-graph-is-difficult/323103/3 "2023-02-10T11:24:08Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.