Tree Visualizations in Kibana


(Gaurav Bahl) #1

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


(Nick Peihl) #2

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) #3

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 :slight_smile:


(Nick Peihl) #4

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) #5

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"}
}
}
}
]
}