Hi everybody,
I faced some problems with structuring my data for a tree layout.
The data must be structured as follows
[
{
"id": 1,
"name": "flare"
},
{
"id": 2,
"name": "analytics",
"parent": 1
},
{
"id": 3,
"name": "cluster",
"parent": 2
},
{
"id": 4,
"name": "AgglomerativeCluster",
"parent": 3,
"size": 3938
},
{
"id": 5,
"name": "CommunityStructure",
"parent": 3,
"size": 3812
},
{
"id": 6,
"name": "HierarchicalCluster",
"parent": 3,
"size": 6714
},
{
"id": 7,
"name": "MergeEdge",
"parent": 3,
"size": 743
},
{
"id": 8,
"name": "graph",
"parent": 2
},
{
"id": 9,
"name": "BetweennessCentrality",
"parent": 8,
"size": 3534
},
{
"id": 10,
"name": "LinkDistance",
"parent": 8,
"size": 5731
},
{
"id": 11,
"name": "MaxFlowMinCut",
"parent": 8,
"size": 7840
},
{
"id": 12,
"name": "ShortestPaths",
"parent": 8,
"size": 5914
},
{
"id": 13,
"name": "SpanningTree",
"parent": 8,
"size": 3416
},
{
"id": 14,
"name": "optimization",
"parent": 2
},
{
"id": 15,
"name": "AspectRatioBanker",
"parent": 14,
"size": 7074
},
{
"id": 16,
"name": "animate",
"parent": 1
},
{
"id": 17,
"name": "Easing",
"parent": 16,
"size": 17010
},
{
"id": 18,
"name": "FunctionSequence",
"parent": 16,
"size": 5842
},
{
"id": 19,
"name": "interpolate",
"parent": 16
},
{
"id": 20,
"name": "ArrayInterpolator",
"parent": 19,
"size": 1983
},
{
"id": 21,
"name": "ColorInterpolator",
"parent": 19,
"size": 2047
},
{
"id": 22,
"name": "DateInterpolator",
"parent": 19,
"size": 1375
},
{
"id": 23,
"name": "Interpolator",
"parent": 19,
"size": 8746
}
]
an so on...
I have 4 separate fields in my index (lvl1, lvl2, lvl3, lvl4). All of them are text type.
I`ve tried to create 2-level tree.
This is my code:
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"autosize": "none",
"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: {
%context%: true
//%timefield%: @timestamp
index: index-*
body: {
"size": 0
"aggs": {
"table": {
"composite": {
"size": 1
"sources": [
{
"name": {
"terms": {"field": "lvl1.keyword"}
}
},
{
"id": {
"terms": {"field": "id.keyword"}
}
}
]
}
},
"aggs": {
"composite": {
"size": 10000
"sources": [
{
"name": {
"terms": {"field": "lvl2.keyword"}
}
},
{
"id": {
"terms": {"field": "id.keyword"}
}
},
{
"parent": {
"terms": {"field": "rec_id_20210409.keyword"}
}
}
]
}
}
}
}
},
format: {property: "aggregations.table.buckets"}
"transform": [
{type: "formula", expr: "datum.key.name", as: "name"},
{type: "formula", expr: "datum.key.id", as: "id"},
{
"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": "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"
}
}
}
}
],
"legends": [
{
"fill": "color",
"type": "symbol",
"title": "depth"
}
]
}
And this is response:
{
"took": 89,
"timed_out": false,
"_shards": {
"total": 10,
"successful": 10,
"skipped": 0,
"failed": 0
},
"hits": {
"total": 1344244,
"max_score": null,
"hits": []
},
"aggregations": {
"table": {
"after_key": {
"name": "managment",
"id": "100"
},
"buckets": [
{
"key": {
"name": "managment",
"id": "100"
},
"doc_count": 1,
"name": "managment",
"id": "100",
"y": 795,
"x": 0,
"depth": 0,
"children": 0
}
]
},
"aggs": {
"buckets": [
{
"key": {
"name": "managment",
"parent": "100"
},
]
}
}
}
And the problem is that vega can`t read properties of several buckets (like I have).
Is there any way to have data structured as I need or I have to create new index for this?
Thanks in advance,
Nikita