Adjacency matrix

// Adjacency matrix — the honest view of a dense graph.
// Past ~20 nodes a node-link diagram is a hairball; a matrix stays readable
// and makes clusters show up as blocks along the diagonal.

const names = [
  'web', 'mobile-bff', 'gateway', 'orders', 'catalogue',
  'payments', 'identity', 'search', 'postgres', 'redis',
];

// weight[i][j] = calls/min from names[i] to names[j].
const weights = [
  [ 0,  0, 90,  0,  0,  0,  0,  0,  0,  0],
  [ 0,  0, 70,  0,  0,  0,  0,  0,  0,  0],
  [ 0,  0,  0, 62, 84,  0, 31, 45,  0,  0],
  [ 0,  0,  0,  0,  8, 40,  6,  0, 55, 12],
  [ 0,  0,  0,  4,  0,  0,  0, 22, 14, 61],
  [ 0,  0,  0,  3,  0,  0,  5,  0, 18,  0],
  [ 0,  0,  0,  0,  0,  0,  0,  0,  9, 27],
  [ 0,  0,  0,  0, 11,  0,  0,  0,  7, 33],
  [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [ 0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
];

const margin = { top: 110, right: 20, bottom: 20, left: 110 };
const side = Math.min(width - margin.left - margin.right,
                      height - margin.top - margin.bottom);

const scale = d3.scaleBand().domain(names).range([0, side]).padding(0.06);
const maxWeight = d3.max(weights.flat());
const colour = d3.scaleSequential([0, maxWeight], d3.interpolateBlues);

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

const cells = [];
for (let i = 0; i < names.length; i++) {
  for (let j = 0; j < names.length; j++) {
    cells.push({ i, j, value: weights[i][j] });
  }
}

g.selectAll('rect')
  .data(cells)
  .join('rect')
    .attr('x', d => scale(names[d.j]))
    .attr('y', d => scale(names[d.i]))
    .attr('width', scale.bandwidth())
    .attr('height', scale.bandwidth())
    .attr('rx', 2)
    .attr('fill', d => d.value === 0
      ? (theme.mode === 'dark' ? '#2a2a2a' : '#f2f2f2')
      : colour(d.value))
    // The diagonal is structurally meaningless (nothing calls itself here);
    // outline it so the eye uses it as a guide instead of reading it as data.
    .attr('stroke', d => d.i === d.j ? theme.muted : 'none')
    .attr('stroke-dasharray', '2,2');

g.append('g')
  .selectAll('text')
  .data(names)
  .join('text')
    .attr('x', -8)
    .attr('y', d => scale(d) + scale.bandwidth() / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', 'end')
    .attr('fill', theme.foreground)
    .text(d => d);

g.append('g')
  .selectAll('text')
  .data(names)
  .join('text')
    .attr('transform', d => `translate(${scale(d) + scale.bandwidth() / 2},-8) rotate(-45)`)
    .attr('fill', theme.foreground)
    .text(d => d);

svg.append('text')
    .attr('x', margin.left)
    .attr('y', 24)
    .attr('fill', theme.muted)
    .text('rows call columns · darker = more traffic');