mikelotis · August 11, 2018 00:09
diff --git a/.block b/.block
 border: yes
 width: 984
 height: 660
diff --git a/README.md b/README.md
diff --git a/d3.sankey.js b/d3.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),
            // prevent a perfectly straight path
            // to avoid missing SVG path gradient bug in Chromium and mozilla
            // minus 1.0 from y0
            y0 = (d.source.y + d.sy + d.dy / 2) - 1.0,
            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;
  };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin-top: 30px;
        }

        svg {
            display: block;
            margin: 0 auto;
            background-color: whitesmoke;
        }

        .node rect {
            fill-opacity: .7;
            shape-rendering: crispEdges;
        }
 
        .node text {
            pointer-events: none;
            font-family: Helvetica;
            font-size: 12px;
            fill: rgb(110, 107, 107);
        }
    </style>
 </head>
 <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
    <script src="d3.sankey.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="makeNetwork.js" lang='babel' type='text/babel'></script>
    <script src="makeSankey.js" lang='babel' type='text/babel'></script>
 </body>
 </html>
diff --git a/makeNetwork.js b/makeNetwork.js
 const makeNetwork = function(csv) {
    // log(csv);

    // use only required attributes
    const data = csv.map(element => {
        return {
            "Disruptions": "Disruptions",
            "Status": element["Status"],
            "Impact": element["Impact"],
            "Activity Type" : element["Activity Type"],
            "Traffic District": element["Traffic District"],
            "Infrastructure": element["Infrastructure"]
        };
    });

    // all the unique data values 
    const reduceFunc = (acc, curVal) => acc.concat(curVal);
    const filterFunc = d => d.key != "";
    const allValues = data.map(d => Object.values(d)).reduce(reduceFunc, [])
        .filter(d => d != "");

    // sankey nodes
    const nodes = [...new Set(allValues)];
    const sankeyNodes = nodes.map(d => { return {name: d}; });

    // sankey flow order
    // Disruptions → Status → Impact → Activity Type → Traffic District → Infrastructure
    const order = [
            "Disruptions", "Status", "Impact", 
            "Activity Type", "Traffic District", "Infrastructure"
        ];

    //sankey links
    const orderLinks = d3.range(1, order.length)
        .map((d, i) => linkMaker(order[i], order[i + 1]))
        .reduce(reduceFunc, []);
    
    //sankey json
    const network = {nodes: sankeyNodes, links: orderLinks};

    return network;
   
    // builds the links
    function linkMaker(attr1, attr2) {
        const links = d3.nest().key(d => d[attr1])
            .key(d => d[attr2])
            .entries(data)
            .filter(filterFunc)
            .map(d => {
                const flows = d.values.filter(filterFunc).map(p => {
                    return {
                        source : nodes.indexOf(d.key),
                        target : nodes.indexOf(p.key),
                        value : p.values.length
                    };
                });

                return flows;
            });

        return links.reduce(reduceFunc, []);
    };

 };
diff --git a/makeSankey.js b/makeSankey.js
 const log = console.log;

 const margin = {top: 30, right: 30, bottom: 30, left: 30};
 const width = 964 - margin.left - margin.right;
 const height = 600 - margin.top - margin.bottom;

 const formatNumber = d3.format(",.0f");
 const format = d => `${formatNumber(d)}`;

 // define svg
 const 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})`);

 const defs = svg.append("defs");

 // load file
 d3.csv("Traffic_Disruptions(July-23-2018).csv", makeSankey);

 function makeSankey(csv) {
    // sankey data and colors (fills)
    const sankeyJson = makeNetwork(csv);
    const color = d3.scaleOrdinal().domain(sankeyJson.nodes.map(d => d.name))
        .range([
            "#ad002d","#3addc5","#e600d2","#007203","#6b008e",
            "#ffa834","#005da3","#e76800","#ceaeff","#003503",
            "#ffa3d8","#00885c","#ac2600","#331a49","#8e6b00",
            "#ffa7ad","#5d3a00","#d5c593","#6d0014","#ffa178"]);

    // sankey layout - note alters initial sankey data
    const sankey = d3.sankey()
        .nodeWidth(15)
        .nodePadding(30)
        .size([width, height])
        .nodes(sankeyJson.nodes)
        .links(sankeyJson.links)
        .layout(100);

    const path = sankey.link();
    const defaultOpacity = 0.3;

    // add links
    const links = svg.append('g').selectAll(".link")
            .data(sankeyJson.links).enter()
        .append("path")
            .attr("class", "link")
            .attr('d', path)
            .style("stroke-width", d => Math.max(1, d.dy))
            .style("fill", "none")
            .style("stroke-opacity", defaultOpacity)
            .sort((a, b) => b.dy - a.dy)
            .on("mouseover", function(){
                d3.select(this).style("stroke-opacity", 0.5);
            })
            .on("mouseout", function(){
                d3.select(this).style("stroke-opacity", defaultOpacity);
            });

    links.append("title")
        .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} Disruptions`);

    // add nodes
    const node = svg.append('g').selectAll(".node")
            .data(sankeyJson.nodes)
        .enter().append('g')
            .attr("class", "node")
            .attr("transform", d => `translate(${d.x},${d.y})`);

    node.append("rect")
        .attr("height", d => d.dy)
        .attr("width", sankey.nodeWidth())
        .style("fill", d => {
            if(color.domain().indexOf(d.name) > -1){
                return d.color = color(d.name);
            } else {
                return d.color = "whitesmoke";
            }
        })
        .append("title")
            .text(d => `${d.name}\n${format(d.value)}`);

    node.append("text")
        .attr('x', -6)
        .attr('y', d => d.dy / 2)
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(d => d.name)
        .filter(d => d.x < width / 2)
            .attr('x', 6 + sankey.nodeWidth())
            .attr("text-anchor", "start");

    links.style("stroke", (d, i) => {
        const gradientID = `gradient${i}`;
        const startColor = d.source.color;
        const stopColor = d.target.color;

        const linearGradient = defs.append("linearGradient")
            .attr("id", gradientID);

        linearGradient.selectAll("stop")
            .data([
                {offset: "10%", color: startColor},
                {offset: "90%", color: stopColor}
            ])
            .enter().append("stop")
            .attr("offset", d => d.offset)
            .attr("stop-color", d => d.color);

        return `url(#${gradientID})`; 
    });          
 };   
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/Traffic_Disruptions(July-23-2018).csv b/Traffic_Disruptions(July-23-2018).csv
	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),
	// prevent a perfectly straight path
	// to avoid missing SVG path gradient bug in Chromium and mozilla
	// minus 1.0 from y0
	y0 = (d.source.y + d.sy + d.dy / 2) - 1.0,
	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;
	};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body {
	margin-top: 30px;
	}

	svg {
	display: block;
	margin: 0 auto;
	background-color: whitesmoke;
	}

	.node rect {
	fill-opacity: .7;
	shape-rendering: crispEdges;
	}

	.node text {
	pointer-events: none;
	font-family: Helvetica;
	font-size: 12px;
	fill: rgb(110, 107, 107);
	}
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<script src="d3.sankey.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script src="makeNetwork.js" lang='babel' type='text/babel'></script>
	<script src="makeSankey.js" lang='babel' type='text/babel'></script>
	</body>
	</html>
	const makeNetwork = function(csv) {
	// log(csv);

	// use only required attributes
	const data = csv.map(element => {
	return {
	"Disruptions": "Disruptions",
	"Status": element["Status"],
	"Impact": element["Impact"],
	"Activity Type" : element["Activity Type"],
	"Traffic District": element["Traffic District"],
	"Infrastructure": element["Infrastructure"]
	};
	});

	// all the unique data values
	const reduceFunc = (acc, curVal) => acc.concat(curVal);
	const filterFunc = d => d.key != "";
	const allValues = data.map(d => Object.values(d)).reduce(reduceFunc, [])
	.filter(d => d != "");

	// sankey nodes
	const nodes = [...new Set(allValues)];
	const sankeyNodes = nodes.map(d => { return {name: d}; });

	// sankey flow order
	// Disruptions → Status → Impact → Activity Type → Traffic District → Infrastructure
	const order = [
	"Disruptions", "Status", "Impact",
	"Activity Type", "Traffic District", "Infrastructure"
	];

	//sankey links
	const orderLinks = d3.range(1, order.length)
	.map((d, i) => linkMaker(order[i], order[i + 1]))
	.reduce(reduceFunc, []);

	//sankey json
	const network = {nodes: sankeyNodes, links: orderLinks};

	return network;

	// builds the links
	function linkMaker(attr1, attr2) {
	const links = d3.nest().key(d => d[attr1])
	.key(d => d[attr2])
	.entries(data)
	.filter(filterFunc)
	.map(d => {
	const flows = d.values.filter(filterFunc).map(p => {
	return {
	source : nodes.indexOf(d.key),
	target : nodes.indexOf(p.key),
	value : p.values.length
	};
	});

	return flows;
	});

	return links.reduce(reduceFunc, []);
	};

	};
	const log = console.log;

	const margin = {top: 30, right: 30, bottom: 30, left: 30};
	const width = 964 - margin.left - margin.right;
	const height = 600 - margin.top - margin.bottom;

	const formatNumber = d3.format(",.0f");
	const format = d => `${formatNumber(d)}`;

	// define svg
	const 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})`);

	const defs = svg.append("defs");

	// load file
	d3.csv("Traffic_Disruptions(July-23-2018).csv", makeSankey);

	function makeSankey(csv) {
	// sankey data and colors (fills)
	const sankeyJson = makeNetwork(csv);
	const color = d3.scaleOrdinal().domain(sankeyJson.nodes.map(d => d.name))
	.range([
	"#ad002d","#3addc5","#e600d2","#007203","#6b008e",
	"#ffa834","#005da3","#e76800","#ceaeff","#003503",
	"#ffa3d8","#00885c","#ac2600","#331a49","#8e6b00",
	"#ffa7ad","#5d3a00","#d5c593","#6d0014","#ffa178"]);

	// sankey layout - note alters initial sankey data
	const sankey = d3.sankey()
	.nodeWidth(15)
	.nodePadding(30)
	.size([width, height])
	.nodes(sankeyJson.nodes)
	.links(sankeyJson.links)
	.layout(100);

	const path = sankey.link();
	const defaultOpacity = 0.3;

	// add links
	const links = svg.append('g').selectAll(".link")
	.data(sankeyJson.links).enter()
	.append("path")
	.attr("class", "link")
	.attr('d', path)
	.style("stroke-width", d => Math.max(1, d.dy))
	.style("fill", "none")
	.style("stroke-opacity", defaultOpacity)
	.sort((a, b) => b.dy - a.dy)
	.on("mouseover", function(){
	d3.select(this).style("stroke-opacity", 0.5);
	})
	.on("mouseout", function(){
	d3.select(this).style("stroke-opacity", defaultOpacity);
	});

	links.append("title")
	.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} Disruptions`);

	// add nodes
	const node = svg.append('g').selectAll(".node")
	.data(sankeyJson.nodes)
	.enter().append('g')
	.attr("class", "node")
	.attr("transform", d => `translate(${d.x},${d.y})`);

	node.append("rect")
	.attr("height", d => d.dy)
	.attr("width", sankey.nodeWidth())
	.style("fill", d => {
	if(color.domain().indexOf(d.name) > -1){
	return d.color = color(d.name);
	} else {
	return d.color = "whitesmoke";
	}
	})
	.append("title")
	.text(d => `${d.name}\n${format(d.value)}`);

	node.append("text")
	.attr('x', -6)
	.attr('y', d => d.dy / 2)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.attr("transform", null)
	.text(d => d.name)
	.filter(d => d.x < width / 2)
	.attr('x', 6 + sankey.nodeWidth())
	.attr("text-anchor", "start");

	links.style("stroke", (d, i) => {
	const gradientID = `gradient${i}`;
	const startColor = d.source.color;
	const stopColor = d.target.color;

	const linearGradient = defs.append("linearGradient")
	.attr("id", gradientID);

	linearGradient.selectAll("stop")
	.data([
	{offset: "10%", color: startColor},
	{offset: "90%", color: stopColor}
	])
	.enter().append("stop")
	.attr("offset", d => d.offset)
	.attr("stop-color", d => d.color);

	return `url(#${gradientID})`;
	});
	};