Skip to book
Tarva BXD · LumosIndex › Charts › Network
1920 × 1080 · Landscape
Lumos Index › Charts › Network 3 chart types

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
link · structural hairline, weight→opacity
linkType · 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.


Lumos brand book slide: Charts · Network
Rotate your phone for a larger view. Tap the slide to open it full size and zoom.
8.5 × 11 · Portrait