Skip to content

Instantly share code, notes, and snippets.

@brandonhaydu

brandonhaydu/.block

Last active September 12, 2018 02:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brandonhaydu/e4070dbd3e74c1c5dec1ed4e3e212392 to your computer and use it in GitHub Desktop.
Save brandonhaydu/e4070dbd3e74c1c5dec1ed4e3e212392 to your computer and use it in GitHub Desktop.
Download ZIP
Time Allocation Sankey (2018-2019)
Raw
.block
license: gpl-3.0
Raw
2018-2019_Time.csv
source target value
Companywide In-Person Non-Project Training 0
Companywide In-Person Project Training 0.025
Companywide Jive Documentation and Webinars 0
Companywide Marketing 0.0075
Companywide Programming - Data Analysis 0.05
Companywide Programming - Data Visualization 0.05
Companywide Report Writing and Documentation 0
Companywide Research Non-Chareable 0
Companywide Research on Project 0.01
Other Nor-Cal In-Person Non-Project Training 0
Other Nor-Cal In-Person Project Training 0.03
Other Nor-Cal Jive Documentation and Webinars 0
Other Nor-Cal Marketing 0.015
Other Nor-Cal Programming - Data Analysis 0.05
Other Nor-Cal Programming - Data Visualization 0.05
Other Nor-Cal Report Writing and Documentation 0
Other Nor-Cal Research Non-Chareable 0
Other Nor-Cal Research on Project 0.01
So-Cal In-Person Non-Project Training 0
So-Cal In-Person Project Training 0.045
So-Cal Jive Documentation and Webinars 0
So-Cal Marketing 0.0075
So-Cal Programming - Data Analysis 0.075
So-Cal Programming - Data Visualization 0.075
So-Cal Report Writing and Documentation 0
So-Cal Research Non-Chareable 0
So-Cal Research on Project 0.01
Walnut Creek In-Person Non-Project Training 0.05
Walnut Creek In-Person Project Training 0.05
Walnut Creek Jive Documentation and Webinars 0.02
Walnut Creek Marketing 0.1
Walnut Creek Programming - Data Analysis 0.075
Walnut Creek Programming - Data Visualization 0.075
Walnut Creek Report Writing and Documentation 0.05
Walnut Creek Research Non-Chareable 0.02
Walnut Creek Research on Project 0.05
In-Person Non-Project Training Active Transportation 0.01
In-Person Non-Project Training Custom Tool Development 0.01
In-Person Non-Project Training Other Transportation Planning 0.01
In-Person Non-Project Training Shared Mobility 0.01
In-Person Non-Project Training Travel Demand Modeling 0.01
In-Person Project Training Active Transportation 0.0225
In-Person Project Training Custom Tool Development 0.03
In-Person Project Training Other Transportation Planning 0.04
In-Person Project Training Shared Mobility 0.0225
In-Person Project Training Travel Demand Modeling 0.035
Jive Documentation and Webinars Active Transportation 0.005
Jive Documentation and Webinars Custom Tool Development 0.01
Jive Documentation and Webinars Other Transportation Planning 0
Jive Documentation and Webinars Shared Mobility 0.005
Jive Documentation and Webinars Travel Demand Modeling 0
Marketing Active Transportation 0.03
Marketing Custom Tool Development 0.04
Marketing Other Transportation Planning 0.01
Marketing Shared Mobility 0.03
Marketing Travel Demand Modeling 0.02
Programming - Data Analysis Active Transportation 0.05
Programming - Data Analysis Custom Tool Development 0.0375
Programming - Data Analysis Other Transportation Planning 0.06
Programming - Data Analysis Shared Mobility 0.05
Programming - Data Analysis Travel Demand Modeling 0.0525
Programming - Data Visualization Active Transportation 0.05
Programming - Data Visualization Custom Tool Development 0.035
Programming - Data Visualization Other Transportation Planning 0.06
Programming - Data Visualization Shared Mobility 0.05
Programming - Data Visualization Travel Demand Modeling 0.055
Report Writing and Documentation Active Transportation 0.01
Report Writing and Documentation Custom Tool Development 0.01
Report Writing and Documentation Other Transportation Planning 0.01
Report Writing and Documentation Shared Mobility 0.01
Report Writing and Documentation Travel Demand Modeling 0.01
Research Non-Chareable Active Transportation 0.005
Research Non-Chareable Custom Tool Development 0.01
Research Non-Chareable Other Transportation Planning 0
Research Non-Chareable Shared Mobility 0.005
Research Non-Chareable Travel Demand Modeling 0
Research on Project Active Transportation 0.0175
Research on Project Custom Tool Development 0.0175
Research on Project Other Transportation Planning 0.01
Research on Project Shared Mobility 0.0175
Research on Project Travel Demand Modeling 0.0175
Raw
README.md

Brandon Haydu is a leader in data analysis and visualization who has a passion for multimodal transportation planning and enjoys tackling complex problems to help serve a diverse set of communities.

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;
}
.node text {
pointer-events: none;
text-shadow: 0px 0px 2px #fff;
font-size: .8em;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .5;
}
.link:hover {
stroke-opacity: 1;
}
</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 - margin.left - margin.right,
height = window.innerHeight - margin.top - margin.bottom;
// format variables
var formatNumber = d3.format("-.2%"), // 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(10)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
// defs for the linear gradients
var defs = svg.append("defs");
// load the data
d3.queue()
.defer(d3.csv, "2018-2019_Time.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", function(d, i){
// create the gradient
var gradient_id = "gradient-" + i;
var gradient = defs.append("linearGradient")
.attr("id", gradient_id);
gradient.append("stop")
.attr("offset", "5%")
.attr("stop-color", color(d.source.name.replace(/ .*/, "")));
gradient.append("stop")
.attr("offset", "95%")
.attr("stop-color", color(d.target.name.replace(/ .*/, "")));
// TODO: Figure out what the hell is happening with bob and jimmy
return i == 0 ? color(d.source.name.replace(/ .*/, "")) : "url(#" + gradient_id + ")";
// return "url(#" + gradient_id + ")";
})
.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