Skip to content

Instantly share code, notes, and snippets.

@elktamer

elktamer/index.html

Last active March 18, 2017 16:37
Show Gist options
  • Save elktamer/bc61c2a2ed1850ed65995017e7808954 to your computer and use it in GitHub Desktop.
Save elktamer/bc61c2a2ed1850ed65995017e7808954 to your computer and use it in GitHub Desktop.
Download ZIP
Alberta Budget in Sankey
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>AB Budget 2017/2018</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;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
#sankey-labels {
display: flex;
flex-direction: row;
align-self: center;
max-width: 900px;
justify-content: flex-start;
font-weight: bold;
font-size: 12px;
color: grey;
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 20px;
margin-left: 20px;
}
.sankey-label {
flex: 1;
max-width: 80px;
color: #999;
font-size: 14px;
cursor: pointer;
float: left;
padding: 10px 18px;
border-top: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-left: solid 1px #CCC;
background: #f9f9f9;
margin: 0 0;
}
.sankey-label.clicked {
color: #000;
background: #e9e9e9;
border-color: #AAA;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.2);
}
.sankey-label.first {
border-radius: 4px 0 0 4px;
}
.sankey-label.last {
border-right: solid 1px #CCC;
border-radius: 0 4px 4px 0;
}
</style>
<body>
<div id="sankey-labels">
<h4 class="sankey-label first last clicked" id="ndp-button">NDP</h4> <!-- &#10132 -->
<h4 class="sankey-label" id="slash-button">Slash and Burn</h4>
<h4 class="sankey-label " id="prosperity-button">Prosperity</h4>
</div>
<p id="chart">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="sankey.js"></script>
<script>
var units = "$M";
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 1200 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + " " + units; },
color = d3.scale.category20();
// append the svg canvas to the page
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 + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(36)
.nodePadding(20)
.size([width, height]);
var path = sankey.link();
var ndp, slash, prosperity;
// load the data (using the timelyportfolio csv method)
d3.csv("sankey.csv", function(error, data) {
ndp = data;
renderBudget(ndp);
d3.csv("slash.csv", function(error, data) {
slash = data;
});
d3.csv("prosperity.csv", function(error, data) {
prosperity = data;
});
});
function renderBudget(data){
//set up graph in same style as original example but empty
graph = {"nodes" : [], "links" : []};
data.forEach(function (d) {
graph.nodes.push({ "name": d.source });
graph.nodes.push({ "name": d.target });
graph.links.push({ "source": d.source,
"target": d.target,
"value": +d.value });
});
// return only the distinct / unique nodes
graph.nodes = d3.keys(d3.nest()
.key(function (d) { return d.name; })
.map(graph.nodes));
// loop through each link replacing the text with its index from node
graph.links.forEach(function (d, i) {
graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
});
//now loop through each nodes to make nodes an array of objects
// rather than an array of strings
graph.nodes.forEach(function (d, i) {
graph.nodes[i] = { "name": d };
});
sankey
.nodes(graph.nodes)
.links(graph.links)
.layout(32);
// add in the links
svg.selectAll("g").remove();
var link = svg.append("g").selectAll(".link")
.data(graph.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(graph.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));
// add the rectangles for the nodes
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); });
// 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);
}
}
d3.select('#ndp-button').on('click', function () {
d3.selectAll(".sankey-label").classed("clicked", false);
d3.select(this).classed("clicked", true);
renderBudget(ndp);
});
d3.select('#slash-button').on('click', function () {
d3.selectAll(".sankey-label").classed("clicked", false);
d3.select(this).classed("clicked", true);
renderBudget(slash);
});
d3.select('#prosperity-button').on('click', function () {
d3.selectAll(".sankey-label").classed("clicked", false);
d3.select(this).classed("clicked", true);
renderBudget(prosperity);
})
</script>
</body>
</html>
Raw
prosperity.csv
source target value
Expense Advanced Education 5913
Expense Agriculture and Forestry 1149
Expense Children's Services 1167
Expense Community and Social Services 3381
Expense Culture and Tourism 358
Expense Economic Development and Trade 320
Expense Education 8072
Expense Energy 587
Expense Environment and Parks 506
Expense Executive Council 26
Expense Health 20653
Expense Indigenous Relations 184
Expense Infrastructure 677
Expense Justice and Solicitor General 1507
Expense Labour 204
Expense Municipal Affairs 1696
Expense Seniors and Housing 640
Expense Service Alberta 298
Expense Status of Women 7
Expense Transportation 1634
Expense Treasury Board and Finance 1474
Expense Legislative Assembly 130
Expense Disaster/emergency assistance 500
Expense Climate Leadership Plan Capital Grants 750
Expense Debt Servicing Costs 1398
Personal Income Tax Revenue 11177
Corporate Income Tax Revenue 3918
Other Tax Revenue Revenue 5629
Non-renewable resource revenue Revenue 3000
Federal Transfers Revenue 7988
Investment Income Revenue 2193
Net Income from Business enterprises Revenue 2506
Premiums Fees and Licenses Revenue 3683
Other Revenue Revenue 3129
Carbon Levy Revenue 1038
Revenue Expense 44261
Raw
sankey.csv
source target value
Expense Advanced Education 6033
Expense Agriculture and Forestry 1100
Expense Children's Services 1372
Expense Community and Social Services 3317
Expense Culture and Tourism 351
Expense Economic Development and Trade 346
Expense Education 8224
Expense Energy 714
Expense Environment and Parks 563
Expense Executive Council 27
Expense Health 21319
Expense Indigenous Relations 188
Expense Infrastructure 712
Expense Justice and Solicitor General 1459
Expense Labour 203
Expense Municipal Affairs 1719
Expense Seniors and Housing 678
Expense Service Alberta 315
Expense Status of Women 7
Expense Transportation 2267
Expense Treasury Board and Finance 1549
Expense Legislative Assembly 130
Personal Income Tax Revenue 11177
Corporate Income Tax Revenue 3918
Other Tax Revenue Revenue 5629
Non-renewable resource revenue Revenue 3754
Federal Transfers Revenue 7988
Investment Income Revenue 2193
Net Income from Business Enterprises Revenue 2506
Premiums Fees and Licenses Revenue 3683
Other Revenue Revenue 3129
Carbon Levy Revenue 1038
Revenue Expense 45015
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) {
nextNodes.push(link.target);
});
});
remainingNodes = nextNodes;
++x;
}
//
moveSinksRight(x);
scaleNodeBreadths((width - 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;
};
Raw
slash.csv
source target value
Expense Advanced Education 4980
Expense Agriculture and Forestry 960
Expense Children’s Services 968
Expense Community and Social Services 2804
Expense Culture and Tourism 248
Expense Economic Development and Trade 268
Expense Education 6716
Expense Energy 410
Expense Environment and Parks 388
Expense Executive Council 22
Expense Health 17303
Expense Indigenous Relations 152
Expense Infrastructure 567
Expense Justice and Solicitor General 1237
Expense Labour 170
Expense Municipal Affairs 1209
Expense Seniors and Housing 524
Expense Service Alberta 253
Expense Status of Women 6
Expense Transportation 983
Expense Treasury Board and Finance 1238
Expense Legislative Assembly 109
Expense Disaster/emergency assistance 500
Personal Income Tax Revenue 11177
Corporate Income Tax Revenue 3918
Other Tax Revenue Revenue 5629
Non-renewable resource revenue Revenue 3000
Federal Transfers Revenue 7988
Investment Income Revenue 2193
Net Income from Business Enterprises Revenue 2506
Premiums Fees and Licenses Revenue 3683
Other Revenue Revenue 3129
Revenue Expense 43223
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment