Arc diagram

dependencies

Nodes on one axis, arcs above. Readable where a force graph is not, provided the ordering means something.

Arc diagram — dependencies: rendered example
Rendered by Gnomon from the source below. No edits.

The source

91 lines of D3 JavaScript, and uses only the bundled D3 build. Copy it, or open the template inside Gnomon and render it as it is.

// Arc diagram — a dependency list you can actually read.
// Nodes sit on one axis; each dependency is an arc. Grouping by `layer`
// and sorting by it makes cross-layer edges (the interesting ones) obvious.

const nodes = [
  { id: 'web',        layer: 'edge' },
  { id: 'mobile-bff', layer: 'edge' },
  { id: 'gateway',    layer: 'edge' },
  { id: 'orders',     layer: 'domain' },
  { id: 'catalogue',  layer: 'domain' },
  { id: 'payments',   layer: 'domain' },
  { id: 'identity',   layer: 'domain' },
  { id: 'postgres',   layer: 'platform' },
  { id: 'redis',      layer: 'platform' },
  { id: 'kafka',      layer: 'platform' },
];

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

const layers = Array.from(new Set(nodes.map(d => d.layer)));
const color = d3.scaleOrdinal(layers, theme.palette);
const order = new Map(nodes.map((d, i) => [d.id, i]));

const margin = { top: 40, right: 24, bottom: 190, left: 24 };
const x = d3.scalePoint()
    .domain(nodes.map(d => d.id))
    .range([margin.left, width - margin.right])
    .padding(0.5);
const baseline = height - margin.bottom;

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

// Arc above the axis when the edge points forward, below when it points
// back — so a cycle is visible rather than hidden under a coincident path.
svg.append('g')
    .attr('fill', 'none')
    .attr('stroke-opacity', 0.5)
    .attr('stroke-width', 1.5)
  .selectAll('path')
  .data(links)
  .join('path')
    .attr('stroke', ([s]) => color(nodes.find(n => n.id === s).layer))
    .attr('d', ([s, t]) => {
      const x1 = x(s);
      const x2 = x(t);
      const r = Math.abs(x2 - x1) / 2;
      const sweep = order.get(t) > order.get(s) ? 1 : 0;
      return `M${x1},${baseline} A${r},${r} 0 0 ${sweep} ${x2},${baseline}`;
    });

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

node.append('circle')
    .attr('r', 5)
    .attr('fill', d => color(d.layer));

node.append('text')
    .attr('transform', 'rotate(45)')
    .attr('x', 10)
    .attr('dy', '0.35em')
    .attr('fill', theme.foreground)
    .text(d => d.id);

const legend = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top - 20})`);
legend.selectAll('g')
  .data(layers)
  .join('g')
    .attr('transform', (_, i) => `translate(${i * 110},0)`)
    .call(g => g.append('rect')
        .attr('width', 10).attr('height', 10).attr('rx', 2)
        .attr('fill', d => color(d)))
    .call(g => g.append('text')
        .attr('x', 15).attr('y', 9)
        .attr('fill', theme.muted)
        .text(d => d));

Render this offline

This template ships in Gnomon and renders on your machine, with no account and nothing sent to a server. The browser editor is free and needs no install.

Get GnomonOpen the browser editor

Others in D3 visualisations