Chord

service interaction

Who talks to whom, when the traffic is bidirectional.

• Format.d3
• Length62 lines
• Includesnone

The source

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

// Chord — who talks to whom, and how much.
// matrix[i][j] = calls per minute from names[i] to names[j].

const names = ['Web', 'Mobile', 'Orders', 'Catalogue', 'Payments', 'Identity'];
const matrix = [
  [  0,  0, 210, 340,  40, 120],
  [  0,  0, 180, 260,  35, 110],
  [ 12,  8,   0,  90, 150,  60],
  [  5,  4,  30,   0,   0,  20],
  [  0,  0,  70,   0,   0,  45],
  [ 20, 15,  25,  10,  10,   0],
];

const size = Math.min(width, height);
const outerRadius = size / 2 - 110;
const innerRadius = outerRadius - 16;

const color = d3.scaleOrdinal(names, theme.palette);
const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
const ribbon = d3.ribbon().radius(innerRadius);

const chords = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending)(matrix);

const svg = d3.select(container).append('svg')
    .attr('viewBox', [-width / 2, -height / 2, width, height])
    .attr('width', width)
    .attr('height', height)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

const group = svg.append('g')
  .selectAll('g')
  .data(chords.groups)
  .join('g');

group.append('path')
    .attr('d', arc)
    .attr('fill', d => color(names[d.index]))
    .attr('stroke', theme.background);

group.append('text')
    .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
    .attr('dy', '0.35em')
    .attr('transform', d => `
      rotate(${(d.angle * 180 / Math.PI - 90)})
      translate(${outerRadius + 8})
      ${d.angle > Math.PI ? 'rotate(180)' : ''}
    `)
    .attr('text-anchor', d => d.angle > Math.PI ? 'end' : null)
    .attr('fill', theme.foreground)
    .text(d => names[d.index]);

svg.append('g')
    .attr('fill-opacity', 0.62)
  .selectAll('path')
  .data(chords)
  .join('path')
    .attr('d', ribbon)
    .attr('fill', d => color(names[d.source.index]))
    .attr('stroke', theme.background);

Others in D3 visualisations

• Sankey — request flowFlow with volume. The best chart here for "where does it all go".
• Arc diagram — dependenciesNodes on one axis, arcs above. Readable where a force graph is not, provided the ordering means something.
• Adjacency matrix — couplingAdjacency matrix. Unfashionable, and better than a force graph for dense dependencies.
• Edge bundling — module importsHierarchical edge bundling. For import graphs big enough that straight edges become a hairball.
• Sunburst — nested spendNested hierarchy, radially. Prettier than an icicle, harder to compare.
• Icicle — nested spend (linear)A sunburst unrolled flat. Harder to love, much easier to compare siblings.
• Circle packing — nested sizeCircle packing. Nested size when the nesting matters more than reading exact areas.
• Treemap — portfolio costNested size. Good for cost, storage, lines of code.
• Tidy tree — structureA tidy tree. The default for anything with one parent per node.
• Radial tree — structure (radial)The same tree bent into a circle. Fits more depth on a slide, costs you easy comparison.
• Dendrogram — clusteringClustering, with join height carrying the distance. Not merely a tree with curves.
• Indented tree — file/spec outlineA file or spec outline. The chart that looks like the thing it describes.
• Force graph — service mapService map. Use for clusters, not for reading individual edges.
• Force graph — disjoint clustersForce graph that keeps unconnected clusters apart rather than flinging them off screen.
• Force graph — radial tiersForce layout pinned to rings, so tier is a position instead of a colour legend.
• Directed graph — call directionDirected edges with arrowheads. For when direction is the question, not just adjacency.
• Force tree — blast radiusBlast radius from one node: what breaks if this goes.
• Calendar heatmap — daily activityDaily activity over a year: deploys, incidents, commits.
• Streamgraph — shifting mixShifting composition over time. Good for the mix, poor for reading any single value.
• Gantt — delivery roadmapDelivery roadmap, rendered from data.
• Radar — capability scoringCapability scoring across axes. Fine for one subject, misleading with four overlaid.
• Bullet chart — target vs actualTarget against actual, in one line. The chart a gauge wishes it were.
• Beeswarm — distribution by groupEvery point, grouped, without the overplotting a strip plot suffers.
• Horizon chart — many series, little spaceMany series in little space. Takes a moment to learn, then very dense.
• Slope chart — before and afterBefore and after, two points, one line each. Devastatingly clear.
• Parallel coordinates — multi-criteriaMulti-criteria comparison: for option analysis.
• Box plot — latency distributionLatency distribution. The chart that shows the tail a mean hides.
• Grouped bar — category comparisonCategory comparison. Unglamorous, and usually the right answer.
• Multi-line — metrics over timeMetrics over time. Keep it under about five series, or switch to horizon.