Sankey

request flow

Flow with volume. The best chart here for "where does it all go".

Sankey — request flow: rendered example
Rendered by Gnomon from the source below. No edits.

The source

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

// Sankey — where traffic actually goes.
// Node ids are strings, so `nodeId` must be set; d3-sankey defaults to
// indices and would silently mis-wire the links.

const data = {
  nodes: [
    { id: 'Browser' }, { id: 'Mobile app' }, { id: 'Partner API' },
    { id: 'CDN' }, { id: 'API gateway' },
    { id: 'Orders' }, { id: 'Catalogue' }, { id: 'Payments' },
    { id: 'Postgres' }, { id: 'Redis' }, { id: 'Stripe' },
  ],
  links: [
    { source: 'Browser',     target: 'CDN',         value: 620 },
    { source: 'Mobile app',  target: 'API gateway', value: 410 },
    { source: 'Partner API', target: 'API gateway', value: 90  },
    { source: 'CDN',         target: 'API gateway', value: 380 },
    { source: 'API gateway', target: 'Orders',      value: 340 },
    { source: 'API gateway', target: 'Catalogue',   value: 420 },
    { source: 'API gateway', target: 'Payments',    value: 120 },
    { source: 'Orders',      target: 'Postgres',    value: 300 },
    { source: 'Orders',      target: 'Redis',       value: 40  },
    { source: 'Catalogue',   target: 'Redis',       value: 350 },
    { source: 'Catalogue',   target: 'Postgres',    value: 70  },
    { source: 'Payments',    target: 'Stripe',      value: 120 },
  ],
};

const margin = { top: 20, right: 150, bottom: 20, left: 90 };
const color = d3.scaleOrdinal(theme.palette);

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 layout = d3.sankey()
    .nodeId(d => d.id)
    .nodeWidth(14)
    .nodePadding(14)
    .nodeAlign(d3.sankeyJustify)
    .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]);

// Copy the arrays: d3-sankey mutates what it is handed, and re-running against
// already-laid-out objects produces nonsense.
const { nodes, links } = layout({
  nodes: data.nodes.map(d => ({ ...d })),
  links: data.links.map(d => ({ ...d })),
});

svg.append('g')
    .attr('fill', 'none')
  .selectAll('path')
  .data(links)
  .join('path')
    .attr('d', d3.sankeyLinkHorizontal())
    .attr('stroke', d => color(d.source.id))
    .attr('stroke-opacity', 0.35)
    .attr('stroke-width', d => Math.max(1, d.width));

svg.append('g')
  .selectAll('rect')
  .data(nodes)
  .join('rect')
    .attr('x', d => d.x0)
    .attr('y', d => d.y0)
    .attr('width', d => d.x1 - d.x0)
    .attr('height', d => Math.max(1, d.y1 - d.y0))
    .attr('fill', d => color(d.id))
    .attr('rx', 2);

svg.append('g')
    .attr('fill', theme.foreground)
  .selectAll('text')
  .data(nodes)
  .join('text')
    .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
    .attr('y', d => (d.y0 + d.y1) / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end')
    .text(d => `${d.id} · ${d.value}`);

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