Source: Department of Energy & Climate Change, Tom Counsell.
A demonstration of d3-sankey.
forked from mbostock's block: Sankey Diagram
forked from anonymous's block: Sankey Diagram
border: no | |
license: gpl-3.0 |
Source: Department of Energy & Climate Change, Tom Counsell.
A demonstration of d3-sankey.
forked from mbostock's block: Sankey Diagram
forked from anonymous's block: Sankey Diagram
{ | |
"nodes":[{ | |
"name":"ASV " | |
}, | |
{ | |
"name":"AVI" | |
}, | |
{ | |
"name":"INS" | |
}, | |
{ | |
"name":"PAR" | |
}, | |
{ | |
"name":"SAP" | |
}, | |
{ | |
"name":"UNI" | |
}, | |
{ | |
"name":"WEB" | |
}, | |
{ | |
"name":"ZZ" | |
}, | |
{ | |
"name":"grey" | |
}, | |
{ | |
"name":"cl_united" | |
}, | |
{ | |
"name":"unique" | |
}, | |
{ | |
"name":"WEB×UNI" | |
}] | |
,"links":[{"source":0, | |
"target":10, | |
"value": 3095}, | |
{"source":0, | |
"target":8, | |
"value": 37}, | |
{"source":0, | |
"target":9, | |
"value": 5008}, | |
{"source":1, | |
"target":9, | |
"value": 2096}, | |
{"source":2, | |
"target":10, | |
"value": 15893}, | |
{"source":2, | |
"target":8, | |
"value": 1613}, | |
{"source":2, | |
"target":9, | |
"value": 2878}, | |
{"source":3, | |
"target":10, | |
"value": 19}, | |
{"source":3, | |
"target":8, | |
"value": 16}, | |
{"source":3, | |
"target":9, | |
"value": 52}, | |
{"source":4, | |
"target":10, | |
"value": 2654}, | |
{"source":6, | |
"target":11, | |
"value": 1151}, | |
{"source":4, | |
"target":9, | |
"value": 5927}, | |
{"source":5, | |
"target":9, | |
"value": 13707}, | |
{"source":5, | |
"target":11, | |
"value": 6651}, | |
{"source":11, | |
"target":9, | |
"value": 3651}, | |
{"source":6, | |
"target":8, | |
"value": 3392}, | |
{"source":6, | |
"target":9, | |
"value": 46355}, | |
{"source":7, | |
"target":10, | |
"value": 12257}, | |
{"source":7, | |
"target":8, | |
"value": 3690}]} |
<!DOCTYPE html> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/[email protected]"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var formatNumber = d3.format(",.0f"), | |
format = function(d) { return formatNumber(d) + " TWh"; }, | |
color = d3.scaleOrdinal(d3.schemeCategory20); | |
var sankey = d3.sankey() | |
.nodeWidth(15) | |
.nodePadding(10) | |
.extent([[1, 1], [width - 1, height - 6]]); | |
var link = svg.append("g") | |
.attr("class", "links") | |
.attr("fill", "none") | |
.attr("stroke", "#000") | |
.attr("stroke-opacity", 0.2) | |
.selectAll("path"); | |
var node = svg.append("g") | |
.attr("class", "nodes") | |
.attr("font-family", "sans-serif") | |
.attr("font-size", 10) | |
.selectAll("g"); | |
d3.json("energy.json", function(error, energy) { | |
if (error) throw error; | |
sankey(energy); | |
link = link | |
.data(energy.links) | |
.enter() | |
.append("path") | |
.attr('stroke', function(d) { | |
return color(d.source.name.replace(/ .*/, "")) | |
}) | |
.attr("d", d3.sankeyLinkHorizontal()) | |
.attr("stroke-width", function(d) { return Math.max(1, d.width); }); | |
link.append("title") | |
.text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); | |
node = node | |
.data(energy.nodes) | |
.enter().append("g"); | |
node.append("rect") | |
.attr("x", function(d) { return d.x0; }) | |
.attr("y", function(d) { return d.y0; }) | |
.attr("height", function(d) { return d.y1 - d.y0; }) | |
.attr("width", function(d) { return d.x1 - d.x0; }) | |
.attr("fill", function(d) { return color(d.name.replace(/ .*/, "")); }) | |
.attr("stroke", "#000"); | |
node.append("text") | |
.attr("x", function(d) { return d.x0 - 6; }) | |
.attr("y", function(d) { return (d.y1 + d.y0) / 2; }) | |
.attr("dy", "0.35em") | |
.attr("text-anchor", "end") | |
.text(function(d) { return d.name; }) | |
.filter(function(d) { return d.x0 < width / 2; }) | |
.attr("x", function(d) { return d.x1 + 6; }) | |
.attr("text-anchor", "start"); | |
node.append("title") | |
.text(function(d) { return d.name + "\n" + format(d.value); }); | |
}); | |
</script> |
�PNG | |