Sankey Diagram Examples

Sankey diagrams visualize flow and relationships between nodes, showing proportional connections with varying link widths based on values.

Basic Sankey - Table Format

The simplest way to create a Sankey chart is using tabular data with source, target, and value columns.

View Source

type: sankey
engine: d3
width: 700
height: 600
x: source
y: target
value: value
title: Simple Energy Flow
data:
	source: |
	| source | target | value |
	|--------|--------|-------|
	| Energy | Electricity | 60 |
	| Energy | Heat | 40 |
	| Electricity | Residential | 35 |
	| Electricity | Commercial | 25 |
	| Heat | Residential | 20 |
	| Heat | Industrial | 20 |

Sankey with JSON Format

For more complex data, use JSON format with explicit nodes and links arrays.

View Source

type: sankey
engine: d3
width: 800
height: 500
title: Product Distribution Flow

| nodes | links |
|-------|-------|
| [{"name": "Factory"}, {"name": "Warehouse"}, {"name": "Store A"}, {"name": "Store B"}, {"name": "Store C"}] | [{"source": "Factory", "target": "Warehouse", "value": 100}, {"source": "Warehouse", "target": "Store A", "value": 40}, {"source": "Warehouse", "target": "Store B", "value": 35}, {"source": "Warehouse", "target": "Store C", "value": 25}] |

Custom Node Alignment

Control how nodes are positioned using the nodeAlign property.

Left Alignment

View Source

type: sankey
engine: d3
width: 700
height: 400
nodeAlign: left
x: source
y: target
value: value
title: Sankey - Left Aligned

| source | target | value |
|--------|--------|-------|
| Input | Process A | 50 |
| Input | Process B | 30 |
| Process A | Output | 40 |
| Process B | Output | 25 |

Right Alignment

View Source

type: sankey
engine: d3
width: 700
height: 400
nodeAlign: right
x: source
y: target
value: value
title: Sankey - Right Aligned

| source | target | value |
|--------|--------|-------|
| Source | Middle | 80 |
| Middle | Destination | 60 |
| Source | Alt Route | 20 |
| Alt Route | Destination | 15 |

Center Alignment

View Source

type: sankey
engine: d3
width: 700
height: 400
nodeAlign: center
x: source
y: target
value: value
title: Sankey - Center Aligned

| source | target | value |
|--------|--------|-------|
| A | B | 30 |
| A | C | 20 |
| B | D | 25 |
| C | D | 15 |

Justify (Default)

View Source

type: sankey
engine: d3
width: 700
height: 400
nodeAlign: justify
x: source
y: target
value: value
title: Sankey - Justified (Default)

| source | target | value |
|--------|--------|-------|
| Start | Mid 1 | 40 |
| Start | Mid 2 | 35 |
| Mid 1 | End | 30 |
| Mid 2 | End | 28 |

Link Color Modes

Customize how links are colored.

Source Coloring

Links inherit color from source node.

View Source

type: sankey
engine: d3
width: 700
height: 400
linkColor: source
x: source
y: target
value: value
title: Source Coloring

| source | target | value |
|--------|-----------|-------|
| Production | Quality Check | 100 |
| Production | Waste | 15 |
| Quality Check | Shipping | 85 |
| Quality Check | Returns | 10 |

Target Coloring

Links inherit color from target node.

View Source

type: sankey
engine: d3
width: 700
height: 400
linkColor: target
x: source
y: target
value: value
title: Target Coloring

| source | target | value |
|--------|--------|-------|
| Department A | Central | 45 |
| Department B | Central | 60 |
| Department C | Central | 35 |
| Central | Archive | 140 |

Gradient Coloring (Default)

Links use a gradient from source to target color.

View Source

type: sankey
engine: d3
width: 700
height: 400
linkColor: source-target
x: source
y: target
value: value
title: Gradient Coloring (Default)

| source | target | value |
|--------|--------|-------|
| Revenue | Operations | 400 |
| Revenue | Marketing | 200 |
| Revenue | Development | 150 |
| Operations | Profit | 150 |
| Marketing | Profit | 80 |
| Development | Profit | 100 |

Node Sizing

Adjust node width and padding for different visualizations.

View Source

type: sankey
engine: d3
width: 800
height: 450
nodeWidth: 25
nodePadding: 15
x: source
y: target
value: value
title: Custom Node Sizing

| source | target | value |
|--------|--------|-------|
| Raw Materials | Factory A | 120 |
| Raw Materials | Factory B | 80 |
| Factory A | Distribution | 110 |
| Factory B | Distribution | 70 |
| Distribution | Retail | 150 |

Real-World Example: Budget Allocation

View Source

type: sankey
engine: d3
width: 900
height: 600
x: source
y: target
value: value
title: Annual Budget Allocation

| source | target | value |
|--------|--------|-------|
| Total Budget | Engineering | 5000 |
| Total Budget | Marketing | 3000 |
| Total Budget | Sales | 2500 |
| Total Budget | Operations | 2000 |
| Engineering | Product Development | 3000 |
| Engineering | R&D | 1500 |
| Engineering | Infrastructure | 500 |
| Marketing | Digital Marketing | 1800 |
| Marketing | Brand | 800 |
| Marketing | Events | 400 |
| Sales | Direct Sales | 1500 |
| Sales | Partners | 1000 |
| Operations | Facilities | 1200 |
| Operations | Support | 800 |

Real-World Example: Website Traffic Flow

View Source

type: sankey
engine: d3
width: 900
height: 550
nodeAlign: justify
x: source
y: target
value: value
title: Website Traffic Flow Analysis

| source | target | value |
|--------|--------|-------|
| Direct | Homepage | 2500 |
| Social Media | Homepage | 1800 |
| Search | Homepage | 3200 |
| Email | Homepage | 900 |
| Homepage | Products | 4500 |
| Homepage | Blog | 2100 |
| Homepage | About | 1800 |
| Products | Checkout | 1200 |
| Products | Exit | 3300 |
| Blog | Products | 600 |
| Blog | Exit | 1500 |
| Checkout | Purchase | 900 |
| Checkout | Abandoned | 300 |

Real-World Example: Manufacturing Process

View Source

type: sankey
engine: d3
width: 900
height: 550
nodeWidth: 20
nodePadding: 12
linkColor: source-target
x: source
y: target
value: value
title: Manufacturing Process Flow

| source | target | value |
|--------|--------|-------|
| Raw Material Intake | Inspection | 1000 |
| Inspection | Approved | 950 |
| Inspection | Rejected | 50 |
| Approved | Processing Stage 1 | 950 |
| Processing Stage 1 | Quality Check 1 | 920 |
| Processing Stage 1 | Waste Stream A | 30 |
| Quality Check 1 | Processing Stage 2 | 880 |
| Quality Check 1 | Rework Department | 40 |
| Processing Stage 2 | Quality Check 2 | 860 |
| Processing Stage 2 | Waste Stream B | 20 |
| Rework Department | Recycling | 40 |
| Quality Check 2 | Final Assembly | 840 |
| Quality Check 2 | Final Inspection | 20 |
| Final Assembly | Packaging | 830 |
| Final Assembly | Waste Stream C | 10 |
| Final Inspection | Packaging | 18 |
| Final Inspection | Quality Archive | 2 |
| Packaging | Shipping | 848 |

Configuration Options

Required Configuration

• type: Must be "sankey"
• engine: Must be "d3" (Sankey diagrams only work with D3 engine)
• Data format options:
  • Table format: Specify x, y, and value fields (e.g., x: "source", y: "target", value: "value")
  • JSON format: Provide nodes and links columns in data

Optional Configuration

• width: Chart width in pixels (default: 600)
• height: Chart height in pixels (default: 400)
• margin: Object with top, right, bottom, left properties
• title: Chart title
• nodeWidth: Width of node rectangles (default: 15)
• nodePadding: Vertical space between nodes (default: 10)
• nodeAlign: Node alignment strategy
  • "left": Align nodes to the left
  • "right": Align nodes to the right
  • "center": Center nodes
  • "justify": Spread nodes evenly (default)
• linkColor: Link coloring strategy
  • "source": Use source node color
  • "target": Use target node color
  • "source-target": Gradient from source to target (default)
  • Custom color string (e.g., "#999999")
• colorScheme: D3 color scheme (default: schemeCategory10)
• format: Number format for values (default: ",.0f")

Tips and Best Practices

1. Data Structure: For simple flows, use table format. For complex multi-level flows, JSON format provides more control.

2. Node Names: Keep node names concise for better label readability.

3. Value Scale: Ensure values are on similar scales. Large disparities can make small flows hard to see.

4. Node Alignment:

   • Use "justify" for balanced multi-level flows
   • Use "left" or "right" when emphasizing flow direction
   • Use "center" for symmetric visualizations

5. Link Colors:

   • "source-target" gradient works best for most cases
   • "source" emphasizes origins
   • "target" emphasizes destinations

6. Chart Dimensions: Sankey diagrams work best with wider charts (e.g., 800-900px width) to accommodate labels and flows.

7. Complexity: For diagrams with many nodes, increase height and adjust nodePadding to prevent overlap.