Force tree

// Force-directed *tree* — a hierarchy relaxed rather than ranked.
// Feeding `root.links()` to a simulation gives the organic look of a mind
// map while keeping the parent/child structure exact. Distance by depth
// keeps the trunk short and the twigs loose.

const data = {
  name: 'postgres', children: [
    { name: 'orders', children: [
      { name: 'checkout' }, { name: 'fulfilment' }, { name: 'returns' },
    ]},
    { name: 'payments', children: [
      { name: 'ledger' }, { name: 'payouts' }, { name: 'refunds' },
    ]},
    { name: 'catalogue', children: [
      { name: 'search-index' }, { name: 'pricing' }, { name: 'merchandising' },
    ]},
    { name: 'reporting', children: [
      { name: 'finance-pack' }, { name: 'ops-dashboard' },
    ]},
  ],
};

const root = d3.hierarchy(data);
const nodes = root.descendants().map(d => ({
  id: d.data.name,
  depth: d.depth,
}));
const byName = new Map(nodes.map(n => [n.id, n]));
const links = root.links().map(l => ({
  source: byName.get(l.source.data.name),
  target: byName.get(l.target.data.name),
}));

const color = d3.scaleOrdinal([0, 1, 2], [theme.accent, theme.palette[1], theme.palette[4]]);
const radius = d => [12, 8, 5][d.depth] ?? 5;

const simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(links).distance(d => 110 - d.target.depth * 25).strength(1))
    .force('charge', d3.forceManyBody().strength(-300))
    .force('x', d3.forceX(width / 2).strength(0.05))
    .force('y', d3.forceY(height / 2).strength(0.05))
    .force('collide', d3.forceCollide(24));

// Run the simulation to completion up front, then draw once. A live
// simulation would be serialised at an arbitrary tick and never look the
// same twice; seeding \`randomSource\` pins the initial jitter too.
simulation.randomSource(d3.randomLcg(42)).stop();
for (let i = 0; i < 400; i++) simulation.tick();

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);

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke', theme.muted)
    .attr('stroke-opacity', 0.5)
  .selectAll('line')
  .data(links)
  .join('line')
    .attr('stroke-width', d => 3 - d.target.depth * 0.7)
    .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
    .attr('x2', d => d.target.x).attr('y2', d => d.target.y);

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

node.append('circle')
    .attr('r', radius)
    .attr('fill', d => color(d.depth))
    .attr('stroke', theme.background)
    .attr('stroke-width', 1.5);

node.append('text')
    .attr('x', d => radius(d) + 4)
    .attr('dy', '0.35em')
    .attr('fill', theme.foreground)
    .attr('font-weight', d => d.depth === 0 ? 600 : 400)
    .text(d => d.id);