Tree Visualizations in Kibana

[Gaurav_Bahl]

Hello everyone,

I tried to find a kibana visualization plugin to display my data in tree format or hierarchy format. But I am not able to get any. Is there any plugin for that ?
Secondly, I have seen so many D3.js visualizations and I am thinking if we can directly integrate those in Kibana. Can you please help me in creating or using them.

Thanks,
Gaurav Bahl

[nickpeihl]

There is an experimental Vega plugin in Kibana that may be able to do this.

You might look at the Tree Diagram examples on the Vega homepage for inspiration.

[Gaurav_Bahl]

Thanks Nick. I am trying to create Tree Visualization but getting certain errors. Can you help me with that, though I know Team Elastic is out of Vega

[nickpeihl]

If the error is specific to Vega in Kibana, I might be able to help. But for general Vega errors it might be prudent to post in a Vega forum for a wider audience. Feel free to drop the error here and I can take a look.

[Gaurav_Bahl]

So I am trying to use Vega Tree Visualisations but I am getting "node is undefined" error. I used the same Json on online Vega editor but it was working fine, but when I tried to create that visualization under kibana 6.6 I am getting this error. I think that might be issue as Vega editor uses Vega 4 but Kibana 6.6 is using Vega 3.3.

Json Used:

{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"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"]
}
}
],

"data": [
{
"name": "tree",
"url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method":"tidy",
"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": "sequential",
"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"}
}
}
}
]
}