Skip to content

Instantly share code, notes, and snippets.

@LawrieR

LawrieR/energy.json

Forked from kunalb/energy.json
Last active August 29, 2015 14:25
Show Gist options
  • Save LawrieR/7595418e130f14c641e3 to your computer and use it in GitHub Desktop.
Save LawrieR/7595418e130f14c641e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
energy.json
{"nodes":[
{"name":"Profile"},
{"name":"User"},
{"name":"Content"},
{"name":"Campaigns"},
{"name":"Connection Profile"},
{"name":"Groups"},
{"name":"LinkedIn Presence"},
{"name":"Headline"},
{"name":"Skills"},
{"name":"Education"},
{"name":"Current Position"},
{"name":"Visuals"},
{"name":"Certifications"},
{"name":"Recommendations"},
{"name":"Engage people"},
{"name":"Electricity grid"},
{"name":"Over"},
{"name":"H2 conversion"},
{"name":"Road transport"},
{"name":"Agriculture"},
{"name":"Rail transport"},
{"name":"Lighting"},
{"name":"homes"},
{"name":"Gas imports"},
{"name":"Ngas"},
{"name":"Gas reserves"},
{"name":"Thermal generation"},
{"name":"Geothermal"}
],
"links":[
{"source":0,"target":1,"value":1, "numberOfRules":1},
{"source":0,"target":2,"value":1, "numberOfRules":1},
{"source":0,"target":3,"value":1, "numberOfRules":1},
{"source":0,"target":4,"value":1, "numberOfRules":1},
{"source":0,"target":5,"value":1, "numberOfRules":1},
{"source":0,"target":6,"value":1, "numberOfRules":1},
{"source":0,"target":7,"value":1, "numberOfRules":1},
{"source":0,"target":8,"value":1, "numberOfRules":1},
{"source":0,"target":9,"value":1, "numberOfRules":1},
{"source":0,"target":10,"value":1, "numberOfRules":1},
{"source":1,"target":3,"value":1, "numberOfRules":1},
{"source":2,"target":1,"value":1, "numberOfRules":1},
{"source":3,"target":1,"value":1, "numberOfRules":1},
{"source":3,"target":1,"value":1, "numberOfRules":1},
{"source":4,"target":1,"value":1, "numberOfRules":1},
{"source":2,"target":3,"value":3, "numberOfRules":1},
{"source":2,"target":4,"value":4, "numberOfRules":1},
{"source":2,"target":5,"value":5, "numberOfRules":1},
{"source":2,"target":6,"value":6, "numberOfRules":1},
{"source":6,"target":7,"value":1, "numberOfRules":1},
{"source":7,"target":8,"value":1, "numberOfRules":1},
{"source":8,"target":9,"value":1, "numberOfRules":1},
{"source":9,"target":10,"value":1, "numberOfRules":1},
{"source":10,"target":11,"value":1, "numberOfRules":1},
{"source":11,"target":12,"value":1, "numberOfRules":1},
{"source":12,"target":13,"value":1, "numberOfRules":1},
{"source":13,"target":14,"value":1, "numberOfRules":1},
{"source":14,"target":15,"value":1, "numberOfRules":1},
{"source":15,"target":16,"value":1, "numberOfRules":1}
]}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Sankey Diagram</title>
<style>
@import url(http://bost.ocks.org/mike/style.css?20120521);
#chart {
height: 500px;
}
.node rect {
cursor: move;
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>
<body>
<h1>Sankey Diagrams</h1>
<p id="chart">
<script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
<script src="https://raw.github.com/kunalb/d3-plugins/sankey/sankey/sankey.js"></script>
<script>
var margin = {top: 1, right: 1, bottom: 6, left: 1},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"),
format = function(d) { return formatNumber(d) + " TWh"; },
color = d3.scale.category20();
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var sankey = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
d3.json("energy.json", function(energy) {
sankey
.nodes(energy.nodes)
.links(energy.links)
.layout(32);
var link = svg.append("g").selectAll(".link")
.data(energy.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
link.append("title")
.text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
var node = svg.append("g").selectAll(".node")
.data(energy.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function() { this.parentNode.appendChild(this); })
.on("drag", dragmove));
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
.append("title")
.text(function(d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
function dragmove(d) {
d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
sankey.relayout();
link.attr("d", path);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment