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/[email protected]/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.