Network Charts

Visualize connections, flows, and relationships.

All network charts require engine: d3.

---

Sankey Diagram

Show flow quantities between nodes.

```dg
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: 800
height: 500
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.

```dg
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.

```dg
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.

```dg
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.

```dg
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.

```dg
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.

```dg
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