Sankey Diagram

Source: Department of Energy & Climate Change, Tom Counsell.

A demonstration of SanKey D3 skd3.

forked from mbostock's block: Sankey Diagram

forked from FabricioRHS's block: Sankey Diagram

<!DOCTYPE html>
<div id="chart"/>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//cdn.jsdelivr.net/gh/fabriciorhs/skd3/build/sk.d3.min.js"></script>
<link  href="//rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.css" rel="stylesheet" type="text/css" />
<style>
	#chart {
		height: 500px;
		width: 960px;
	}
</style>
<script>
			var configSankey = {
				margin: { top: 10, left: 10, right: 10, bottom: 10 },
				nodes: {
					dynamicSizeFontNode: {
						enabled: true,
						minSize: 14,
						maxSize: 30
					},
					draggableX: false,
					draggableY: true,
					colors: d3.scaleOrdinal(d3.schemeCategory10)
				},
				links: {
					formatValue: function(val) {
						return d3.format(",.0f")(val) + ' TWh';
					}
				},
				tooltip: {
					infoDiv: true,
					labelSource: 'Input:',
					labelTarget: 'Output:'
				}
			}

var objSankey = {};
d3.json("energy.json", function(error, energy) {
  if (error) throw error;
  objSankey = sk.createSankey('#chart', configSankey, energy);
});

</script>

Updated missing url //rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.js to //cdn.jsdelivr.net/gh/fabriciorhs/skd3/build/sk.d3.min.js

https://d3js.org/d3.v4.js

https://rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.js