Network Charts

Reveal connections, flows, and relationships between entities. Network charts transform link data into visual maps where nodes represent entities and edges show their connections. Use force-directed layouts for exploring structure, Sankey diagrams for tracking flow quantities, and chord diagrams for showing bidirectional relationships.

Data Format

Network charts accept data in these formats:

Link List (Recommended)

data:
  source: '[{"source": "A", "target": "B", "value": 10}, {"source": "A", "target": "C", "value": 5}]'
network:
  source: source
  target: target
  value: value

Nodes + Links

data:
  source: '{"nodes": [{"id": "A"}, {"id": "B"}], "links": [{"source": "A", "target": "B", "value": 10}]}'

Force-Directed

Simulate physical forces to arrange nodes organically. Nodes repel each other while links pull connected nodes together, creating layouts where clusters emerge naturally and densely connected regions group together. Force-directed graphs excel at revealing community structure in social networks, citation graphs, and any relational data.

Configuration

Parameter	Type	Default	Description
type	string	-	'force'
network.source	string	'source'	Source node field
network.target	string	'target'	Target node field
network.value	string	'value'	Link weight field
linkDistance	number	50	Target link length
chargeStrength	number	-100	Node repulsion (negative)
collisionRadius	number	5	Collision detection radius
nodeRadius	number	5	Node circle radius
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: force
engine: d3
title: Social Network
linkDistance: 80
chargeStrength: -150
width: 550
height: 400
network:
  source: source
  target: target
  value: value
data:
  source: '[{"source": "Alice", "target": "Bob", "value": 5}, {"source": "Alice", "target": "Carol", "value": 3}, {"source": "Bob", "target": "Carol", "value": 4}, {"source": "Bob", "target": "Dave", "value": 2}, {"source": "Carol", "target": "Eve", "value": 3}, {"source": "Dave", "target": "Eve", "value": 4}, {"source": "Eve", "target": "Frank", "value": 2}]'

Sankey

Trace flows of quantity between stages or categories. Sankey diagrams draw paths whose width represents flow magnitude, making them ideal for energy transfers, budget allocations, user journeys, and any process where you need to track how quantities move and split across a system.

Configuration

Parameter	Type	Default	Description
type	string	-	'sankey'
network.source	string	'source'	Source node field
network.target	string	'target'	Target node field
network.value	string	'value'	Flow value field
nodeWidth	number	20	Width of node bars
nodePadding	number	10	Vertical gap between nodes
nodeAlign	string	'justify'	Node alignment
colorScheme	string	'schemeCategory10'	Color palette

Node Alignment Options

• justify - Spread nodes evenly (default)
• left - Align to left
• right - Align to right
• center - Center alignment

Basic Example

View Source

type: sankey
engine: d3
title: Energy Flow
nodeWidth: 15
nodePadding: 12
width: 600
height: 400
network:
  source: source
  target: target
  value: amount
data:
  source: '[{"source": "Coal", "target": "Electricity", "amount": 250}, {"source": "Gas", "target": "Electricity", "amount": 180}, {"source": "Solar", "target": "Electricity", "amount": 45}, {"source": "Electricity", "target": "Residential", "amount": 280}, {"source": "Electricity", "target": "Commercial", "amount": 195}]'

Arc Diagram

Arrange nodes along a single axis and draw arcs to show connections. Arc diagrams sacrifice the two-dimensional freedom of force layouts for a cleaner, more ordered appearance. They work well when nodes have a natural ordering (alphabetical, chronological, ranked) and you want to see connection patterns without the visual complexity of a full network graph.

Configuration

Parameter	Type	Default	Description
type	string	-	'arc-diagram'
network.source	string	'source'	Source node field
network.target	string	'target'	Target node field
network.value	string	'value'	Link weight field
sortBy	string	-	Field to sort nodes
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: arc-diagram
engine: d3
title: Module Dependencies
width: 600
height: 300
network:
  source: source
  target: target
  value: value
data:
  source: '[{"source": "main", "target": "config", "value": 3}, {"source": "main", "target": "utils", "value": 5}, {"source": "api", "target": "auth", "value": 6}, {"source": "api", "target": "db", "value": 7}, {"source": "auth", "target": "crypto", "value": 4}]'

Chord Diagram

Display inter-group flows around a circle. Chord diagrams arrange groups as arcs on a ring perimeter and draw ribbons between them whose width shows flow magnitude. They reveal the balance of relationships—which groups give more than they receive, which pairs have the strongest connections—in a compact, symmetric form.

Configuration

Parameter	Type	Default	Description
type	string	-	'chord'
network.source	string	'source'	Source group field
network.target	string	'target'	Target group field
network.value	string	'value'	Flow value field
padAngle	number	0.05	Gap between groups
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: chord
engine: d3
title: Trade Between Regions
padAngle: 0.04
width: 500
height: 500
network:
  source: source
  target: target
  value: value
data:
  source: '[{"source": "USA", "target": "China", "value": 120}, {"source": "USA", "target": "EU", "value": 280}, {"source": "China", "target": "USA", "value": 450}, {"source": "China", "target": "EU", "value": 385}, {"source": "EU", "target": "USA", "value": 320}, {"source": "EU", "target": "China", "value": 195}]'

Edge Bundling

Route many connections through curved, bundled paths that group related edges together. Edge bundling reduces visual clutter in dense networks by making edges that connect nearby groups curve together. The result reveals high-level connectivity patterns that individual edge rendering would obscure.

Configuration

Parameter	Type	Default	Description
type	string	-	'edge-bundling'
network.source	string	'source'	Source node field
network.target	string	'target'	Target node field
hierarchy.parent	string	-	Parent field for grouping
bundleStrength	number	0.85	Curve bundling (0-1)
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: edge-bundling
engine: d3
title: Package Dependencies
bundleStrength: 0.9
width: 500
height: 500
data:
  source: '[{"name": "react", "group": "frontend", "imports": ["react-dom"]}, {"name": "react-dom", "group": "frontend", "imports": ["react"]}, {"name": "redux", "group": "state", "imports": ["react-redux"]}, {"name": "react-redux", "group": "state", "imports": ["react", "redux"]}, {"name": "axios", "group": "network", "imports": []}]'
hierarchy:
  id: name
  parent: group

Parallel Sets

Show how categorical data flows across multiple dimensions. Parallel sets arrange dimensions as vertical axes and draw ribbons showing how categories in one dimension connect to categories in the next. They reveal how populations segment across multiple attributes—useful for demographic analysis, survey responses, and multi-step classification.

Configuration

Parameter	Type	Default	Description
type	string	-	'parallel-sets'
dimensions	array	required	List of categorical fields
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: parallel-sets
engine: d3
title: Titanic Survival
width: 600
height: 400
dimensions:
  - class
  - sex
  - survived
data:
  source: '[{"class": "First", "sex": "Female", "survived": "Yes", "count": 141}, {"class": "First", "sex": "Female", "survived": "No", "count": 4}, {"class": "First", "sex": "Male", "survived": "Yes", "count": 62}, {"class": "First", "sex": "Male", "survived": "No", "count": 118}, {"class": "Second", "sex": "Female", "survived": "Yes", "count": 93}, {"class": "Second", "sex": "Female", "survived": "No", "count": 13}, {"class": "Second", "sex": "Male", "survived": "Yes", "count": 25}, {"class": "Second", "sex": "Male", "survived": "No", "count": 154}]'

---

Directed Chord

Visualize asymmetric flow relationships with directional arrows. Unlike standard chord diagrams that show bidirectional relationships, directed chord charts use arrow-shaped ribbons to indicate flow direction from source to target.

Configuration

Parameter	Type	Default	Description
type	string	-	'directed-chord'
padAngle	number	0.05	Gap between arcs (radians)
innerRadiusRatio	number	0.9	Inner radius as ratio of outer
format	string	',.0f'	Number format for values

Data Format

Directed chord expects network data with source, target, and value fields:

network:
  source: from    # Source node field
  target: to      # Target node field
  value: amount   # Flow amount field

Basic Example

View Source

type: directed-chord
engine: d3
title: Trade Flow
width: 500
height: 500
network:
  source: from
  target: to
  value: amount
data:
  source: '[{"from": "USA", "to": "China", "amount": 450}, {"from": "USA", "to": "EU", "amount": 320}, {"from": "China", "to": "USA", "amount": 380}, {"from": "China", "to": "EU", "amount": 280}, {"from": "EU", "to": "USA", "amount": 290}, {"from": "EU", "to": "China", "amount": 210}]'

---

Type Aliases

Primary	Aliases
force	force-directed, network/force, force-graph
sankey	flow, alluvial, network/sankey
arc-diagram	arc, network/arc-diagram
chord	network/chord
edge-bundling	hierarchical-edge-bundling, network/edge-bundling
parallel-sets	network/parallel-sets
directed-chord	directed-flow, asymmetric-chord, network/directed-chord