Skip to content

Instantly share code, notes, and snippets.

@wvengen

wvengen/README.md

Last active January 19, 2017 01:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wvengen/7317daa451384dbcefe6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wvengen/7317daa451384dbcefe6 to your computer and use it in GitHub Desktop.
Download ZIP
d3.chart.sankey (energy demo)
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment