how to make an indented tree in vega

Question

I'm trying to create an indented tree e.g. as in https://observablehq.com/@d3/indented-tree

I think that what this example does which I can't replicate in vega is encapsulated in this code:

root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }

eachBefore is a pre-order traversal on the output of d3.hierarchy.

Is there any way to get this result from (upstream) vega, or is this a feature request for an index output from the tree transform? (/something similar, or else a custom transform)

By the way, I think it may be easy to turn the specific tree layout example into an indented tree because the id happens to give the same 'index' ordering (I think), but think we need to use eachBefore where the data isn't so conveniently ordered.

Thanks for any suggestions!

Declan

Update

I made a change in vega-hierarchy described here:

https://github.com/declann/vega/commit/a651ff36cd3f0897054aa1b236f82e701db62432

Now I can use pre_traversal_id from tree transform output to do indented trees, e.g.:

indented tree in (custom) vega-editor, with tree output including pre_traversal_id field

Modified spec: https://gist.github.com/declann/91fd150ae04016e5890a30295fa58a07

Answer 1

Not sure if this help, but, when I enter at vega.github.io/vega/examples/tree-layout I played with the controls and (after change the settings to: layout:tidy - links:orthogonal - separation:true) I got a similar result you shown in the observablehq page:

Open the Chart in the Vega Editor

Code:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
  "width": 600,
  "height": 1600,
  "padding": 5,

  "signals": [
    {
      "name": "labels", "value": true
    },
    {
      "name": "layout", "value": "tidy"
    },
    {
      "name": "links", "value": "orthogonal"
    }
  ],

  "data": [
    {
      "name": "tree",
      "url": "data/flare.json",
      "transform": [
        {
          "type": "stratify",
          "key": "id",
          "parentKey": "parent"
        },
        {
          "type": "tree",
          "method": {"signal": "layout", "value": "tidy"},
          "size": [{"signal": "height"}, {"signal": "width - 100"}],
          "separation": true,
          "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": "greys"},
      "domain": {"data": "tree", "field": "depth"},
      "zero": true
    }
  ],

  "marks": [
    {
      "type": "path",
      "from": {"data": "links"},
      "encode": {
        "update": {
          "path": {"field": "path"},
          "stroke": {"value": "#828282"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "tree"},
      "encode": {
        "enter": {
          "size": {"value": 25}
        },
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "fill": {"field": "depth"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "tree"},
      "encode": {
        "enter": {
          "text": {"field": "name"},
          "baseline": {"value": "middle"}
        },
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "dx": {"signal": "datum.children ? -7 : 7"},
          "align": {"signal": "datum.children ? 'right' : 'left'"}
        }
      }
    }
  ]
}