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