Structure data for a tree layout

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

Hi @sonik ,

If I got it right, you are probably facing a popular Kibana request : Nested field support

As for Vega and what may build with it, maybe answer to this question and vega blog post will give you some ideas

Regards, Dima

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