Component

PassNetwork

Aggregated team passing network. Use it when the story is structure, shape, and relationships between players rather than individual pass trajectories. Hero fixture: Arsenal at Manchester United (0-1, GW1, 2025-08-17).

Players11
Connections15
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Playground

Interactive props.

Primary single-team network. Good baseline for threshold, direction, and orientation.Pitch theme comes from the floating controller.
Players11
Connections15
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Stories

Canonical behaviors.

xT Colours

Callbacks can restyle nodes and edges from raw xT values without routing that logic through a chart mode prop.

Players11
Connections26
Threshold≥4 passes
EEDRRCGMCMJTRiVGLTMZBS
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔8libvn3hxypz8x7gm4mr7kj55
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 8qwpdf5jof7o6yy47v6iv11hx↔6jgocc12bori2wygyu07c082x
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔8libvn3hxypz8x7gm4mr7kj55
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔8libvn3hxypz8x7gm4mr7kj55
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔4wic6z72nwmhkheme209fcmp5
Merged duplicate/reversed edge pair: 8qwpdf5jof7o6yy47v6iv11hx↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 6o76owze8y78ue9sb49g8kyz8↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 6o76owze8y78ue9sb49g8kyz8↔6jgocc12bori2wygyu07c082x
Merged duplicate/reversed edge pair: 4wic6z72nwmhkheme209fcmp5↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 8qwpdf5jof7o6yy47v6iv11hx↔4wic6z72nwmhkheme209fcmp5
Benchmark Analytical Network

One dense, analyst-facing network with thresholding, directionality, and xT-driven styling combined. This is the public benchmark view the helper pipeline should be able to feed cleanly.

Players11
Connections21
Threshold≥6 passes
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
High Threshold

Higher threshold and labels off produce a cleaner publishable network.

Players11
Connections13
Threshold≥8 passes
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔8libvn3hxypz8x7gm4mr7kj55
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 8qwpdf5jof7o6yy47v6iv11hx↔6jgocc12bori2wygyu07c082x
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔8libvn3hxypz8x7gm4mr7kj55
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔8libvn3hxypz8x7gm4mr7kj55
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔4wic6z72nwmhkheme209fcmp5
Merged duplicate/reversed edge pair: 8qwpdf5jof7o6yy47v6iv11hx↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 6o76owze8y78ue9sb49g8kyz8↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 6o76owze8y78ue9sb49g8kyz8↔6jgocc12bori2wygyu07c082x
Merged duplicate/reversed edge pair: 4wic6z72nwmhkheme209fcmp5↔aqlakf0mo95rlktf6xdbaegh5
Merged duplicate/reversed edge pair: 8qwpdf5jof7o6yy47v6iv11hx↔4wic6z72nwmhkheme209fcmp5
Directed Edges

When direction matters, reversed edges stay distinct and render with arrowheads.

Players11
Connections24
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Vertical Orientation

Portrait layout for tighter cards and scouting-style treatments.

Players11
Connections15
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Sparse Fallback

Too few nodes to sustain a dense structure, but the chart still reads honestly.

Players3
Connections2
Threshold≥4 passes
GKLCBRCB
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Static Export

PassNetwork is supported by the static export pipeline when the story needs a deterministic snapshot.

DRRCBWWSGMMZRiVGBSMr
Empty State

Pitch visible, honest copy, and no fake structure when nothing is plottable.

Players0
Connections0
No passing network data
Recipes

Composition patterns.

Side-by-Side Comparison

Two independent PassNetwork instances laid out beside each other. Useful when each team should keep its own full pitch and scale. Liverpool 4-2 Bournemouth.

Players11
Connections28
Threshold≥4 passes
DSVDJFIKMSABMKFWAMCGHE
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 369875↔345319
Merged duplicate/reversed edge pair: 95408↔114147
Merged duplicate/reversed edge pair: 424273↔95408
Merged duplicate/reversed edge pair: 369875↔95408
Merged duplicate/reversed edge pair: 108226↔369875
Merged duplicate/reversed edge pair: 345319↔394786
Merged duplicate/reversed edge pair: 345319↔95408
Merged duplicate/reversed edge pair: 114147↔345957
Merged duplicate/reversed edge pair: 394786↔369875
Merged duplicate/reversed edge pair: 394786↔95408
Merged duplicate/reversed edge pair: 369875↔392644
Merged duplicate/reversed edge pair: 394786↔403784
Merged duplicate/reversed edge pair: 403784↔352825
Merged duplicate/reversed edge pair: 352825↔424273
Merged duplicate/reversed edge pair: 345319↔424273
Merged duplicate/reversed edge pair: 108226↔394786
Merged duplicate/reversed edge pair: 352825↔95408
Merged duplicate/reversed edge pair: 114147↔369875
Players11
Connections15
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Shared-Pitch Compression

These are composition helpers, not chart props. compressPassNetwork remaps coordinates into a half; combinePassNetworks concatenates the results for one shared-pitch chart.

Players11
Connections15
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Players22
Connections43
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMrDSVDJFIKMSABMKFWAMCGHE
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: arsenal:65rqu55qbzswixgqw2efna06i↔arsenal:cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: arsenal:8libvn3hxypz8x7gm4mr7kj55↔arsenal:80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: arsenal:8tc7dcuwdeqbjgt7vw5p38xgq↔arsenal:b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: arsenal:65rqu55qbzswixgqw2efna06i↔arsenal:4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: arsenal:6jgocc12bori2wygyu07c082x↔arsenal:dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: arsenal:8libvn3hxypz8x7gm4mr7kj55↔arsenal:dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: arsenal:b1lcxeihx8z6pfv1jef4j5jh1↔arsenal:80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: arsenal:80aqmv4ht6rs1812qrr5j8kix↔arsenal:65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: arsenal:6jgocc12bori2wygyu07c082x↔arsenal:80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: arsenal:dhs8pujk55ewcis7y5alchu22↔arsenal:80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: arsenal:80aqmv4ht6rs1812qrr5j8kix↔arsenal:cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: liverpool:369875↔liverpool:345319
Merged duplicate/reversed edge pair: liverpool:95408↔liverpool:114147
Merged duplicate/reversed edge pair: liverpool:424273↔liverpool:95408
Merged duplicate/reversed edge pair: liverpool:369875↔liverpool:95408
Merged duplicate/reversed edge pair: liverpool:108226↔liverpool:369875
Merged duplicate/reversed edge pair: liverpool:345319↔liverpool:394786
Merged duplicate/reversed edge pair: liverpool:345319↔liverpool:95408
Merged duplicate/reversed edge pair: liverpool:114147↔liverpool:345957
Merged duplicate/reversed edge pair: liverpool:394786↔liverpool:369875
Merged duplicate/reversed edge pair: liverpool:394786↔liverpool:95408
Merged duplicate/reversed edge pair: liverpool:369875↔liverpool:392644
Merged duplicate/reversed edge pair: liverpool:394786↔liverpool:403784
Merged duplicate/reversed edge pair: liverpool:403784↔liverpool:352825
Merged duplicate/reversed edge pair: liverpool:352825↔liverpool:424273
Merged duplicate/reversed edge pair: liverpool:345319↔liverpool:424273
Merged duplicate/reversed edge pair: liverpool:108226↔liverpool:394786
Merged duplicate/reversed edge pair: liverpool:352825↔liverpool:95408
Merged duplicate/reversed edge pair: liverpool:114147↔liverpool:369875
Cross-cutting

Shared concerns.

Choose PassNetwork

Use PassNetwork when you care about aggregated structure. Use PassMap when the story is individual pass trajectories and completion choices.

Data Contract

PassNetwork expects pre-aggregated nodes and edges. Use helpers like inferRecipientsFromNextPass, aggregatePassNetwork, compressPassNetwork, and combinePassNetworks upstream; the chart is not the place to do the aggregation or network compression work.

Interaction

Hover and focus can expose ego-highlight and per-edge tooltips. That interaction is part of the chart contract, not page-specific glue.

Themeability

Pitch theming comes from Stadia via the shared floating controller. Accent styling and data-driven xT styling then sit on top of that surface.

Export And Recipes

Static export is supported. Shared-pitch comparison is also supported, but via helper functions and wrapper composition rather than new props on the chart itself.

Responsive

Normal, small, smallest.

Pitch-based charts scale fluidly to whatever width the parent gives them. The 'smallest' cell is sized for a 5×4 small-multiples grid (~140px wide). Vertical orientation only — horizontal pitches are too wide for small-multiples.

Players11
Connections15
Threshold≥4 passes
DRRCBWWSGMMZRiVGBSMr
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Normal
Players11
Connections15
Threshold≥4 passes
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Small
Players11
Connections15
Threshold≥4 passes
Node size
Fewer passesMore passes
Edge width
Fewer passesMore passes
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔cnmlhoum9aahwqruxgmz2gcfd
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 8tc7dcuwdeqbjgt7vw5p38xgq↔b1lcxeihx8z6pfv1jef4j5jh1
Merged duplicate/reversed edge pair: 65rqu55qbzswixgqw2efna06i↔4iijb6llnz28unsz4rirr3umt
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: 8libvn3hxypz8x7gm4mr7kj55↔dhs8pujk55ewcis7y5alchu22
Merged duplicate/reversed edge pair: b1lcxeihx8z6pfv1jef4j5jh1↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔65rqu55qbzswixgqw2efna06i
Merged duplicate/reversed edge pair: 6jgocc12bori2wygyu07c082x↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: dhs8pujk55ewcis7y5alchu22↔80aqmv4ht6rs1812qrr5j8kix
Merged duplicate/reversed edge pair: 80aqmv4ht6rs1812qrr5j8kix↔cnmlhoum9aahwqruxgmz2gcfd
Smallest (small multiples)
Usage

Best-practice examples.

Minimal usage

PassNetwork expects pre-aggregated nodes and edges. The aggregation helper path should live right next to the chart import, not hidden elsewhere in the codebase.

                    import {
  PassNetwork,
  aggregatePassNetwork,
  inferRecipientsFromNextPass,
} from "@withqwerty/campos-react";
import type { PassEvent } from "@withqwerty/campos-schema";
import type { PassNetworkEdge, PassNetworkNode } from "@withqwerty/campos-react";

type Props = {
  passes: PassEvent[];
  teamId: string;
};

export function TeamPassNetwork({ passes, teamId }: Props) {
  const annotated = inferRecipientsFromNextPass(passes);
  const { nodes, edges } = aggregatePassNetwork(annotated, { teamId });
  return <PassNetwork nodes={nodes} edges={edges} />;
}
                  
High-threshold variant

Threshold and style injection are the main first-class customizations for a publishable network.

                    import { PassNetwork } from "@withqwerty/campos-react";
import type { PassNetworkEdge, PassNetworkNode } from "@withqwerty/campos-react";

type Props = {
  nodes: PassNetworkNode[];
  edges: PassNetworkEdge[];
};

export function TeamPassNetworkHighThreshold({ nodes, edges }: Props) {
  return (
    <PassNetwork
      nodes={nodes}
      edges={edges}
      minEdgePasses={8}
      showLabels={false}
    />
  );
}
                  
API

Public surface.

Prop Type Default Description
nodes readonly PassNetworkNode[] required Pre-aggregated player nodes with average position, pass count, and optional xT.
edges readonly PassNetworkEdge[] required Player-pair edges with pass counts and optional xT. Reversed pairs merge automatically unless directed mode is on.
minEdgePasses number 4 Threshold below which edges are dropped from the visible network.
showLabels boolean true Whether node labels render inside the circles.
nodeStyle PassNetworkNodeStyle First-class node style surface. Accepts constants, keyed map shorthands, or callbacks for fill, stroke, radius, label color, opacity, and shape.
edgeStyle PassNetworkEdgeStyle First-class edge style surface. Accepts constants, keyed map shorthands, or callbacks for stroke, width, dash, opacity, and visibility.
attackingDirection "up" | "down" | "left" | "right" "right" Controls which direction of play the pitch projects toward on screen.
directed boolean false Keeps reversed edges distinct and renders directional arrowheads.
collisionPadding number 0.5 Minimum post-relaxation gap between node edges.
egoHighlight boolean true Dim unrelated nodes and edges when hovering or focusing a node.
pitchTheme "primary" | "secondary" "primary" Delegated Stadia surface preset.
pitchColors PitchColors Direct pitch color overrides for branded or editorial surfaces.
Use with AI
LLM Prompt
Create a React component using Campos PassNetwork. Import PassNetwork plus aggregatePassNetwork (and inferRecipientsFromNextPass when needed) from @withqwerty/campos-react. Show the smallest good usage first with the aggregation outside the chart, then show one editorial cut using a higher minEdgePasses threshold or xT styling.
Pitch