Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← Visualization

Node-link network

Nodes and connecting lines reveal relationships between entities.

A neighborhood lending network

A neighborhood lending network: node link. Connections. Full values follow in the data view.A link means the two places share equipment. Position has no geographic meaning.LibrarySchoolGardenCafeStudio

A link means the two places share equipment. Position has no geographic meaning.

All equipment-sharing connections shown.

Illustrative data
View data5 records
  • Library ↔ School
  • Library ↔ Garden
  • Library ↔ Cafe
  • School ↔ Studio
  • Garden ↔ Studio
  • Cafe ↔ Garden

When it fits

Explore who or what is connected.

What you need

Entities and a clearly defined relationship between them.

Watch for

Distance in a layout is not automatically a measured quantity.

In practice

Connections in Les Misérables, published by Vega contributors.
Connections in Les Misérables · Vega contributors · BSD-3-Clause

Related alternatives

Tree diagram Heatmap
Sources and accessibility

The authored example uses illustrative data. Published references retain their original information and presentation.

Use Tab to reach controls and the data view. Native selects support arrow keys. All values are available in the data view; color and hover are never the only way to read the example.