Force graph

service map

Service map. Use for clusters, not for reading individual edges.

Force graph — service map: rendered example
Rendered by Gnomon from the source below. No edits.

The source

111 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.

// Force-directed graph — the default service map.
// Node radius encodes degree, so the things everything depends on are the
// things that look important.

const graph = {
  nodes: [
    { id: 'web',        group: 'edge'     },
    { id: 'mobile-bff', group: 'edge'     },
    { id: 'gateway',    group: 'edge'     },
    { id: 'orders',     group: 'domain'   },
    { id: 'catalogue',  group: 'domain'   },
    { id: 'payments',   group: 'domain'   },
    { id: 'identity',   group: 'domain'   },
    { id: 'search',     group: 'domain'   },
    { id: 'pricing',    group: 'domain'   },
    { id: 'postgres',   group: 'platform' },
    { id: 'redis',      group: 'platform' },
    { id: 'kafka',      group: 'platform' },
    { id: 's3',         group: 'platform' },
  ],
  links: [
    { source: 'web',        target: 'gateway'   },
    { source: 'mobile-bff', target: 'gateway'   },
    { source: 'gateway',    target: 'orders'    },
    { source: 'gateway',    target: 'catalogue' },
    { source: 'gateway',    target: 'identity'  },
    { source: 'gateway',    target: 'search'    },
    { source: 'orders',     target: 'payments'  },
    { source: 'orders',     target: 'pricing'   },
    { source: 'orders',     target: 'postgres'  },
    { source: 'orders',     target: 'kafka'     },
    { source: 'catalogue',  target: 'postgres'  },
    { source: 'catalogue',  target: 'redis'     },
    { source: 'catalogue',  target: 's3'        },
    { source: 'payments',   target: 'postgres'  },
    { source: 'identity',   target: 'redis'     },
    { source: 'search',     target: 'redis'     },
    { source: 'search',     target: 'kafka'     },
    { source: 'pricing',    target: 'postgres'  },
  ],
};

const nodes = graph.nodes.map(d => ({ ...d }));
const links = graph.links.map(d => ({ ...d }));

const degree = new Map(nodes.map(n => [n.id, 0]));
for (const l of links) {
  degree.set(l.source, degree.get(l.source) + 1);
  degree.set(l.target, degree.get(l.target) + 1);
}
const r = d3.scaleSqrt().domain([1, d3.max(degree.values())]).range([5, 16]);

const groups = Array.from(new Set(nodes.map(d => d.group)));
const color = d3.scaleOrdinal(groups, theme.palette);

const simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(links).id(d => d.id).distance(70))
    .force('charge', d3.forceManyBody().strength(-320))
    .force('centre', d3.forceCenter(width / 2, height / 2))
    .force('collide', d3.forceCollide().radius(d => r(degree.get(d.id)) + 4));

// 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('stroke', theme.muted)
    .attr('stroke-opacity', 0.45)
    .attr('stroke-width', 1.5)
  .selectAll('line')
  .data(links)
  .join('line')
    .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', d => r(degree.get(d.id)))
    .attr('fill', d => color(d.group))
    .attr('stroke', theme.background)
    .attr('stroke-width', 1.5);

node.append('text')
    .attr('x', d => r(degree.get(d.id)) + 4)
    .attr('dy', '0.35em')
    .attr('fill', theme.foreground)
    .text(d => d.id);

const legend = svg.append('g').attr('transform', 'translate(14,20)');
legend.selectAll('g')
  .data(groups)
  .join('g')
    .attr('transform', (_, i) => `translate(0,${i * 16})`)
    .call(g => g.append('circle').attr('r', 5).attr('fill', d => color(d)))
    .call(g => g.append('text')
        .attr('x', 11).attr('dy', '0.35em')
        .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