# How to create tree layout query in vega?

**URL:** https://discuss.elastic.co/t/how-to-create-tree-layout-query-in-vega/304308
**Category:** Kibana
**Tags:** vega
**Created:** [May 10, 2022, 5:58am UTC](https://discuss.elastic.co/t/how-to-create-tree-layout-query-in-vega/304308 "2022-05-10T05:58:07Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Arifullah](https://avatars.discourse-cdn.com/v4/letter/a/c6cbf5/32.png) [@Arifullah](https://discuss.elastic.co/u/Arifullah)
#### Post date: [May 10, 2022, 5:58am UTC](https://discuss.elastic.co/t/how-to-create-tree-layout-query-in-vega/304308/1 "2022-05-10T05:58:07Z")

</div>

Hope you are doing well, I have a problem in creating kibana query for a tree layout visualization in vega. I will send the example of tree layout which I want but I don't know how to edit the query for my requirements. I have an index by the name of 123 and their are alot of fields in that index but I only want two fields in tree layout. The fields are A and B in A field there is only one number and it is repeated but in B field there are many numbers and each of them are repeated. The following is the example of code and my requirements are explained in below image.(the brackets show the repeatition of each number in b field)  
 ![example](https://us1.discourse-cdn.com/elastic/original/3X/8/2/82b95f76d5ea1ef31170aa32a81c3d796b565d4f.png)

```auto
{
  "$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,

  "signals": [
    {
      "name": "labels", "value": true,
      "bind": {"input": "checkbox"}
    },
    {
      "name": "layout", "value": "tidy",
      "bind": {"input": "radio", "options": ["tidy", "cluster"]}
    },
    {
      "name": "links", "value": "diagonal",
      "bind": {
        "input": "select",
        "options": ["line", "curve", "diagonal", "orthogonal"]
      }
    },
    {
      "name": "separation", "value": false,
      "bind": {"input": "checkbox"}
    }
  ],

  "data": [
    {
      "name": "tree",
      "url": "data/flare.json",
      "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"]
        }
      ]
    },
    {
      "name": "links",
      "source": "tree",
      "transform": [
        { "type": "treelinks" },
        {
          "type": "linkpath",
          "orient": "horizontal",
          "shape": {"signal": "links"}
        }
      ]
    }
  ],

  "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": "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": {"signal": "labels ? 1 : 0"}
        }
      }
    }
  ]
}

```

---

<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: [June 7, 2022, 5:58am UTC](https://discuss.elastic.co/t/how-to-create-tree-layout-query-in-vega/304308/2 "2022-06-07T05:58:39Z")

</div>

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