A sankey diagram where connection between nodes are represented by goo.
Created
September 8, 2016 02:30
-
-
Save emeeks/a11894593fcae32ac361e5c2debfdec5 to your computer and use it in GitHub Desktop.
Gooey Sankey
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (global, factory) { | |
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | |
typeof define === 'function' && define.amd ? define('d3-glyphEdge', ['exports'], factory) : | |
factory((global.d3_glyphEdge = {})); | |
}(this, function (exports) { 'use strict'; | |
function halfArrow(d, nodeTargetSize, bodySize, headSize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var headDistance = headSize * 3; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 - ( Math.PI / 2 ); | |
var angle2 = angle0 + ( Math.PI / 2 ); | |
var x1 = d.source.x + (headSize * Math.cos(angle1)); | |
var y1 = d.source.y - (headSize * Math.sin(angle1)); | |
var x2 = d.source.x + (headSize * Math.cos(angle2)); | |
var y2 = d.source.y - (headSize * Math.sin(angle2)); | |
var x3 = d.target.x - (headSize * Math.cos(angle1)); | |
var y3 = d.target.y + (headSize * Math.sin(angle1)); | |
var mx1 = d.source.x + (bodySize * Math.cos(angle1)); | |
var my1 = d.source.y - (bodySize * Math.sin(angle1)); | |
var mx2 = d.source.x + (bodySize * Math.cos(angle2)); | |
var my2 = d.source.y - (bodySize * Math.sin(angle2)); | |
var mx3 = d.target.x + (bodySize * Math.cos(angle1)); | |
var my3 = d.target.y - (bodySize * Math.sin(angle1)); | |
var dY = d.source.y - d.target.y; | |
var dX = d.source.x - d.target.x; | |
var midDiffY1 = my1 - my3; | |
var midDiffX1 = mx1 - mx3; | |
var diffY1 = y1 - y3; | |
var diffX1 = x1 - x3; | |
var pythag = Math.sqrt((midDiffX1 * midDiffX1) + (midDiffY1 * midDiffY1)); | |
var pythag2 = Math.sqrt((dX * dX) + (dY * dY)); | |
var adjX1 = mx2 - ((midDiffX1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var adjY1 = my2 - ((midDiffY1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var headX1 = x2 - ((diffX1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var headY1 = y2 - ((diffY1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var tipX = d.source.x - ((dX * (pythag2 - nodeTargetSize)) / pythag2); | |
var tipY = d.source.y - ((dY * (pythag2 - nodeTargetSize)) / pythag2); | |
return "M" + d.source.x + "," + d.source.y + "L" + mx2 + "," + my2 + "L" + adjX1 + "," + adjY1 + "L" + headX1 + "," + headY1 + "L" + tipX + "," + tipY + "L" + d.source.x + "," + d.source.y + "z"; | |
}; | |
function lineArc(d) { | |
var dx = d.target.x - d.source.x, | |
dy = d.target.y - d.source.y, | |
dr = Math.sqrt(dx * dx + dy * dy); | |
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; | |
}; | |
function ribbon(d, bodySize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 - ( Math.PI / 2 ); | |
var angle2 = angle0 + ( Math.PI / 2 ); | |
var mx1 = d.source.x + (bodySize * Math.cos(angle1)); | |
var my1 = d.source.y - (bodySize * Math.sin(angle1)); | |
var mx2 = d.source.x + (bodySize * Math.cos(angle2)); | |
var my2 = d.source.y - (bodySize * Math.sin(angle2)); | |
var mx3 = d.target.x - (bodySize * Math.cos(angle1)); | |
var my3 = d.target.y + (bodySize * Math.sin(angle1)); | |
var mx4 = d.target.x - (bodySize * Math.cos(angle2)); | |
var my4 = d.target.y + (bodySize * Math.sin(angle2)); | |
return "M" + mx1 + "," + my1 + "L" + mx2 + "," + my2 + "L" + mx3 + "," + my3 + "L" + mx4 + "," + my4 + "z"; | |
} | |
function taffy(d, nodeSourceSize, nodeTargetSize, midpointSize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 - ( Math.PI / 2 ); | |
var angle2 = angle0 + ( Math.PI / 2 ); | |
var x1 = d.source.x + (nodeSourceSize * Math.cos(angle1)); | |
var y1 = d.source.y - (nodeSourceSize * Math.sin(angle1)); | |
var x2 = d.source.x + (nodeSourceSize * Math.cos(angle2)); | |
var y2 = d.source.y - (nodeSourceSize * Math.sin(angle2)); | |
var x3 = d.target.x + (nodeTargetSize * Math.cos(angle2)); | |
var y3 = d.target.y - (nodeTargetSize * Math.sin(angle2)); | |
var x4 = d.target.x + (nodeTargetSize * Math.cos(angle1)); | |
var y4 = d.target.y - (nodeTargetSize * Math.sin(angle1)); | |
var mx1 = d.source.x + (midpointSize * Math.cos(angle1)); | |
var my1 = d.source.y - (midpointSize * Math.sin(angle1)); | |
var mx2 = d.source.x + (midpointSize * Math.cos(angle2)); | |
var my2 = d.source.y - (midpointSize * Math.sin(angle2)); | |
var mx3 = d.target.x + (midpointSize * Math.cos(angle1)); | |
var my3 = d.target.y - (midpointSize * Math.sin(angle1)); | |
var mx4 = d.target.x + (midpointSize * Math.cos(angle2)); | |
var my4 = d.target.y - (midpointSize * Math.sin(angle2)); | |
var midY2 = (my1 + my3) / 2; | |
var midX2 = (mx1 + mx3) / 2; | |
var midY1 = (my2 + my4) / 2; | |
var midX1 = (mx2 + mx4) / 2; | |
return "M" + x1 + "," + y1 + "L" + x2 + "," + y2 + " L " + midX1 + "," + midY1 + " L " + x3 + "," + y3 + " L " + x4 + "," + y4 + " L " + midX2 + "," + midY2 + "z"; | |
}; | |
function nail(d, nodeSize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 - ( Math.PI / 2 ); | |
var angle2 = angle0 + ( Math.PI / 2 ); | |
var x1 = d.source.x + (nodeSize * Math.cos(angle1)); | |
var y1 = d.source.y - (nodeSize * Math.sin(angle1)); | |
var x2 = d.source.x + (nodeSize * Math.cos(angle2)); | |
var y2 = d.source.y - (nodeSize * Math.sin(angle2)); | |
return "M" + x1 + "," + y1 + "L" + x2 + "," + y2 + " L " + d.target.x + "," + d.target.y + "z"; | |
}; | |
function comet(d, nodeSize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 - ( Math.PI / 2 ); | |
var angle2 = angle0 + ( Math.PI / 2 ); | |
var x1 = d.target.x + (nodeSize * Math.cos(angle1)); | |
var y1 = d.target.y - (nodeSize * Math.sin(angle1)); | |
var x2 = d.target.x + (nodeSize * Math.cos(angle2)); | |
var y2 = d.target.y - (nodeSize * Math.sin(angle2)); | |
return "M" + x1 + "," + y1 + "L" + x2 + "," + y2 + " L " + d.source.x + "," + d.source.y + "z"; | |
}; | |
function arrowhead(d, nodeTargetSize, bodySize, headSize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var headDistance = headSize * 3; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 - ( Math.PI / 2 ); | |
var angle2 = angle0 + ( Math.PI / 2 ); | |
var x1 = d.source.x + (headSize * Math.cos(angle1)); | |
var y1 = d.source.y - (headSize * Math.sin(angle1)); | |
var x2 = d.source.x + (headSize * Math.cos(angle2)); | |
var y2 = d.source.y - (headSize * Math.sin(angle2)); | |
var x3 = d.target.x - (headSize * Math.cos(angle1)); | |
var y3 = d.target.y + (headSize * Math.sin(angle1)); | |
var x4 = d.target.x - (headSize * Math.cos(angle2)); | |
var y4 = d.target.y + (headSize * Math.sin(angle2)); | |
var mx1 = d.source.x + (bodySize * Math.cos(angle1)); | |
var my1 = d.source.y - (bodySize * Math.sin(angle1)); | |
var mx2 = d.source.x + (bodySize * Math.cos(angle2)); | |
var my2 = d.source.y - (bodySize * Math.sin(angle2)); | |
var mx3 = d.target.x + (bodySize * Math.cos(angle1)); | |
var my3 = d.target.y - (bodySize * Math.sin(angle1)); | |
var mx4 = d.target.x + (bodySize * Math.cos(angle2)); | |
var my4 = d.target.y - (bodySize * Math.sin(angle2)); | |
var dY = d.source.y - d.target.y; | |
var dX = d.source.x - d.target.x; | |
var midDiffY1 = my1 - my3; | |
var midDiffX1 = mx1 - mx3; | |
var midDiffY2 = my2 - my4; | |
var midDiffX2 = mx2 - mx4; | |
var diffY1 = y1 - y3; | |
var diffX1 = x1 - x3; | |
var diffY2 = y2 - y4; | |
var diffX2 = x2 - x4; | |
var pythag = Math.sqrt((midDiffX1 * midDiffX1) + (midDiffY1 * midDiffY1)); | |
var pythag2 = Math.sqrt((dX * dX) + (dY * dY)); | |
var adjX1 = mx2 - ((midDiffX1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var adjY1 = my2 - ((midDiffY1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var adjX2 = mx1 - ((midDiffX2 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var adjY2 = my1 - ((midDiffY2 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var headX2 = x1 - ((diffX2 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var headY2 = y1 - ((diffY2 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var headX1 = x2 - ((diffX1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var headY1 = y2 - ((diffY1 * (pythag - headDistance - nodeTargetSize)) / pythag); | |
var tipX = d.source.x - ((dX * (pythag2 - nodeTargetSize)) / pythag2); | |
var tipY = d.source.y - ((dY * (pythag2 - nodeTargetSize)) / pythag2); | |
return "M" + mx2 + "," + my2 + "L" + adjX1 + "," + adjY1 + "L" + headX1 + "," + headY1 + "L" + tipX + "," + tipY + "L" + headX2 + "," + headY2 + "L" + adjX2 + "," + adjY2 + "L" + mx1 + "," + my1 + "z"; | |
}; | |
function parallel(d, sourceSize, targetSize, edgeNumber) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 + ( (Math.PI * 0.75) + (edgeNumber * 0.25) ); | |
var angle2 = angle0 + ( (Math.PI * 0.25) - (edgeNumber * 0.25) ); | |
var x1 = d.source.x + (sourceSize * Math.cos(angle1)); | |
var y1 = d.source.y - (sourceSize * Math.sin(angle1)); | |
var x2 = d.target.x + (targetSize * Math.cos(angle2)); | |
var y2 = d.target.y - (targetSize * Math.sin(angle2)); | |
return {source: {x: x1, y: y1}, target: {x: x2, y: y2}}; | |
} | |
function offset(d, nodeSize) { | |
var diffX = d.target.y - d.source.y; | |
var diffY = d.target.x - d.source.x; | |
var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) ); | |
var angle1 = angle0 + ( Math.PI * 0.75 ); | |
var angle2 = angle0 + ( Math.PI * 0.25 ); | |
var x1 = d.source.x + (nodeSize * Math.cos(angle1)); | |
var y1 = d.source.y - (nodeSize * Math.sin(angle1)); | |
var x2 = d.target.x + (nodeSize * Math.cos(angle2)); | |
var y2 = d.target.y - (nodeSize * Math.sin(angle2)); | |
return {source: {x: x1, y: y1}, target: {x: x2, y: y2}}; | |
} | |
function particle(d, path, pathWidth, speed) { | |
pathWidth = pathWidth / 2; | |
d.particles = d.particles.filter(function (d) {return d.current < path.getTotalLength()}); | |
if (d.frequency < 1) { | |
if (Math.random() < d.frequency) { | |
pushParticle(); | |
} | |
} else { | |
for (var x = 0; x < d.frequency; x++) { | |
pushParticle(); | |
} | |
} | |
function pushParticle() { | |
d.particles.push({current: 0, xOffset: pathWidth - (pathWidth * Math.random() * 2), yOffset: pathWidth - (pathWidth * Math.random() * 2)}); | |
} | |
d.particles.forEach(function (particle) { | |
particle.current = particle.current + speed; | |
var currentPosition = path.getPointAtLength(particle.current); | |
particle.x = currentPosition.x + particle.xOffset; | |
particle.y = currentPosition.y + particle.yOffset; | |
}); | |
}; | |
var d = { | |
arrowhead: arrowhead, | |
comet: comet, | |
nail: nail, | |
taffy: taffy, | |
ribbon: ribbon, | |
lineArc: lineArc, | |
halfArrow: halfArrow | |
}; | |
var project = { | |
offset: offset, | |
parallel: parallel | |
} | |
var mutate = { | |
particle: particle | |
} | |
var version = "1.0.0"; | |
exports.version = version; | |
exports.d = d; | |
exports.project = project; | |
exports.mutate = mutate; | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
d3.sankey = function() { | |
var sankey = {}, | |
nodeWidth = 24, | |
nodePadding = 8, | |
size = [1, 1], | |
nodes = [], | |
links = []; | |
sankey.nodeWidth = function(_) { | |
if (!arguments.length) return nodeWidth; | |
nodeWidth = +_; | |
return sankey; | |
}; | |
sankey.nodePadding = function(_) { | |
if (!arguments.length) return nodePadding; | |
nodePadding = +_; | |
return sankey; | |
}; | |
sankey.nodes = function(_) { | |
if (!arguments.length) return nodes; | |
nodes = _; | |
return sankey; | |
}; | |
sankey.links = function(_) { | |
if (!arguments.length) return links; | |
links = _; | |
return sankey; | |
}; | |
sankey.size = function(_) { | |
if (!arguments.length) return size; | |
size = _; | |
return sankey; | |
}; | |
sankey.layout = function(iterations) { | |
computeNodeLinks(); | |
computeNodeValues(); | |
computeNodeBreadths(); | |
computeNodeDepths(iterations); | |
computeLinkDepths(); | |
return sankey; | |
}; | |
sankey.relayout = function() { | |
computeLinkDepths(); | |
return sankey; | |
}; | |
sankey.link = function() { | |
var curvature = .5; | |
function link(d) { | |
var x0 = d.source.x + d.source.dx, | |
x1 = d.target.x, | |
xi = d3.interpolateNumber(x0, x1), | |
x2 = xi(curvature), | |
x3 = xi(1 - curvature), | |
y0 = d.source.y + d.sy + d.dy / 2, | |
y1 = d.target.y + d.ty + d.dy / 2; | |
return "M" + x0 + "," + y0 | |
+ "C" + x2 + "," + y0 | |
+ " " + x3 + "," + y1 | |
+ " " + x1 + "," + y1; | |
} | |
link.curvature = function(_) { | |
if (!arguments.length) return curvature; | |
curvature = +_; | |
return link; | |
}; | |
return link; | |
}; | |
// Populate the sourceLinks and targetLinks for each node. | |
// Also, if the source and target are not objects, assume they are indices. | |
function computeNodeLinks() { | |
nodes.forEach(function(node) { | |
node.sourceLinks = []; | |
node.targetLinks = []; | |
}); | |
links.forEach(function(link) { | |
var source = link.source, | |
target = link.target; | |
if (typeof source === "number") source = link.source = nodes[link.source]; | |
if (typeof target === "number") target = link.target = nodes[link.target]; | |
source.sourceLinks.push(link); | |
target.targetLinks.push(link); | |
}); | |
} | |
// Compute the value (size) of each node by summing the associated links. | |
function computeNodeValues() { | |
nodes.forEach(function(node) { | |
node.value = Math.max( | |
d3.sum(node.sourceLinks, value), | |
d3.sum(node.targetLinks, value) | |
); | |
}); | |
} | |
// Iteratively assign the breadth (x-position) for each node. | |
// Nodes are assigned the maximum breadth of incoming neighbors plus one; | |
// nodes with no incoming links are assigned breadth zero, while | |
// nodes with no outgoing links are assigned the maximum breadth. | |
function computeNodeBreadths() { | |
var remainingNodes = nodes, | |
nextNodes, | |
x = 0; | |
while (remainingNodes.length) { | |
nextNodes = []; | |
remainingNodes.forEach(function(node) { | |
node.x = x; | |
node.dx = nodeWidth; | |
node.sourceLinks.forEach(function(link) { | |
if (nextNodes.indexOf(link.target) < 0) { | |
nextNodes.push(link.target); | |
} | |
}); | |
}); | |
remainingNodes = nextNodes; | |
++x; | |
} | |
// | |
moveSinksRight(x); | |
scaleNodeBreadths((size[0] - nodeWidth) / (x - 1)); | |
} | |
function moveSourcesRight() { | |
nodes.forEach(function(node) { | |
if (!node.targetLinks.length) { | |
node.x = d3.min(node.sourceLinks, function(d) { return d.target.x; }) - 1; | |
} | |
}); | |
} | |
function moveSinksRight(x) { | |
nodes.forEach(function(node) { | |
if (!node.sourceLinks.length) { | |
node.x = x - 1; | |
} | |
}); | |
} | |
function scaleNodeBreadths(kx) { | |
nodes.forEach(function(node) { | |
node.x *= kx; | |
}); | |
} | |
function computeNodeDepths(iterations) { | |
var nodesByBreadth = d3.nest() | |
.key(function(d) { return d.x; }) | |
.sortKeys(d3.ascending) | |
.entries(nodes) | |
.map(function(d) { return d.values; }); | |
// | |
initializeNodeDepth(); | |
resolveCollisions(); | |
for (var alpha = 1; iterations > 0; --iterations) { | |
relaxRightToLeft(alpha *= .99); | |
resolveCollisions(); | |
relaxLeftToRight(alpha); | |
resolveCollisions(); | |
} | |
function initializeNodeDepth() { | |
var ky = d3.min(nodesByBreadth, function(nodes) { | |
return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value); | |
}); | |
nodesByBreadth.forEach(function(nodes) { | |
nodes.forEach(function(node, i) { | |
node.y = i; | |
node.dy = node.value * ky; | |
}); | |
}); | |
links.forEach(function(link) { | |
link.dy = link.value * ky; | |
}); | |
} | |
function relaxLeftToRight(alpha) { | |
nodesByBreadth.forEach(function(nodes, breadth) { | |
nodes.forEach(function(node) { | |
if (node.targetLinks.length) { | |
var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value); | |
node.y += (y - center(node)) * alpha; | |
} | |
}); | |
}); | |
function weightedSource(link) { | |
return center(link.source) * link.value; | |
} | |
} | |
function relaxRightToLeft(alpha) { | |
nodesByBreadth.slice().reverse().forEach(function(nodes) { | |
nodes.forEach(function(node) { | |
if (node.sourceLinks.length) { | |
var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value); | |
node.y += (y - center(node)) * alpha; | |
} | |
}); | |
}); | |
function weightedTarget(link) { | |
return center(link.target) * link.value; | |
} | |
} | |
function resolveCollisions() { | |
nodesByBreadth.forEach(function(nodes) { | |
var node, | |
dy, | |
y0 = 0, | |
n = nodes.length, | |
i; | |
// Push any overlapping nodes down. | |
nodes.sort(ascendingDepth); | |
for (i = 0; i < n; ++i) { | |
node = nodes[i]; | |
dy = y0 - node.y; | |
if (dy > 0) node.y += dy; | |
y0 = node.y + node.dy + nodePadding; | |
} | |
// If the bottommost node goes outside the bounds, push it back up. | |
dy = y0 - nodePadding - size[1]; | |
if (dy > 0) { | |
y0 = node.y -= dy; | |
// Push any overlapping nodes back up. | |
for (i = n - 2; i >= 0; --i) { | |
node = nodes[i]; | |
dy = node.y + node.dy + nodePadding - y0; | |
if (dy > 0) node.y -= dy; | |
y0 = node.y; | |
} | |
} | |
}); | |
} | |
function ascendingDepth(a, b) { | |
return a.y - b.y; | |
} | |
} | |
function computeLinkDepths() { | |
nodes.forEach(function(node) { | |
node.sourceLinks.sort(ascendingTargetDepth); | |
node.targetLinks.sort(ascendingSourceDepth); | |
}); | |
nodes.forEach(function(node) { | |
var sy = 0, ty = 0; | |
node.sourceLinks.forEach(function(link) { | |
link.sy = sy; | |
sy += link.dy; | |
}); | |
node.targetLinks.forEach(function(link) { | |
link.ty = ty; | |
ty += link.dy; | |
}); | |
}); | |
function ascendingSourceDepth(a, b) { | |
return a.source.y - b.source.y; | |
} | |
function ascendingTargetDepth(a, b) { | |
return a.target.y - b.target.y; | |
} | |
} | |
function center(node) { | |
return node.y + node.dy / 2; | |
} | |
function value(link) { | |
return link.value; | |
} | |
return sankey; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"nodes":[ | |
{"name":"Agricultural 'waste'"}, | |
{"name":"Bio-conversion"}, | |
{"name":"Liquid"}, | |
{"name":"Losses"}, | |
{"name":"Solid"}, | |
{"name":"Gas"}, | |
{"name":"Biofuel imports"}, | |
{"name":"Biomass imports"}, | |
{"name":"Coal imports"}, | |
{"name":"Coal"}, | |
{"name":"Coal reserves"}, | |
{"name":"District heating"}, | |
{"name":"Industry"}, | |
{"name":"Heating and cooling - commercial"}, | |
{"name":"Heating and cooling - homes"}, | |
{"name":"Electricity grid"}, | |
{"name":"Over generation / exports"}, | |
{"name":"H2 conversion"}, | |
{"name":"Road transport"}, | |
{"name":"Agriculture"}, | |
{"name":"Rail transport"}, | |
{"name":"Lighting & appliances - commercial"}, | |
{"name":"Lighting & appliances - homes"}, | |
{"name":"Gas imports"}, | |
{"name":"Ngas"}, | |
{"name":"Gas reserves"}, | |
{"name":"Thermal generation"}, | |
{"name":"Geothermal"}, | |
{"name":"H2"}, | |
{"name":"Hydro"}, | |
{"name":"International shipping"}, | |
{"name":"Domestic aviation"}, | |
{"name":"International aviation"}, | |
{"name":"National navigation"}, | |
{"name":"Marine algae"}, | |
{"name":"Nuclear"}, | |
{"name":"Oil imports"}, | |
{"name":"Oil"}, | |
{"name":"Oil reserves"}, | |
{"name":"Other waste"}, | |
{"name":"Pumped heat"}, | |
{"name":"Solar PV"}, | |
{"name":"Solar Thermal"}, | |
{"name":"Solar"}, | |
{"name":"Tidal"}, | |
{"name":"UK land based bioenergy"}, | |
{"name":"Wave"}, | |
{"name":"Wind"} | |
], | |
"links":[ | |
{"source":0,"target":1,"value":124.729}, | |
{"source":1,"target":2,"value":0.597}, | |
{"source":1,"target":3,"value":26.862}, | |
{"source":1,"target":4,"value":280.322}, | |
{"source":1,"target":5,"value":81.144}, | |
{"source":6,"target":2,"value":35}, | |
{"source":7,"target":4,"value":35}, | |
{"source":8,"target":9,"value":11.606}, | |
{"source":10,"target":9,"value":63.965}, | |
{"source":9,"target":4,"value":75.571}, | |
{"source":11,"target":12,"value":10.639}, | |
{"source":11,"target":13,"value":22.505}, | |
{"source":11,"target":14,"value":46.184}, | |
{"source":15,"target":16,"value":104.453}, | |
{"source":15,"target":14,"value":113.726}, | |
{"source":15,"target":17,"value":27.14}, | |
{"source":15,"target":12,"value":342.165}, | |
{"source":15,"target":18,"value":37.797}, | |
{"source":15,"target":19,"value":4.412}, | |
{"source":15,"target":13,"value":40.858}, | |
{"source":15,"target":3,"value":56.691}, | |
{"source":15,"target":20,"value":7.863}, | |
{"source":15,"target":21,"value":90.008}, | |
{"source":15,"target":22,"value":93.494}, | |
{"source":23,"target":24,"value":40.719}, | |
{"source":25,"target":24,"value":82.233}, | |
{"source":5,"target":13,"value":0.129}, | |
{"source":5,"target":3,"value":1.401}, | |
{"source":5,"target":26,"value":151.891}, | |
{"source":5,"target":19,"value":2.096}, | |
{"source":5,"target":12,"value":48.58}, | |
{"source":27,"target":15,"value":7.013}, | |
{"source":17,"target":28,"value":20.897}, | |
{"source":17,"target":3,"value":6.242}, | |
{"source":28,"target":18,"value":20.897}, | |
{"source":29,"target":15,"value":6.995}, | |
{"source":2,"target":12,"value":121.066}, | |
{"source":2,"target":30,"value":128.69}, | |
{"source":2,"target":18,"value":135.835}, | |
{"source":2,"target":31,"value":14.458}, | |
{"source":2,"target":32,"value":206.267}, | |
{"source":2,"target":19,"value":3.64}, | |
{"source":2,"target":33,"value":33.218}, | |
{"source":2,"target":20,"value":4.413}, | |
{"source":34,"target":1,"value":4.375}, | |
{"source":24,"target":5,"value":122.952}, | |
{"source":35,"target":26,"value":839.978}, | |
{"source":36,"target":37,"value":504.287}, | |
{"source":38,"target":37,"value":107.703}, | |
{"source":37,"target":2,"value":611.99}, | |
{"source":39,"target":4,"value":56.587}, | |
{"source":39,"target":1,"value":77.81}, | |
{"source":40,"target":14,"value":193.026}, | |
{"source":40,"target":13,"value":70.672}, | |
{"source":41,"target":15,"value":59.901}, | |
{"source":42,"target":14,"value":19.263}, | |
{"source":43,"target":42,"value":19.263}, | |
{"source":43,"target":41,"value":59.901}, | |
{"source":4,"target":19,"value":0.882}, | |
{"source":4,"target":26,"value":400.12}, | |
{"source":4,"target":12,"value":46.477}, | |
{"source":26,"target":15,"value":525.531}, | |
{"source":26,"target":3,"value":787.129}, | |
{"source":26,"target":11,"value":79.329}, | |
{"source":44,"target":15,"value":9.452}, | |
{"source":45,"target":1,"value":182.01}, | |
{"source":46,"target":15,"value":19.013}, | |
{"source":47,"target":15,"value":289.366} | |
]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Gooey Sankey</title> | |
<style> | |
.node rect { | |
cursor: move; | |
fill-opacity: .9; | |
shape-rendering: crispEdges; | |
} | |
.node text { | |
pointer-events: none; | |
text-shadow: 0 1px 0 #fff; | |
} | |
.link { | |
fill: none; | |
} | |
svg { | |
position: absolute; | |
} | |
canvas { | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<canvas width="1000" height="1000" ></canvas> | |
<svg width="1000" height="1000" ></svg> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script> | |
<script src="d3.sankey.js" charset="utf-8" type="text/javascript"></script> | |
<script src="d3-glyphEdge.js" charset="utf-8" type="text/javascript"></script> | |
<script type="text/javascript"> | |
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.category20b(); | |
var svg = d3.select("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
var filter = d3.select("svg").append("defs").append("filter").attr("id", "gooeyCodeFilter"); | |
filter.append("feGaussianBlur").attr("id", "gaussblurrer").attr("in", "SourceGraphic").attr("stdDeviation", 6).attr("color-interpolation-filters", "sRGB").attr("result", "blur"); | |
filter.append("feColorMatrix").attr("in", "blur").attr("mode", "matrix").attr("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 34 -7").attr("result", "gooey"); | |
var unfilteredbaseG = d3.select("svg").append("g") | |
.attr("class", "bg") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
svg = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
.style("filter", "url(#gooeyCodeFilter)") | |
var sankey = d3.sankey() | |
.nodeWidth(15) | |
.nodePadding(10) | |
.size([width, height]); | |
var path = sankey.link(); | |
var freqCounter = 1; | |
d3.json("energy.json", function(energy) { | |
energy.links.forEach(function (d) { | |
d.o_value = d.value; | |
d.value = 1; | |
}) | |
sankey | |
.nodes(energy.nodes) | |
.links(energy.links) | |
.layout(32); | |
var linkExtent = d3.extent(energy.links, function (d) {return d.o_value}); | |
var frequencyScale = d3.scale.linear().domain(linkExtent).range([0.01,0.5]); | |
var particleSize = d3.scale.linear().domain(linkExtent).range([1,5]); | |
unfilteredbaseG.selectAll("path.link") | |
.data(energy.links) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
.style("stroke", "lightgray") | |
.style("fill", "none") | |
.style("stroke-opacity", 0.25) | |
.style("stroke-width", function(d) { return Math.max(1, d.dy); }) | |
.each(function (link) { | |
link.particleSize = 3; | |
link.particleColor = link.source.color; | |
link.particles = []; | |
link.frequency = frequencyScale(link.o_value); | |
link.speed = (Math.random() + 1) * 5; | |
}) | |
var linkG = svg | |
.selectAll("g.link") | |
.data(energy.links) | |
.enter() | |
.append("g") | |
.attr("class", "link") | |
d3.selectAll("g.link") | |
.append("path") | |
.attr("d", path) | |
.style("stroke", "none") | |
.style("stroke-width", function(d) { return Math.max(1, d.dy); }) | |
.each(function (link) { | |
link.particleSize = 3; | |
link.particleColor = link.source.color; | |
link.particles = []; | |
link.frequency = frequencyScale(link.o_value); | |
link.speed = Math.random() + 1; | |
}) | |
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", "none") | |
.append("title") | |
.text(function(d) { return d.name + "\n" + format(d.o_value); }); | |
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(); | |
d3.selectAll("g.link > path").attr("d", path); | |
} | |
var start | |
function step(timestamp) { | |
particles(); | |
window.requestAnimationFrame(step); | |
} | |
window.requestAnimationFrame(step); | |
function particles() { | |
d3.selectAll("g.link") | |
.each(function (d, i) { | |
d3_glyphEdge.mutate.particle(d, d3.select(this).select("path").node(), d.frequency, d.speed); | |
d3.select(this).selectAll("circle") | |
.data(d.particles) | |
.enter() | |
.append("circle") | |
.style("fill", d.source.color) | |
.attr("r", 5); | |
d3.select(this).selectAll("circle") | |
.data(d.particles) | |
.exit() | |
.remove(); | |
d3.select(this).selectAll("circle") | |
.attr("cx", function (p) {return p.x}) | |
.attr("cy", function (p) {return p.y}); | |
}) | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment