Sankey plot | the D3 Graph Gallery

Step by step

Sankey plots are built thanks to the d3-sankey plugin. Input data must be a nested list providing the nodes and the links of the network. This kind of data can be stored under several formats: this section shows how to build a sankey diagram from a few different ones.

Sankey from .json file

The most basic sankey diagram you can do in d3.js. Keeping only the core code.

Input data format: Json

Sankey from .csv file

Basic example by d3Noob showing how to build the sankey from a list of links stored at .csv format.

Selection of blocks

A few blocks with more complicated codes to showcase the possibility of the d3-sankey plugin

Sankey from .csv file

Basic example by d3Noob showing how to build the sankey from a list of links stored at .csv format.

Energy production flow

UK energy production and consumption in 2050: energy supplies are on the left, and demands are on the right

Add horizontal drag

A blog that illustrates how to add an horizontal drag feature on each node.