mikelotis · December 22, 2018 20:35
diff --git a/.block b/.block
 border: yes
 width: 1000
 height: 700
diff --git a/README.md b/README.md
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>Sankey</title>
    <style>
        div#main {
            margin: 0 auto;
            padding-top: 30px;
        }
    </style>
 </head>
 <body>
    <div id="main" style="width:964px; height:600px;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="nodesAndLinks.js" lang="babel" type="text/babel"></script>
    <script lang="babel" type="text/babel">
        const log = console.log;

        const url = "https://gist.githubusercontent.com/mikelotis/" +
              "98000626c7332958b47fe4f4fc0cf4fc/raw/0b08cdabf738b1dc41de1e04072e57cfdfe214ea/"+
              "Traffic_Disruptions(July-23-2018).csv";

        const myChart = echarts.init(document.getElementById('main'));

        d3.csv(url)
          .then(makeSankey);

        function makeSankey(csv) {
            //-----------------Data prep 
            // 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"]
                };
            });
            //-----------------Data prep
             
            //---------------------------Data Viz
            // sankey flow order
            // Disruptions → Status → Impact → Activity Type → Traffic District → Infrastructure
            const order = [
                    "Disruptions", "Status", "Impact", 
                    "Activity Type", "Traffic District", "Infrastructure"
                ];

            //Chart margin, data for sankey series, and option for myChart    
            const margin = {top: 30, right: 30, bottom: 30, left: 70};
            const sankeyData = nodesAndLinks(data, order);
            const option = {
                title: {
                    text: "Edmonton Traffic Disruptions",
                    x: "center"
                },
                tooltip: {},
                series: [
                  {
                    type: "sankey",
                    top: margin.top,
                    right: margin.right,
                    bottom: margin.bottom,
                    left: margin.left,
                    width: 964 - margin.left - margin.right,
                    height: 600 - margin.top - margin.bottom,
                    nodeWidth: 15,
                    nodeGap: 30,
                    layoutIterations: 100,
                    nodes: sankeyData.nodes,
                    links: sankeyData.links,
                    draggable: false,
                    label: {
                        position: "left"
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: "#aaa"
                        }
                    }
                  }  
                ]
            };
            //---------------------------Data Viz

            myChart.setOption(option);
        };
    </script>
 </body>
 </html>
diff --git a/nodesAndLinks.js b/nodesAndLinks.js
 //Highly recommend - study and comprehend the code below (modify as needed). 
 //<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
 //Must include the script above to use nodesAndLinks.js (to compile nodesAndLinks.js ES6 code)
 /**
 * Creates sankey nodes and links.
 * @param {array} entries - rows of disruption data (objects).
 * @param {array} order- columns of disruption data in a particular order (strings).
 * @return {object} Nodes and links based on data and order.
 */
 function nodesAndLinks(entries, order) {
    
    // all the unique entries values except blanks
    // for brevity exempted blanks 
    // if need to include blanks - replace "" with "null" and additional code needed for replacement
    const reduceFunc = (acc, curVal) => acc.concat(curVal);
    const filterFunc = d => d.key != "";
    const allValues = entries.map(d => Object.values(d)).reduce(reduceFunc, [])
        .filter(d => d != "");
    
    // sankey nodes
    const nodes = [...new Set(allValues)].map(d => { return {name: d}; });

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

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

    return network;

    /**
    * Builds links between two columns.
    * @param {string} attr1 - The first column.
    * @param {string} attr2- The second column.
    * @return {array} The links for associated columns.
    */
    function linkMaker(attr1, attr2) {
        const links = d3.nest().key(d => d[attr1])
            .key(d => d[attr2])
            .entries(entries)
            .filter(filterFunc)
            .map(d => {
                const flows = d.values.filter(filterFunc).map(p => {
                    return {
                        source : d.key,
                        target : p.key,
                        value : p.values.length
                    };
                });

                return flows;
            });

        return links.reduce(reduceFunc, []);
    };
 };
diff --git a/thumbnail.png b/thumbnail.png
	<!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>Sankey</title>
	<style>
	div#main {
	margin: 0 auto;
	padding-top: 30px;
	}
	</style>
	</head>
	<body>
	<div id="main" style="width:964px; height:600px;"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script src="nodesAndLinks.js" lang="babel" type="text/babel"></script>
	<script lang="babel" type="text/babel">
	const log = console.log;

	const url = "https://gist.githubusercontent.com/mikelotis/" +
	"98000626c7332958b47fe4f4fc0cf4fc/raw/0b08cdabf738b1dc41de1e04072e57cfdfe214ea/"+
	"Traffic_Disruptions(July-23-2018).csv";

	const myChart = echarts.init(document.getElementById('main'));

	d3.csv(url)
	.then(makeSankey);

	function makeSankey(csv) {
	//-----------------Data prep
	// 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"]
	};
	});
	//-----------------Data prep

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

	//Chart margin, data for sankey series, and option for myChart
	const margin = {top: 30, right: 30, bottom: 30, left: 70};
	const sankeyData = nodesAndLinks(data, order);
	const option = {
	title: {
	text: "Edmonton Traffic Disruptions",
	x: "center"
	},
	tooltip: {},
	series: [
	{
	type: "sankey",
	top: margin.top,
	right: margin.right,
	bottom: margin.bottom,
	left: margin.left,
	width: 964 - margin.left - margin.right,
	height: 600 - margin.top - margin.bottom,
	nodeWidth: 15,
	nodeGap: 30,
	layoutIterations: 100,
	nodes: sankeyData.nodes,
	links: sankeyData.links,
	draggable: false,
	label: {
	position: "left"
	},
	itemStyle: {
	normal: {
	borderWidth: 1,
	borderColor: "#aaa"
	}
	}
	}
	]
	};
	//---------------------------Data Viz

	myChart.setOption(option);
	};
	</script>
	</body>
	</html>
	//Highly recommend - study and comprehend the code below (modify as needed).
	//<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	//Must include the script above to use nodesAndLinks.js (to compile nodesAndLinks.js ES6 code)
	/**
	* Creates sankey nodes and links.
	* @param {array} entries - rows of disruption data (objects).
	* @param {array} order- columns of disruption data in a particular order (strings).
	* @return {object} Nodes and links based on data and order.
	*/
	function nodesAndLinks(entries, order) {

	// all the unique entries values except blanks
	// for brevity exempted blanks
	// if need to include blanks - replace "" with "null" and additional code needed for replacement
	const reduceFunc = (acc, curVal) => acc.concat(curVal);
	const filterFunc = d => d.key != "";
	const allValues = entries.map(d => Object.values(d)).reduce(reduceFunc, [])
	.filter(d => d != "");

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

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

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

	return network;

	/**
	* Builds links between two columns.
	* @param {string} attr1 - The first column.
	* @param {string} attr2- The second column.
	* @return {array} The links for associated columns.
	*/
	function linkMaker(attr1, attr2) {
	const links = d3.nest().key(d => d[attr1])
	.key(d => d[attr2])
	.entries(entries)
	.filter(filterFunc)
	.map(d => {
	const flows = d.values.filter(filterFunc).map(p => {
	return {
	source : d.key,
	target : p.key,
	value : p.values.length
	};
	});

	return flows;
	});

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