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
xxxxxxxxxx
<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