carloschulo/sankey-csv.html

## sankey-csv.html
<!DOCTYPE html>
<html lang="en">
<!--USE THIS ONE FOR THE PROJECT-->
<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">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/d3-sankey@0.6"></script>
    <title>Document</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;
        }

        path:hover {
            stroke-opacity: .5;
        }
      .container {
        display: flex;
        width: 560px;
        justify-content: space-between
      }
    </style>
</head>

<body>
  <header class="center">
    <h2>TCP Conversation pairs</h2>
  </header>
  <main class="container">
    <div class="header-one">Source IP:Port</div>
    <div class="header-two">Target IP:Port</div>
  </main>
    <script>
        // set the dimensions and margins of the graph
        var margin = {
                top: 10,
                right: 10,
                bottom: 10,
                left: 10
            },
            width = 560 - margin.left - margin.right,
            height = 8700 - margin.top - margin.bottom;

        // 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 + ")");

        var formatNumber = d3.format(",.0f"),
            format = function (d) {
                return (d * 10 ) + " Total Packets";
            },
            color = d3.scaleOrdinal(d3.schemeCategory10);

        var sankey = d3.sankey()
            .nodeWidth(15)
            .nodePadding(10)
            .extent([
                [1, 1],
                [width - 1, height - 6]
            ]);

        var link = svg.append("g")
            .attr("class", "links")
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("stroke-opacity", 0.2)
            .selectAll("path");

        var node = svg.append("g")
            .attr("class", "nodes")
            .attr("font-family", "sans-serif")
            .attr("font-size", 10)
            .selectAll("g");

        d3.csv("newsankeypcap.csv", function (error, data) {
            if (error) throw error;

            //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;
                })
                .object(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(graph);

            link = link
                .data(graph.links)
                .enter().append("path")
                .attr("d", d3.sankeyLinkHorizontal())
                .attr("stroke-width", function (d) {
                    return Math.max(1, d.width);
                });

            link.append("title")
                .text(function (d) {
                    return "Source IP: " + d.source.name + " → " + "Target IP: " + d.target.name + "\n" + format(d.value);
                });

            node = node
                .data(graph.nodes)
                .enter().append("g")

            node.append("rect")
                .attr("x", function (d) {
                    return d.x0;
                })
                .attr("y", function (d) {
                    return d.y0;
                })
                .attr("height", function (d) {
                    return d.y1 - d.y0;
                })
                .attr("width", function (d) {
                    return d.x1 - d.x0;
                })
                .attr("fill", function (d) {
                    return color(d.name.replace(/ .*/, ""));
                })
                .attr("stroke", "#000");

            node.append("text")
                .attr("x", function (d) {
                    return d.x0 - 6;
                })
                .attr("y", function (d) {
                    return (d.y1 + d.y0) / 2;
                })
                .attr("dy", "0.35em")
                .attr("text-anchor", "end")
                .text(function (d) {
                    return d.name;
                })
                .filter(function (d) {
                    return d.x0 < width / 2;
                })
                .attr("x", function (d) {
                    return d.x1 + 6;
                })
                .attr("text-anchor", "start");

            node.append("title")
                .text(function (d) {
                    return d.name + "\n" + format(d.value);
                });
        });
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<!--USE THIS ONE FOR THE PROJECT-->
	<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">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/d3-sankey@0.6"></script>
	<title>Document</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;
	}

	path:hover {
	stroke-opacity: .5;
	}
	.container {
	display: flex;
	width: 560px;
	justify-content: space-between
	}
	</style>
	</head>

	<body>
	<header class="center">
	<h2>TCP Conversation pairs</h2>
	</header>
	<main class="container">
	<div class="header-one">Source IP:Port</div>
	<div class="header-two">Target IP:Port</div>
	</main>
	<script>
	// set the dimensions and margins of the graph
	var margin = {
	top: 10,
	right: 10,
	bottom: 10,
	left: 10
	},
	width = 560 - margin.left - margin.right,
	height = 8700 - margin.top - margin.bottom;

	// 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 + ")");

	var formatNumber = d3.format(",.0f"),
	format = function (d) {
	return (d * 10 ) + " Total Packets";
	},
	color = d3.scaleOrdinal(d3.schemeCategory10);

	var sankey = d3.sankey()
	.nodeWidth(15)
	.nodePadding(10)
	.extent([
	[1, 1],
	[width - 1, height - 6]
	]);

	var link = svg.append("g")
	.attr("class", "links")
	.attr("fill", "none")
	.attr("stroke", "#000")
	.attr("stroke-opacity", 0.2)
	.selectAll("path");

	var node = svg.append("g")
	.attr("class", "nodes")
	.attr("font-family", "sans-serif")
	.attr("font-size", 10)
	.selectAll("g");

	d3.csv("newsankeypcap.csv", function (error, data) {
	if (error) throw error;

	//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;
	})
	.object(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(graph);

	link = link
	.data(graph.links)
	.enter().append("path")
	.attr("d", d3.sankeyLinkHorizontal())
	.attr("stroke-width", function (d) {
	return Math.max(1, d.width);
	});

	link.append("title")
	.text(function (d) {
	return "Source IP: " + d.source.name + " → " + "Target IP: " + d.target.name + "\n" + format(d.value);
	});

	node = node
	.data(graph.nodes)
	.enter().append("g")

	node.append("rect")
	.attr("x", function (d) {
	return d.x0;
	})
	.attr("y", function (d) {
	return d.y0;
	})
	.attr("height", function (d) {
	return d.y1 - d.y0;
	})
	.attr("width", function (d) {
	return d.x1 - d.x0;
	})
	.attr("fill", function (d) {
	return color(d.name.replace(/ .*/, ""));
	})
	.attr("stroke", "#000");

	node.append("text")
	.attr("x", function (d) {
	return d.x0 - 6;
	})
	.attr("y", function (d) {
	return (d.y1 + d.y0) / 2;
	})
	.attr("dy", "0.35em")
	.attr("text-anchor", "end")
	.text(function (d) {
	return d.name;
	})
	.filter(function (d) {
	return d.x0 < width / 2;
	})
	.attr("x", function (d) {
	return d.x1 + 6;
	})
	.attr("text-anchor", "start");

	node.append("title")
	.text(function (d) {
	return d.name + "\n" + format(d.value);
	});
	});
	</script>

	</body>

	</html>