skd3

Sankey Diagram made easy. A javascript library that extends the popular D3.js/d3-sankey to enable fast and beautiful.

Inspired by the work of Mike Bostock's d3-sankey, As a proposal to simplify the generation of the sankey chart.

Sankey diagrams visualize the directed flow between nodes in an acyclic network. For example: (D3's classic energy sankey diagram) this diagram shows a possible scenario of UK energy production and consumption in 2050:

Source: Department of Energy & Climate Change, from: Mike Bostock - json sample.

See live sample

Dependencies

SKD3 requires D3v4 (d3.js) https://d3js.org/d3.v4.js.

Already tested with the latest version 4.10.2

<script src="https://unpkg.com/d3@4.10.2/build/d3.min.js"></script>

Installing

If you use NPM, npm install skd3. Otherwise, download the latest release. You can also load directly from unpkg.com:

<script src="https://unpkg.com/skd3/build/sk.d3.min.js"></script>
<link  href="https://unpkg.com/skd3/build/sk.d3.min.css" rel="stylesheet" type="text/css" />
<style>
    #sankeyChart {
        height: 500px;
        width: 960px;
    }
</style> 
 
<div id="sankeyChart"/>

Usage

Simple sankey component, using less code and using recent components. Create your sankey diagram easily.

var objSankey = sk.createSankey('#sankeyChart', configSankey, datajson);

Example of config:

var configSankey = {
    margin: { top: 10, left: 10, right: 10, bottom: 10 },
    nodes: {
        dynamicSizeFontNode: {
            enabled: true,
            minSize: 14,
            maxSize: 30
        },
        fontSize: 14, // if dynamicSizeFontNode not enabled
        draggableX: false, // default [ false ]
        draggableY: true, // default [ true ]
        colors: d3.scaleOrdinal(d3.schemeCategory10)
    },
    links: {
        formatValue: function(val) {
            return d3.format(",.0f")(val) + ' TWh';
        }
        unit: 'TWh' // if not set formatValue function
    },
    tooltip: {
        infoDiv: true,  // if false display default tooltip
        labelSource: 'Input:',
        labelTarget: 'Output:'
    }
}

Example data json:

var datajson = {nodes: [
  {id: 0, name: "Alice", color: "green"},
  {id: 1, name: "Bob", color: "yellow"},
  {id: 2, name: "Carol", color: "blue"}
],
links: [
  {source: 0, target: 1, value: 1},
  {source: 1, target: 2, value: 1}
]};

Update links values using d3`s transitions:

objSankey.updateData(new_dataJson);

Result:

Support to tooltips (using option/tooltip/infoDiv)

Fetures:

• Dynamic node font size. More readable and better indicates values.
• Tooltip indicating the input and output values. Intuitive comparison.
• Update of values of the links with transition effect.
• Drag nodes horizontally and vertically.

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue

Author

Fabricio Rodrigues

• github/fabriciorhs
• twitter/fabriciorhs

License

Copyright © 2017 Fabricio Rodrigues Released under the MIT license.

---