Indented tree

// Indented tree — a file explorer as a diagram. Every node gets its own
// row, so long names never collide and you can hang columns of metrics off
// the right-hand side.

const data = {
  name: 'desktop/src', children: [
    { name: 'api', children: [
      { name: 'plantuml.ts', size: 312 },
      { name: 'board.ts', size: 96 },
      { name: 'chat.ts', size: 74 },
    ]},
    { name: 'stores', children: [
      { name: 'editorStore.ts', size: 1060 },
      { name: 'fileStore.ts', size: 430 },
      { name: 'plannerStore.ts', size: 388 },
    ]},
    { name: 'utils', children: [
      { name: 'hexagonal.ts', size: 340 },
      { name: 'd3Render.ts', size: 300 },
      { name: 'ea', children: [
        { name: 'parse.ts', size: 223 },
        { name: 'render.ts', size: 408 },
      ]},
    ]},
  ],
};

// `eachBefore` visits in document order, which is exactly the row order — so
// the index it hands the callback *is* the y position. No layout pass needed.
const root = d3.hierarchy(data).eachBefore((d, i) => { d.index = i; });

const rowHeight = 22;
const indent = 18;
const rows = root.descendants();
const boxHeight = rows.length * rowHeight + 30;

const svg = d3.select(container).append('svg')
    .attr('viewBox', [0, 0, width, boxHeight])
    .attr('width', width)
    .attr('height', boxHeight)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 12);

const x = d => 14 + d.depth * indent;
const y = d => 20 + d.index * rowHeight;

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke', theme.muted)
    .attr('stroke-opacity', 0.45)
  .selectAll('path')
  .data(root.links())
  .join('path')
    .attr('d', d => `M${x(d.source)},${y(d.source)}V${y(d.target)}h${indent - 4}`);

const node = svg.append('g')
  .selectAll('g')
  .data(rows)
  .join('g')
    .attr('transform', d => `translate(${x(d)},${y(d)})`);

node.append('circle')
    .attr('r', 3.5)
    .attr('fill', d => d.children ? theme.accent : theme.muted);

node.append('text')
    .attr('dy', '0.32em')
    .attr('x', 8)
    .attr('fill', theme.foreground)
    .attr('font-weight', d => d.children ? 600 : 400)
    .text(d => d.data.name);

// Right-hand metric column — the reason to pick this over a tidy tree.
svg.append('g')
    .attr('text-anchor', 'end')
    .attr('fill', theme.muted)
  .selectAll('text')
  .data(rows.filter(d => d.data.size))
  .join('text')
    .attr('x', width - 14)
    .attr('y', d => y(d))
    .attr('dy', '0.32em')
    .text(d => `${d.data.size} lines`);