Force graph

disjoint clusters

Force graph that keeps unconnected clusters apart rather than flinging them off screen.

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

The source

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

// Disjoint force graph — for a graph with more than one component.
// `forceCenter` only holds the *whole* system in place, so isolated islands
// drift off screen. Swapping it for forceX/forceY pins every component
// independently, which is the fix.

const graph = {
  nodes: [
    { id: 'auth-api',     group: 'identity' },
    { id: 'session-store', group: 'identity' },
    { id: 'idp',          group: 'identity' },
    { id: 'scim-sync',    group: 'identity' },

    { id: 'ledger',       group: 'finance'  },
    { id: 'payouts',      group: 'finance'  },
    { id: 'reconciler',   group: 'finance'  },

    { id: 'ingest',       group: 'data'     },
    { id: 'lakehouse',    group: 'data'     },
    { id: 'bi',           group: 'data'     },
    { id: 'ml-features',  group: 'data'     },

    { id: 'status-page',  group: 'orphan'   },
  ],
  links: [
    { source: 'auth-api', target: 'session-store' },
    { source: 'auth-api', target: 'idp' },
    { source: 'scim-sync', target: 'idp' },
    { source: 'ledger', target: 'payouts' },
    { source: 'ledger', target: 'reconciler' },
    { source: 'ingest', target: 'lakehouse' },
    { source: 'lakehouse', target: 'bi' },
    { source: 'lakehouse', target: 'ml-features' },
  ],
};

const nodes = graph.nodes.map(d => ({ ...d }));
const links = graph.links.map(d => ({ ...d }));
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(60))
    .force('charge', d3.forceManyBody().strength(-260))
    .force('x', d3.forceX(width / 2).strength(0.06))
    .force('y', d3.forceY(height / 2).strength(0.06))
    .force('collide', d3.forceCollide(26));

// 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', 7)
    .attr('fill', d => color(d.group))
    .attr('stroke', theme.background)
    .attr('stroke-width', 1.5);

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

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