Dendrogram

// Dendrogram (`d3.cluster`) — every leaf on the same line, so the picture
// reads as "how these group up" rather than "how deep each branch is".
// That is exactly the difference from `d3.tree`.

const data = {
  name: 'estate',
  children: [
    { name: 'keep', children: [
      { name: 'Quote Engine' }, { name: 'Risk Scoring' },
      { name: 'Underwriting' }, { name: 'Data Lakehouse' },
    ]},
    { name: 'migrate', children: [
      { name: 'Policy Admin Core' }, { name: 'Contact Centre' },
      { name: 'Cloud Platform' },
    ]},
    { name: 'retire', children: [
      { name: 'Legacy Ledger' }, { name: 'Campaign Manager' },
    ]},
    { name: 'tolerate', children: [
      { name: 'BI & Reporting' }, { name: 'Network Core' },
    ]},
  ],
};

const root = d3.hierarchy(data);
const margin = { top: 20, right: 170, bottom: 20, left: 20 };
d3.cluster().size([
  height - margin.top - margin.bottom,
  width - margin.left - margin.right,
])(root);

const color = d3.scaleOrdinal(data.children.map(c => c.name), theme.palette);
const topOf = d => d.ancestors().find(a => a.depth === 1)?.data.name ?? '';

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

const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);

// Elbow connectors rather than curves — a dendrogram's job is to show
// discrete membership, and right angles say "grouped" more clearly.
g.append('g')
    .attr('fill', 'none')
    .attr('stroke-width', 1.5)
    .attr('stroke-opacity', 0.6)
  .selectAll('path')
  .data(root.links())
  .join('path')
    .attr('stroke', d => d.target.depth === 1 ? theme.muted : color(topOf(d.target)))
    .attr('d', d => `M${d.source.y},${d.source.x}V${d.target.x}H${d.target.y}`);

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

node.append('circle')
    .attr('r', 4)
    .attr('fill', d => d.depth === 0 ? theme.foreground : color(topOf(d)));

node.append('text')
    .attr('dy', '0.32em')
    .attr('x', d => d.children ? -8 : 8)
    .attr('text-anchor', d => d.children ? 'end' : 'start')
    .attr('fill', theme.foreground)
    .text(d => d.data.name);