Edge bundling

// Hierarchical edge bundling — dependencies routed along the package tree.
// Bundling collapses parallel edges into visible cables, so "this package
// depends on half the codebase" reads as one thick strand instead of noise.

const data = {
  name: 'app',
  children: [
    { name: 'ui', children: [
      { name: 'ui.shell',   imports: ['core.router', 'core.auth', 'data.store'] },
      { name: 'ui.editor',  imports: ['core.router', 'data.store', 'data.files'] },
      { name: 'ui.preview', imports: ['data.files', 'render.svg'] },
    ]},
    { name: 'core', children: [
      { name: 'core.router', imports: ['core.log'] },
      { name: 'core.auth',   imports: ['core.log', 'data.store'] },
      { name: 'core.log',    imports: [] },
    ]},
    { name: 'data', children: [
      { name: 'data.store', imports: ['core.log'] },
      { name: 'data.files', imports: ['core.log'] },
    ]},
    { name: 'render', children: [
      { name: 'render.svg',  imports: ['core.log', 'render.text'] },
      { name: 'render.text', imports: [] },
    ]},
  ],
};

const radius = Math.min(width, height) / 2 - 110;

const tree = d3.cluster().size([2 * Math.PI, radius]);
const root = tree(d3.hierarchy(data)
    .sort((a, b) => d3.ascending(a.data.name, b.data.name)));

// Resolve each leaf's `imports` into node pairs, both directions, so an
// edge can be drawn from either end.
const byName = new Map(root.leaves().map(d => [d.data.name, d]));
for (const leaf of root.leaves()) {
  leaf.incoming = [];
  leaf.outgoing = (leaf.data.imports || [])
    .map(name => [leaf, byName.get(name)])
    .filter(pair => pair[1]);
}
for (const leaf of root.leaves()) {
  for (const edge of leaf.outgoing) edge[1].incoming.push(edge);
}

const line = d3.lineRadial()
    .curve(d3.curveBundle.beta(0.85))
    .radius(d => d.y)
    .angle(d => d.x);

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

const svg = d3.select(container).append('svg')
    .attr('viewBox', [-width / 2, -height / 2, 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-opacity', 0.45)
    .attr('stroke-width', 1.5)
  .selectAll('path')
  .data(root.leaves().flatMap(leaf => leaf.outgoing))
  .join('path')
    .attr('stroke', ([from]) => color(groupOf(from)))
    .attr('d', ([from, to]) => line(from.path(to)));

svg.append('g')
  .selectAll('g')
  .data(root.leaves())
  .join('g')
    .attr('transform', d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
    .append('text')
      .attr('dy', '0.31em')
      .attr('x', d => d.x < Math.PI ? 6 : -6)
      .attr('text-anchor', d => d.x < Math.PI ? 'start' : 'end')
      .attr('transform', d => d.x < Math.PI ? null : 'rotate(180)')
      .attr('fill', d => color(groupOf(d)))
      .text(d => d.data.name);