# Multiple trees in one vizualization

**URL:** https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650
**Category:** Kibana
**Tags:** vega
**Created:** [December 12, 2019, 12:59pm UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650 "2019-12-12T12:59:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Michaela\_Krkosova](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michaela_krkosova/32/46926_2.png) [@Michaela\_Krkosova](https://discuss.elastic.co/u/Michaela_Krkosova)
#### Post date: [December 12, 2019, 12:59pm UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650/1 "2019-12-12T12:59:22Z")

</div>

Hello  
I made quite simple tree visualization in Vega. I would like to made multiple trees in one vizualization grouped by "group" value - for example if I add another value  
{"id": 3595, "name": "Vytvořit povinné pohyby", "group": 2},  
I should get 2 different trees in one visualization. Is it even possible ??? I tried Barley Trellis Plot but has not been succesfull  
Thansk  
Miša

```
{ "$schema": "https://vega.github.io/schema/vega/v4.3.0.json",
  "padding": 100,
  "signals": [
    {
      "name": "labels",
      "value": "id",
      "bind": {"input": "radio", "options": ["id", "name"]}
    },
    {
      "name": "layout",
      "value": "tidy",
      "bind": {"input": "radio", "options": ["tidy", "cluster"]}
    },
    {
      "name": "links",
      "value": "diagonal",
      "bind": {
        "input": "select",
        "options": ["line", "curve", "diagonal", "orthogonal"]
      }
    }
  ],
  "data": [
    {
      "name": "tree",
      "values": [
        {"id": 1427, "name": "Změnit evidenční skupinu", "group": 1},
        {"id": 488, "name": "Vytvořit pohyb", "parent": 1427, "group": 1},
        {"id": 30, "name": "Zaúčtování pohybů", "parent": 488, "group": 1},
        {"id": 3224, "name": "Generování pohybů", "parent": 488, "group": 1},
        {"id": 537, "name": "Generovat plán odpisů", "parent": 30, "group": 1},
        {"id": 3595, "name": "Vytvořit povinné pohyby", "parent": 1427, "group": 1},
  
      ],
      "transform": [
        {"type": "stratify", "key": "id", "parentKey": "parent"},
        {
          "type": "tree",
          "method": {"signal": "layout"},
          "size": [{"signal": "height"}, {"signal": "width - 100"}],
          "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": "blues"},
      "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": 50}, "stroke": {"value": "#fff"}},
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "fill": {"scale": "color", "field": "depth"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "tree"},
      "encode": {
        "enter": {"fontSize": {"value": 15}, "baseline": {"value": "middle"}},
        "update": {
          "text": {"signal": "labels==='id' ? datum.id : datum.name"},
          "x": {"field": "x"},
          "y": {"field": "y"},
          "dx": {"value": 7},
          "align": {"value": "left"}
        }
      }
    }
  ]
}
```

---

<div class="post-metadata">

### Author: ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)
#### Post date: [December 12, 2019, 2:56pm UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650/2 "2019-12-12T14:56:56Z")

</div>

cc @nyuriks

I can link you to similar multiple tree view in Vega : [Kibana Vega - Multiple Buckets visualization - how?](https://discuss.elastic.co/t/kibana-vega-multiple-buckets-visualization-how/131822/3)  
[https://groups.google.com/forum/#!msg/vega-js/Q2XrYMOVluw/sHlRxtk1DQAJ](https://groups.google.com/forum/#!msg/vega-js/Q2XrYMOVluw/sHlRxtk1DQAJ)

Hope this helps, if not revert back, and will try more options.  
Thanks  
Rashmi

---

<div class="post-metadata">

### Author: ![Michaela\_Krkosova](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michaela_krkosova/32/46926_2.png) [@Michaela\_Krkosova](https://discuss.elastic.co/u/Michaela_Krkosova)
#### Post date: [December 13, 2019, 11:45am UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650/3 "2019-12-13T11:45:34Z")

</div>

Hallo Rashmi  
I totally love your solution with time axe. Thank you for it.  
I managed to adapt it for my needs, but there is one point that needs to be included.

One function can run multiple times in choosen time period. And it can be connected to various different functions, but this connection is based on threadId and should be considered.

Best regards Misa

---

<div class="post-metadata">

### Author: ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)
#### Post date: [December 13, 2019, 11:49pm UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650/4 "2019-12-13T23:49:17Z")

</div>

> [@Michaela\_Krkosova](#):
>
> ur solution with time axe. Thank you for it.  
> I managed to adapt it for my needs, but there is one point that needs to be included.
> 
> One function can run multiple times in choosen time period. And it can be connected to various different functi

Do you mind opening an enhancement request with your needs Misa,

> **[Build software better, together](https://github.com/elastic/kibana/issues/new?template=Feature_request.md)**
>
> GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

Thanks  
Rashmi

---

<div class="post-metadata">

### Author: ![Michaela\_Krkosova](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michaela_krkosova/32/46926_2.png) [@Michaela\_Krkosova](https://discuss.elastic.co/u/Michaela_Krkosova)
#### Post date: [December 14, 2019, 6:57pm UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650/5 "2019-12-14T18:57:05Z")

</div>

Hey Rashmi  
I managed to change your script to fullfill my needs - just change formula in data\_links part. Thank you for your willingness and help.  
Much appreciate it  
Misa

---

<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: [January 11, 2020, 6:57pm UTC](https://discuss.elastic.co/t/multiple-trees-in-one-vizualization/211650/6 "2020-01-11T18:57:14Z")

</div>

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