Skip to content

Instantly share code, notes, and snippets.

@jmcmurry

jmcmurry/.block

Last active February 20, 2018 22:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jmcmurry/c57fe136b909ed2583458778c84208a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jmcmurry/c57fe136b909ed2583458778c84208a1 to your computer and use it in GitHub Desktop.
Download ZIP
Sankey from CSV
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
data.csv
source target value
71 Prelingual sensorineural hearing impairment 9
89 Hearing impairment 19
84A Motor delay 1
22 Sensorineural hearing impairment 31
98 Sensorineural hearing impairment 31
76 Progressive sensorineural hearing impairment 4
29 Hearing impairment 19
24 Profound sensorineural hearing impairment 4
63 Congenital sensorineural hearing impairment 1
27 Sensorineural hearing impairment 31
53 Sensorineural hearing impairment 31
35 Sensorineural hearing impairment 31
91 Progressive hearing impairment 2
16 Sensorineural hearing impairment 31
84A Hearing impairment 19
68 Sensorineural hearing impairment 31
59 Sensorineural hearing impairment 31
20 Hearing impairment 19
74 Hearing impairment 19
62 Prelingual sensorineural hearing impairment 9
39 Prelingual sensorineural hearing impairment 9
79 Progressive sensorineural hearing impairment 4
9 Absence of acoustic reflex 1
37 Bilateral sensorineural hearing impairment 3
51 Sensorineural hearing impairment 31
67 Sensorineural hearing impairment 31
84B Hearing impairment 19
9 Absent brainstem auditory responses 1
33 Hearing impairment 19
44 Prelingual sensorineural hearing impairment 9
48 Profound sensorineural hearing impairment 4
103 Vestibular areflexia 2
12 Abnormality of the eye 1
66 Sensorineural hearing impairment 31
36 Sensorineural hearing impairment 31
5 Sensorineural hearing impairment 31
61 Sensorineural hearing impairment 31
21 Sensorineural hearing impairment 31
84B Vestibular hypofunction 1
84A Vestibular dysfunction 5
12 Prelingual sensorineural hearing impairment 9
17 Sensorineural hearing impairment 31
31 Sensorineural hearing impairment 31
25 Hearing impairment 19
38 Prelingual sensorineural hearing impairment 9
18B Hearing impairment 19
20 Sensorineural hearing impairment 31
23 Sensorineural hearing impairment 31
32 Hearing impairment 19
30 Progressive sensorineural hearing impairment 4
36 Vestibular areflexia 2
3 Profound sensorineural hearing impairment 4
42 Sensorineural hearing impairment 31
30 Progressive hearing impairment 2
93 Hearing impairment 19
28 Severe sensorineural hearing impairment 1
37 Vestibular dysfunction 5
2 Vertigo 1
1A Vestibular dysfunction 5
49 Prelingual sensorineural hearing impairment 9
79 Sensorineural hearing impairment 31
1B Hearing impairment 19
96 Hearing impairment 19
65 Hearing impairment 19
102 Profound hearing impairment 1
70 Hearing impairment 19
1A Sensorineural hearing impairment 31
48 Vestibular dysfunction 5
37 Rod-cone dystrophy 1
79 Delayed speech and language development 1
101 Bilateral sensorineural hearing impairment 3
104 Prelingual sensorineural hearing impairment 9
26 Sensorineural hearing impairment 31
6 Hearing impairment 19
88 Hearing impairment 19
2 Sensorineural hearing impairment 31
86 Hearing impairment 19
103 Sensorineural hearing impairment 31
25 Progressive sensorineural hearing impairment 4
46 Profound sensorineural hearing impairment 4
8 Sensorineural hearing impairment 31
7 Sensorineural hearing impairment 31
77 Bilateral sensorineural hearing impairment 3
4 Sensorineural hearing impairment 31
37 Congenital stationary night blindness 1
40 Prelingual sensorineural hearing impairment 9
4 Enlarged vestibular aqueduct 1
29 Sensorineural hearing impairment 31
4 Incomplete partition of the cochlea type II 1
9 Sensorineural hearing impairment 31
18A Sensorineural hearing impairment 31
15 Hearing impairment 19
1B Vestibular dysfunction 5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
font-family: "Helvetica Neue", sans-serif;
}
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
stroke: #ffffff;
stroke-opacity: .2;
}
.node text {
pointer-events: none;
text-shadow: 0px 0px 2px #fff;
font-size: .8em;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="sankey.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = window.innerWidth/2 - margin.left - margin.right,
height = window.innerHeight;
// format variables
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return "$" + formatNumber(d); },
color = d3.scaleOrdinal(d3.schemeCategory20);
// append the svg object to the body of the page
var svg = d3.select("body").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 + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(20)
.nodePadding(5)
.size([width, height]);
var path = sankey.link();
// load the data
d3.queue()
.defer(d3.csv, "data.csv")
.await(ready);
function ready(error, csv){
// create an array to push all sources and targets, before making them unique
var arr = [];
csv.forEach(function(d){
arr.push(d.source);
arr.push(d.target);
});
// create nodes array
var nodes = arr.filter(onlyUnique).map(function(d,i){
return {
node: i,
name: d
}
});
// create links array
var links = csv.map(function(csv_row){
return {
source: getNode("source"),
target: getNode("target"),
value: +csv_row.value
}
function getNode(type){
return nodes.filter(function(node_object){ return node_object.name == csv_row[type]; })[0].node;
}
});
sankey
.nodes(nodes)
.links(links)
.layout(32);
// add in the links
var link = svg.append("g").selectAll(".link")
.data(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; });
// add the link titles
link.append("title")
.text(function(d) {
return d.source.name + " → " +
d.target.name + "\n" + format(d.value); });
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.call(d3.drag()
.subject(function(d) {
return d;
})
.on("start", function() {
this.parentNode.appendChild(this);
})
.on("drag", dragmove));
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d) { return d.dy < 0 ? .1 : 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);
});
// add in the title for the nodes
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");
// the function for moving the nodes
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);
}
}
// unique values of an array
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
</script>
</body>
</html>
Raw
sankey.js
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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment