1920 × 1080 · Landscape
Charts · Network
How things connect.
The relational family — three visx-engine charts for entities and the flow between them. They take the family-local { nodes, links } shape, paint each group through the same --chart-1…14 contract, and draw no axes: a chord rings the disc, a network graph settles its nodes, a sankey threads quantity through stages.
The Network family@tarva/ui/charts/network
Chordnetwork
Pairwise flow between a closed entity set — referral exchange across locations. Polar frame, ribbons across the disc.
NetworkGraphnetwork
Node-link topology — provider & service mesh.
layout is deterministic & SSR-safe; linkType carries identity.Sankeynetwork
Quantity through ordered stages — intake-to-discharge funnel. Ribbon width is the flow;
colorBy tints by column.
Shared chrome · Legend
Intake
Consult
Treatment
Discharge
Shared chrome · Tooltip
Consult → Treatment
| Flow | 470 |
| Share | 62% |
link · structural hairline, weight→opacitylinkType · solid · dashed · dotted
Composes
visx + d3
ChartFrame
d3-chord
d3-sankey
Legend
Tooltip
ResponsiveContainer
When to reach for it
Network is for relationships, not series. Reach for Chord when flow runs between a closed set of entities (referral exchange between locations), NetworkGraph for node-link topology (provider–service maps; layout is deterministic and SSR-safe), and Sankey when quantity moves through ordered stages (the intake-to-discharge funnel). Keep entity counts modest — past ~12, prefer a Heatmap.
Source · @tarva/ui · Charts/NetworkTarva BXD · 2026-06-23

8.5 × 11 · Portrait