ForceGraph

beta

D3-powered force-directed graph for counterparty networks — entity relationships, exposure connections, banking relationships

Finance/Storybook ↗

import { ForceGraph } from "@nodus/design-system/finance"

Demo coming soon

Props

Prop	Type	Default	Description
`nodes`req	`ForceNode[]`	—	Graph nodes with id, label, group, size
`links`req	`ForceLink[]`	—	Edges with source, target, value
`width`	`number`	—	SVG width in px (default 640)
`height`	`number`	—	SVG height in px (default 400)
`title`	`string`	—	Accessible chart title

nodesrequired

Type ForceNode[]Default —

Graph nodes with id, label, group, size

linksrequired

Type ForceLink[]Default —

Edges with source, target, value

width

Type numberDefault —

SVG width in px (default 640)

height

Type numberDefault —

SVG height in px (default 400)

title

Type stringDefault —

Accessible chart title

Metadatasemantic type border viz

MobileStacks / Scroll

Force graph requires min 320px for legible node labels. ViewBox-based sizing scales down gracefully.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

ChordDiagram→

D3-powered chord diagram for cross-entity treasury flows — intercompany transfers, currency exposure mapping, bilateral netting

Force-directed graph of agent relationships and communication

Force-directed or grid layout engine for node graphs

Was this helpful?