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.
forked from brandonhaydu's block: Time Allocation Sankey (2018-2019)
xxxxxxxxxx
<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>
https://d3js.org/d3.v4.min.js