Sankey Flow Diagrams

Sankey diagrams visualize flow quantities between nodes. Link width represents magnitude, making them ideal for energy flows, budget allocations, and supply chains.

Energy Flow

A 4-level energy flow showing sources, conversion, sectors, and end uses. Uses depth-based coloring where nodes at the same stage share colors.

View Source

type: sankey
engine: d3
title: US Energy Flow
width: 800
height: 500
nodeWidth: 18
nodePadding: 14
node:
  group: depth
  labelPadding: 8
link:
  opacity: 0.4
  blendMode: multiply
network:
  source: source
  target: target
  value: value
data:
  source: |
    [
      {"source": "Coal", "target": "Electricity", "value": 91},
      {"source": "Natural Gas", "target": "Electricity", "value": 132},
      {"source": "Natural Gas", "target": "Direct Use", "value": 85},
      {"source": "Nuclear", "target": "Electricity", "value": 78},
      {"source": "Petroleum", "target": "Refining", "value": 350},
      {"source": "Petroleum", "target": "Direct Use", "value": 25},
      {"source": "Renewables", "target": "Electricity", "value": 82},
      {"source": "Renewables", "target": "Direct Use", "value": 28},
      {"source": "Electricity", "target": "Residential", "value": 142},
      {"source": "Electricity", "target": "Commercial", "value": 136},
      {"source": "Electricity", "target": "Industrial", "value": 98},
      {"source": "Electricity", "target": "Transportation", "value": 7},
      {"source": "Refining", "target": "Transportation", "value": 280},
      {"source": "Refining", "target": "Industrial", "value": 45},
      {"source": "Refining", "target": "Residential", "value": 25},
      {"source": "Direct Use", "target": "Industrial", "value": 72},
      {"source": "Direct Use", "target": "Residential", "value": 38},
      {"source": "Direct Use", "target": "Commercial", "value": 28},
      {"source": "Residential", "target": "Heating", "value": 95},
      {"source": "Residential", "target": "Cooling", "value": 48},
      {"source": "Residential", "target": "Lighting", "value": 35},
      {"source": "Residential", "target": "Appliances", "value": 27},
      {"source": "Commercial", "target": "Heating", "value": 52},
      {"source": "Commercial", "target": "Cooling", "value": 58},
      {"source": "Commercial", "target": "Lighting", "value": 44},
      {"source": "Commercial", "target": "Equipment", "value": 10},
      {"source": "Industrial", "target": "Motors", "value": 125},
      {"source": "Industrial", "target": "Process Heat", "value": 68},
      {"source": "Industrial", "target": "Facilities", "value": 22},
      {"source": "Transportation", "target": "Vehicles", "value": 265},
      {"source": "Transportation", "target": "Freight", "value": 22}
    ]

Budget Allocation

Corporate budget flow from revenue to outcomes. Uses type-based grouping to color nodes by their category.

View Source

type: sankey
engine: d3
title: Corporate Budget Allocation
width: 750
height: 450
nodePadding: 12
node:
  labelPadding: 8
link:
  opacity: 0.5
network:
  source: source
  target: target
  value: value
data:
  source: |
    [
      {"source": "Product Sales", "target": "Engineering", "value": 180},
      {"source": "Product Sales", "target": "Sales & Marketing", "value": 150},
      {"source": "Product Sales", "target": "Operations", "value": 120},
      {"source": "Product Sales", "target": "HR", "value": 45},
      {"source": "Product Sales", "target": "Finance", "value": 35},
      {"source": "Services", "target": "Engineering", "value": 60},
      {"source": "Services", "target": "Operations", "value": 85},
      {"source": "Services", "target": "Sales & Marketing", "value": 25},
      {"source": "Licensing", "target": "Engineering", "value": 40},
      {"source": "Licensing", "target": "Finance", "value": 15},
      {"source": "Investments", "target": "Finance", "value": 25},
      {"source": "Engineering", "target": "Salaries", "value": 180},
      {"source": "Engineering", "target": "R&D", "value": 85},
      {"source": "Engineering", "target": "Infrastructure", "value": 15},
      {"source": "Sales & Marketing", "target": "Salaries", "value": 95},
      {"source": "Sales & Marketing", "target": "Marketing", "value": 70},
      {"source": "Sales & Marketing", "target": "Admin", "value": 10},
      {"source": "Operations", "target": "Salaries", "value": 110},
      {"source": "Operations", "target": "Infrastructure", "value": 75},
      {"source": "Operations", "target": "Admin", "value": 20},
      {"source": "HR", "target": "Salaries", "value": 30},
      {"source": "HR", "target": "Admin", "value": 15},
      {"source": "Finance", "target": "Salaries", "value": 45},
      {"source": "Finance", "target": "Admin", "value": 25},
      {"source": "Finance", "target": "Infrastructure", "value": 5},
      {"source": "Salaries", "target": "Operational Costs", "value": 460},
      {"source": "Infrastructure", "target": "Operational Costs", "value": 95},
      {"source": "Admin", "target": "Operational Costs", "value": 70},
      {"source": "R&D", "target": "Growth Investment", "value": 85},
      {"source": "Marketing", "target": "Growth Investment", "value": 70}
    ]

Supply Chain

Global supply chain flow from suppliers through manufacturing and distribution to retail. Shows geographic patterns in product movement.

View Source

type: sankey
engine: d3
title: Global Supply Chain
width: 800
height: 480
nodeAlign: justify
nodePadding: 14
node:
  labelPadding: 10
  strokeWidth: 2
link:
  opacity: 0.45
  blendMode: multiply
network:
  source: source
  target: target
  value: value
data:
  source: |
    [
      {"source": "China Components", "target": "US Factory", "value": 180},
      {"source": "China Components", "target": "EU Factory", "value": 95},
      {"source": "China Components", "target": "Asia Hub", "value": 220},
      {"source": "Taiwan Chips", "target": "US Factory", "value": 140},
      {"source": "Taiwan Chips", "target": "EU Factory", "value": 85},
      {"source": "Taiwan Chips", "target": "Asia Hub", "value": 75},
      {"source": "Vietnam Assembly", "target": "Asia Hub", "value": 165},
      {"source": "Vietnam Assembly", "target": "US Factory", "value": 45},
      {"source": "Mexico Parts", "target": "US Factory", "value": 120},
      {"source": "US Factory", "target": "West Coast DC", "value": 265},
      {"source": "US Factory", "target": "East Coast DC", "value": 220},
      {"source": "EU Factory", "target": "Europe DC", "value": 150},
      {"source": "EU Factory", "target": "East Coast DC", "value": 30},
      {"source": "Asia Hub", "target": "West Coast DC", "value": 185},
      {"source": "Asia Hub", "target": "Asia DC", "value": 275},
      {"source": "West Coast DC", "target": "Online Direct", "value": 180},
      {"source": "West Coast DC", "target": "Big Box Retail", "value": 150},
      {"source": "West Coast DC", "target": "Specialty Stores", "value": 120},
      {"source": "East Coast DC", "target": "Online Direct", "value": 95},
      {"source": "East Coast DC", "target": "Big Box Retail", "value": 110},
      {"source": "East Coast DC", "target": "Specialty Stores", "value": 45},
      {"source": "Europe DC", "target": "International", "value": 85},
      {"source": "Europe DC", "target": "Specialty Stores", "value": 65},
      {"source": "Asia DC", "target": "International", "value": 195},
      {"source": "Asia DC", "target": "Online Direct", "value": 80}
    ]

Configuration Reference

Existing Parameters

Parameter	Type	Default	Description
nodeWidth	number	20	Rectangle width in pixels
nodePadding	number	10	Vertical spacing between nodes
nodeAlign	string	"justify"	"left", "right", "center", "justify"
linkColor	string	"source-target"	"source-target", "source", "target", or color
format	string	",.0f"	D3 format specifier for values

Node Configuration

node:
  group: "category"    # Field for categorical coloring, or "depth" for auto
  labelPadding: 6      # Horizontal gap between node and label
  strokeWidth: 1       # Border width
  strokeOpacity: 1     # Border opacity

Link Configuration

link:
  opacity: 0.5         # Link transparency (0-1)
  blendMode: "multiply" # "multiply", "screen", or "normal"

Node Grouping Strategies

Depth-Based Grouping

Color nodes by their position in the flow. All sources get one color, all sinks another.

node:
  group: depth

Field-Based Grouping

Color nodes by a categorical field in your data.

node:
  group: category  # References a field in your data

Default (ID-Based)

Each node gets a unique color based on its ID. This is the default behavior.

Related Charts

• Arc Diagram - Linear layout for ordered relationships
• Force-Directed - Physics-based network layout
• Chord Diagram - Circular bidirectional flows