d3-sankey

What is d3-sankey?

The d3-sankey npm package is a plugin for D3.js that provides tools for creating Sankey diagrams. Sankey diagrams are a type of flow diagram in which the width of the arrows is proportional to the flow rate. They are typically used to visualize energy or material transfers between processes.

What are d3-sankey's main functionalities?

Creating a Sankey Diagram

This code demonstrates how to create a basic Sankey diagram using the d3-sankey package. It defines nodes and links, sets up the Sankey generator, and generates the Sankey layout.

const { sankey, sankeyLinkHorizontal } = require('d3-sankey');
const data = {
  nodes: [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' }
  ],
  links: [
    { source: 0, target: 1, value: 10 },
    { source: 1, target: 2, value: 5 }
  ]
};
const sankeyGenerator = sankey().nodeWidth(15).nodePadding(10).extent([[1, 1], [500, 500]]);
const sankeyData = sankeyGenerator(data);
console.log(sankeyData);

Customizing Node Width and Padding

This code shows how to customize the node width and padding in a Sankey diagram. By adjusting these parameters, you can control the appearance and spacing of the nodes in the diagram.

const { sankey } = require('d3-sankey');
const data = {
  nodes: [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' }
  ],
  links: [
    { source: 0, target: 1, value: 10 },
    { source: 1, target: 2, value: 5 }
  ]
};
const sankeyGenerator = sankey().nodeWidth(20).nodePadding(15).extent([[1, 1], [500, 500]]);
const sankeyData = sankeyGenerator(data);
console.log(sankeyData);

Generating Sankey Links

This code demonstrates how to generate the path for a Sankey link using the sankeyLinkHorizontal function. This function creates a path string that can be used to render the link in an SVG element.

const { sankey, sankeyLinkHorizontal } = require('d3-sankey');
const data = {
  nodes: [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' }
  ],
  links: [
    { source: 0, target: 1, value: 10 },
    { source: 1, target: 2, value: 5 }
  ]
};
const sankeyGenerator = sankey().nodeWidth(15).nodePadding(10).extent([[1, 1], [500, 500]]);
const sankeyData = sankeyGenerator(data);
const linkPath = sankeyLinkHorizontal();
const link = sankeyData.links[0];
console.log(linkPath(link));

Other packages similar to d3-sankey

react-sankey

The react-sankey package is designed for use with React applications. It provides a React component for rendering Sankey diagrams, making it easier to integrate with React projects compared to d3-sankey, which requires more manual setup.

README

d3-sankey

D3 4.0 implementation of the Sankey plugin to visualize the flow between nodes in a directed acyclic network.

Installing

If you use NPM, npm install d3-sankey. Otherwise, download the latest release.

You can also load directly from unpkg.

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>
<script>

var sankey = d3.sankey();

</script>

Demo

Here is Mike Bostock's famous example recreated with d3-sankey.

Clone or download the block, then run npm install and npm run build to create d3.min.js.

API Reference

# sankey()

Constructs a new sankey generator with the default settings.

# sankey.nodeWidth([width])

If width is specified, sets the node width to the specified function or number and returns this sankey generator. If width is not specified, returns the current node width accessor, which defaults to:

function nodeWidth() {
  return 24;
}

# sankey.nodePadding([padding])

If padding is specified, sets the node padding to the specified function or number and returns this sankey generator. If padding is not specified, returns the current node padding accessor, which defaults to:

function nodePadding() {
  return 8;
}

Here padding refers to the vertical space between nodes that occupy the same horizontal space.

# sankey.nodes([nodes])

If nodes is specified, sets the list of nodes to the specified function or array and returns this sankey generator. If nodes is not specified, returns the current accessor to the list of nodes, which defaults to:

function nodes() {
  return [];
}

# sankey.links([links])

If links is specified, sets the list of links to the specified function or array and returns this sankey generator. If links is not specified, returns the current accessor to the list of links, which defaults to:

function links() {
  return [];
}

# sankey.layout([iterations])

Returns the current accessor to the SVG layout object. Here iterations is the number of times the converging function computeNodeDepths is run.

# sankey.relayout()

Similar to layout but only recalculates the depth of links. Primarily used when a node is moved vertically.