A four-state chord diagram drawn in plain SVG — entities on a ring sized by inflow plus outflow, bezier ribbons sized by volume, symmetric pairs or directed arrowheads, a keyboard-walkable ring and an sr-only flow table.
Preview in your theme
Loading preview…
This component is part of Pro
The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.
status="ready" · mode="directed" · 6 teams, 15 directed flows, 2,276 handoffs in total. Arc length = in + out, so every unit of flow is drawn twice, once at each end; arrowheads land inside the receiving arc, which is why Support→Engineering 480 and the 120 coming back are two chords of different thickness. Engineering also has a self-chord of 26.
Cross-team handoffs · last 30 days
2,276 handoffs · 6 entities · 15 directed flows · arrowheads point at the receiver
Point at an arc or a chord — or press Tab and use the arrow keys — to read its numbers.
Design645365 out · 280 in
Engineering1,682451 out · 1,231 in
Support995615 out · 380 in
Sales550390 out · 160 in
Data400280 out · 120 in
Ops280175 out · 105 in
Arc length is inflow plus outflow, so every unit of traffic is drawn twice — once at each end. Arrow keys walk the ring, ↓ steps into an entity's chords, Enter follows one to the other side.
Chord diagram: 6 entities exchange 2,276 handoffs across 15 directed flows. Busiest entity Engineering, 1,682 of traffic (37% of the ring, 451 out and 1,231 in). Strongest link Support to Engineering: 480 handoffs · 21.1% of all flow.
Every entity on the ring with the traffic that touches it. Out plus in is what the arc's angle encodes.
Entity
Total
Out
In
Partners
Share of ring
Design
645 handoffs
365
280
3
14.2%
Engineering
1,682 handoffs
451
1,231
5
37%
Support
995 handoffs
615
380
3
21.9%
Sales
550 handoffs
390
160
3
12.1%
Data
400 handoffs
280
120
3
8.8%
Ops
280 handoffs
175
105
2
6.2%
Every chord, with the quantity it carries and its share of the 2,276 handoffs on the ring.
From
To
Value
Back
Share
Design
Engineering
340 handoffs
listed separately
14.9%
Design
Data
25 handoffs
listed separately
1.1%
Engineering
Design
150 handoffs
listed separately
6.6%
Engineering
itself
26 handoffs
listed separately
1.1%
Engineering
Support
120 handoffs
listed separately
5.3%
Engineering
Data
95 handoffs
listed separately
4.2%
Engineering
Ops
60 handoffs
listed separately
2.6%
Support
Engineering
480 handoffs
listed separately
21.1%
Support
Sales
90 handoffs
listed separately
4%
Support
Ops
45 handoffs
listed separately
2%
Sales
Design
130 handoffs
listed separately
5.7%
Sales
Support
260 handoffs
listed separately
11.4%
Data
Engineering
210 handoffs
listed separately
9.2%
Data
Sales
70 handoffs
listed separately
3.1%
Ops
Engineering
175 handoffs
listed separately
7.7%
onEntitySelect: nothing picked yet (press an arc, or Tab in and press Enter)
status="empty" · the contract is satisfied but not one flow came back — a different story from "loading" and from "the fetch failed".
Cross-team handoffs · last 30 days
Nothing to connect yet
Arcs and chords appear here once the first exchange is recorded.
status="loading" · a ring skeleton plus three placeholder legend rows, aria-hidden, with no timer involved.
Cross-team handoffs · last 30 days
Loading chord diagram
status="error" · the fetch failed; "Try again" only appears when onRetry is passed, and pressing it switches to ready.
Cross-team handoffs · last 30 days
Couldn't load this diagram
The data source didn't respond.
mode="symmetric" · the same 15 rows folded into 10 relationships: both ends the same width, no arrowheads, and the chord is labelled with the 480 + 120 = 600 total. The arcs did not move — changing mode changes how the chords are cut, not how big an entity is.
Cross-team collaboration · last 30 days
2,276 handoffs · 6 entities · 10 relationships
Point at an arc or a chord — or press Tab and use the arrow keys — to read its numbers.
Design645365 out · 280 in
Engineering1,682451 out · 1,231 in
Support995615 out · 380 in
Sales550390 out · 160 in
Data400280 out · 120 in
Ops280175 out · 105 in
Arc length is inflow plus outflow, so every unit of traffic is drawn twice — once at each end. Arrow keys walk the ring, ↓ steps into an entity's chords, Enter follows one to the other side.
Chord diagram: 6 entities exchange 2,276 handoffs across 10 relationships. Busiest entity Engineering, 1,682 of traffic (37% of the ring, 451 out and 1,231 in). Strongest link Engineering with Support: 600 handoffs combined · Engineering to Support 120, back 480 · 26.4% of all flow.
Every entity on the ring with the traffic that touches it. Out plus in is what the arc's angle encodes.
Entity
Total
Out
In
Partners
Share of ring
Design
645 handoffs
365
280
3
14.2%
Engineering
1,682 handoffs
451
1,231
5
37%
Support
995 handoffs
615
380
3
21.9%
Sales
550 handoffs
390
160
3
12.1%
Data
400 handoffs
280
120
3
8.8%
Ops
280 handoffs
175
105
2
6.2%
Every chord, with the quantity it carries and its share of the 2,276 handoffs on the ring.
From
To
Value
Back
Share
Design
Engineering
340 handoffs
150
21.5%
Design
Data
25 handoffs
0
1.1%
Engineering
itself
26 handoffs
not applicable
1.1%
Engineering
Support
120 handoffs
480
26.4%
Engineering
Data
95 handoffs
210
13.4%
Engineering
Ops
60 handoffs
175
10.3%
Support
Sales
90 handoffs
260
15.4%
Support
Ops
45 handoffs
0
2%
Design
Sales
0 handoffs
130
5.7%
Sales
Data
0 handoffs
70
3.1%
Degenerate data · the whole diagram is one relationship (100%). Each arc spans 178° (360° minus the two 2° gaps), because every unit of flow is drawn once at each end — this is what "arc length = in + out" looks like at the extreme.
Only one route in the network
1,420 pallets · 2 entities · 1 directed flow · arrowheads point at the receiver
Point at an arc or a chord — or press Tab and use the arrow keys — to read its numbers.
Warehouse1,4201,420 out · 0 in
Flagship store1,4200 out · 1,420 in
Arc length is inflow plus outflow, so every unit of traffic is drawn twice — once at each end. Arrow keys walk the ring, ↓ steps into an entity's chords, Enter follows one to the other side.
Chord diagram: 2 entities exchange 1,420 pallets across 1 directed flow. Busiest entity Warehouse, 1,420 of traffic (50% of the ring, 1,420 out and 0 in). Strongest link Warehouse to Flagship store: 1,420 pallets · 100% of all flow.
Every entity on the ring with the traffic that touches it. Out plus in is what the arc's angle encodes.
Entity
Total
Out
In
Partners
Share of ring
Warehouse
1,420 pallets
1,420
0
1
50%
Flagship store
1,420 pallets
0
1,420
1
50%
Every chord, with the quantity it carries and its share of the 1,420 pallets on the ring.
From
To
Value
Back
Share
Warehouse
Flagship store
1,420 pallets
listed separately
100%
Degenerate data · order="total" · 13 arcs: the palette holds only 5 colours, so arcs 6 and up are told apart by hatching and arcs 11 and up by dots (still separable in greyscale and with colour-vision deficiency); city names run to 21 characters and any label over 12 is ellipsised; "Night halt" holds 1 trip across its entire arc (0.005%), too narrow for a label at all, so only the list below can name it, and the chord itself is visible only because of a 0.7-unit stroke; there is also a self-chord, an entity with no flow whatsoever, plus one flow pointing at an unknown id and one worth 0 — those last two are dropped and accounted for at the top of the card.
Interchange transfers · seeded stress case
21,271 trips · 13 entities · 16 relationships
1 flow point at an entity that is not on the ring · 1 zero-valued flow — ignored.
Point at an arc or a chord — or press Tab and use the arrow keys — to read its numbers.
Candiceberg4,6673,110 out · 1,557 in
North Josianne4,5172,291 out · 2,226 in
Rutherfordborough4,4782,097 out · 2,381 in
Lorenaside4,2941,736 out · 2,558 in
Cordieboro3,9381,814 out · 2,124 in
Racine3,6772,226 out · 1,451 in
Gottlieb-Ziemannstead3,4151,035 out · 2,380 in
North Coby3,3181,221 out · 2,097 in
Romantown2,8422,218 out · 624 in
New Diannaberg2,8101,194 out · 1,616 in
South Eugeniaworth2,587713 out · 1,874 in
Shawnaview1,9981,616 out · 382 in
Night halt10 out · 1 in
Depot (closed)no flows — no arc
Arc length is inflow plus outflow, so every unit of traffic is drawn twice — once at each end. Arrow keys walk the ring, ↓ steps into an entity's chords, Enter follows one to the other side. 1 arc is too thin to label; the list above names every entity.
Chord diagram: 13 entities exchange 21,271 trips across 16 relationships. Busiest entity Candiceberg, 4,667 of traffic (11% of the ring, 3,110 out and 1,557 in). Strongest link Candiceberg with Rutherfordborough: 2,381 trips combined · Candiceberg to Rutherfordborough 2,381, back 0 · 11.2% of all flow. 1 listed entity has no flows and no arc: Depot (closed).
Every entity on the ring with the traffic that touches it. Out plus in is what the arc's angle encodes.
Entity
Total
Out
In
Partners
Share of ring
Candiceberg
4,667 trips
3,110
1,557
4
11%
North Josianne
4,517 trips
2,291
2,226
2
10.6%
Rutherfordborough
4,478 trips
2,097
2,381
2
10.5%
Lorenaside
4,294 trips
1,736
2,558
3
10.1%
Cordieboro
3,938 trips
1,814
2,124
3
9.3%
Racine
3,677 trips
2,226
1,451
2
8.6%
Gottlieb-Ziemannstead
3,415 trips
1,035
2,380
3
8%
North Coby
3,318 trips
1,221
2,097
2
7.8%
Romantown
2,842 trips
2,218
624
2
6.7%
New Diannaberg
2,810 trips
1,194
1,616
2
6.6%
South Eugeniaworth
2,587 trips
713
1,874
3
6.1%
Shawnaview
1,998 trips
1,616
382
2
4.7%
Night halt
1 trips
0
1
1
0.0024%
Every chord, with the quantity it carries and its share of the 21,271 trips on the ring.
Zyeon UI