d3.chart.sankey: Reusable D3 Sankey diagram using d3.Chart.
D3's classic energy sankey diagram built using d3.chart.sankey
.
d3.chart.sankey: Reusable D3 Sankey diagram using d3.Chart.
D3's classic energy sankey diagram built using d3.chart.sankey
.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>d3.chart.sankey (energy demo)</title> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//cdn.rawgit.com/newrelic-forks/d3-plugins-sankey/master/sankey.js"></script> | |
<script src="//cdn.rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script> | |
<script src="//cdn.rawgit.com/q-m/d3.chart.sankey/master/d3.chart.sankey.min.js"></script> | |
<style> | |
body { | |
width: 960px; | |
margin: auto; | |
font: 10px sans-serif; | |
} | |
#chart { | |
width: 960px; | |
height: 500px; | |
} | |
.node rect { | |
fill-opacity: .9; | |
shape-rendering: crispEdges; | |
} | |
.node text { | |
pointer-events: none; | |
text-shadow: 0 1px 0 #fff; | |
} | |
.link { | |
fill: none; | |
stroke: #000; | |
stroke-opacity: .2; | |
} | |
.link:hover { | |
stroke-opacity: .5; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script> | |
d3.json("//cdn.rawgit.com/q-m/d3.chart.sankey/master/example/data/energy.json", function(error, json) { | |
var chart = d3.select("#chart").append("svg").chart('Sankey'), | |
color = d3.scale.category20(); | |
chart | |
.nodeWidth(15) | |
.nodePadding(10) | |
.colorNodes(function(name) { return color(name.replace(/ .*/, "")); }) | |
.draw(json); | |
}); | |
</script> | |
</body> | |
</html> |