Indented tree

A tabular layout for hierarchical data, indented trees allow one or more columns of values to be shown alongside indented names.

const chart = Plot.plot({
  axis: null,
  inset: 10,
  insetRight: 120,
  round: true,
  width: 200,
  height: 3600,
  marks: Plot.tree(flare, {
    path: "name",
    delimiter: ".",
    treeLayout: indent,
    strokeWidth: 1,
    curve: "step-before",
    textStroke: "none"
  })
});

display(chart);

This type of tree needs a custom layout:

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

const flare = FileAttachment("../data/flare.csv").csv({typed: true});