Network Charts

Visualize connections, flows, and relationships.

All network charts require engine: d3.

Live Example: Force-Directed Graph

View Source

type: force-directed
engine: d3
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}, {"source": "Frank", "target": "Alice", "value": 3}]'
network:
  source: source
  target: target
  value: value
width: 600
height: 400
title: Social Network

---

Sankey Diagram

Show flow quantities between nodes.

View Source

type: sankey
engine: d3
data:
  source: '[{"source": "Coal", "target": "Electricity", "value": 250}, {"source": "Gas", "target": "Electricity", "value": 180}, {"source": "Solar", "target": "Electricity", "value": 45}, {"source": "Electricity", "target": "Residential", "value": 280}, {"source": "Electricity", "target": "Commercial", "value": 220}]'
x: source
target: target
value: value
width: 700
height: 400
title: Energy Flow (TWh)

When to use: Energy flows, budget allocation, user journeys, process flows.

---

Force-Directed Graph

Nodes connected by edges with physics simulation.

View Source

type: force-directed
engine: d3
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}]'
network:
  source: source
  target: target
  value: value
width: 650
height: 500
title: "Social Network"

When to use: Social networks, citation graphs, any relationship mapping.

---

Chord Diagram

Circular visualization of bidirectional flows.

View Source

type: chord
engine: d3
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}]'
network:
  source: source
  target: target
  value: value
width: 550
height: 550
title: "Global Trade Flows ($B)"

When to use: Trade relationships, migration, any bidirectional flows.

---

Directed Chord

Chord diagram showing direction of flow.

View Source

type: directed-chord
engine: d3
data:
  source: '[{"from": "Asia", "to": "North America", "value": 850}, {"from": "Asia", "to": "Europe", "value": 420}, {"from": "Europe", "to": "North America", "value": 380}, {"from": "Latin America", "to": "North America", "value": 720}]'
network:
  source: from
  target: to
  value: value
width: 550
height: 550
title: "Migration Flows (thousands)"

When to use: When direction matters (migration, transfers, dependencies).

---

Arc Diagram

Linear layout with arcs showing connections.

View Source

type: arc-diagram
engine: d3
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}]'
network:
  source: source
  target: target
  value: value
width: 700
height: 350
title: "Module Dependencies"

When to use: Sequential relationships, dependency chains, ordered networks.

---

Edge Bundling

Hierarchical edge bundling for complex relationships.

View Source

type: edge-bundling
engine: d3
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
width: 550
height: 550
title: "Package Dependencies"

When to use: Large dependency graphs, showing patterns in complex networks.

---

Parallel Sets

Flow visualization across multiple categories.

View Source

type: parallel-sets
engine: d3
data:
  source: '[{"survived": "Yes", "sex": "Female", "class": "First", "count": 141}, {"survived": "Yes", "sex": "Female", "class": "Second", "count": 93}, {"survived": "No", "sex": "Female", "class": "First", "count": 4}, {"survived": "No", "sex": "Male", "class": "First", "count": 118}, {"survived": "Yes", "sex": "Male", "class": "First", "count": 62}]'
dimensions:
  - class
  - sex
  - survived
width: 700
height: 450
title: "Titanic Survival by Class and Gender"

When to use: Showing how categorical variables combine (Titanic-style analysis).

---

Data Format

Flow charts (sankey, chord, force-directed, arc-diagram):

network:
  source: source_field
  target: target_field
  value: weight_field

Edge bundling uses hierarchy + imports array in data.

Parallel sets uses dimensions array to specify category columns.

---

Configuration Options

Option	Type	Default	Description
network.source	string	-	Source node field
network.target	string	-	Target node field
network.value	string	-	Edge weight field
dimensions	array	-	Category columns (parallel-sets)

---

Tips

Tip: Sankey diagrams work best with 3-5 stages of flow. Too many makes them hard to read.

Common Mistake: In chord diagrams, large flows can overwhelm small ones. Consider filtering to top N flows.

Tip: Force-directed graphs are interactive - nodes can be dragged to explore relationships.

---

See Also

• Hierarchical Charts - For tree structures
• Line Charts - For sequential data over time