Combining tree and text (as table)?

[miretchin]

Hello,

I am trying to replicate the visualization here, where a table is displayed right next to a tree.

https://observablehq.com/@d3/indented-tree

Is this out of scope for your library? The key code from that script is:

  for (const {label, value, format, x} of columns) {
    svg.append("text")
        .attr("dy", "0.32em")
        .attr("y", -nodeSize)
        .attr("x", x)
        .attr("text-anchor", "end")
        .attr("font-weight", "bold")
        .text(label);

    node.append("text")
        .attr("dy", "0.32em")
        .attr("x", x)
        .attr("text-anchor", "end")
        .attr("fill", d => d.children ? null : "#555")
      .data(root.copy().sum(value).descendants())
        .text(d => format(d.value, d));
  }

I've tried replicating this with Plot.text but it appears combining these marks disrupts how inset handles the Plot.tree. Here is the code for the tree alone.

indent = js("""
() => {
  return (root) => {
    root.eachBefore((node, i) => {
      node.x = i;
      node.y = node.depth;
    });
  };
}
""")

Plot.plot({
    'axis': None,
    'inset': 10,
    'insetRight': 800,
    'round': True,
    'width': 1000,
    'height': 6000,
    'marks': [
        Plot.tree(path_utility, {
            'path': 'Path',
            'strokeWidth': 1,
            'curve': "step-before",
            'treeLayout': indent,
            'treeSort': "node:height",
            'delimiter': '^',
        }),
    ]
})

I don't actually need all the dynamic logic for calculating sizes. I can precompute all the numbers. Just want to align the table with the tree.

Thanks again!

[juba]

Hi,

I think your issue is not related to pyobsplot. You're trying to reproduce using Plot something which has been created with pure d3. I think you would have better odds to get help on this if you ask you question to the Plot or d3 communities...

[miretchin]

Okay, thank you. I'll go ahead and close this.