Network flows + rules

This is a quick hack to draw network flows to from a service showing the allow/deny and with hover text showing the source and destn ports plus no. of bytes in the flow.

forked from mbostock's block: Molecule

forked from anonymous's block: Molecule

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link line {
  stroke: #696969;
}

.node rect {
  stroke: #000;
  stroke-width: 1.5px;
}

.node text {
  font-size: 12px;
  font-family: sans-serif;
  pointer-events: none;
}

.tooltip {
	background: #eee;
	box-shadow: 0 0 5px #999999;
	color: #333;
	font-size: small;
  font-family: sans-serif;
	padding: 2px;
	position: absolute;
	text-align: center;
	z-index: 10;
	display: block;
	opacity: 0;
}

th,tr,td{
	border: 1px solid black;
	padding:2px;
  font-size: 12px;
}

table{
	border: border-collapsed;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var radius = d3.scale.sqrt()
    .range([0, 6]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .size([width, height])
    .charge(-4000)
    .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + 20; });
  
d3.json("graph.json", function(error, graph) {
  if (error) throw error;

force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();

var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("g")
      .attr("class", "link");

link.append("line")
      .style("stroke-width", "3px")
  		.attr('marker-end', function(d) { return "url(#markerEnd" + d.end_color +")"; })
      .attr('marker-start', function(d) { return "url(#markerStart" + d.start_color +")"; });

// Add a tooltip on the links
  var link_tooltip = d3.select("body")
    .append('div')
    .attr('class', 'tooltip');

link_tooltip.append('div')
    .attr('class', 'value');
  
  link.on('mouseover', function(d) {
		var rows = "";
    rows += "<tr><td>" + "Source" + "</td><td>" + d.source.name + " (" + d.source_port + ")</td></tr>";
    rows += "<tr><td>" + "Destination" + "</td><td>" + d.target.name + " (" + d.target_port + ")</td></tr>";
    rows += "<tr><td>" + "Bytes up" + "</td><td>" + d.bytes_up + "</td></tr>";
    rows += "<tr><td>" + "Bytes down" + "</td><td>" + d.bytes_down + "</td></tr>";
    var html = "<table><tbody>" + rows + "</tbody></table>";

link_tooltip.select('.value').html(html);
		link_tooltip.style('display', 'block');
    link_tooltip.style('opacity', 2);
	});
  link.on('mousemove', function(d) {
    link_tooltip.style('top', (d3.event.layerY + 10) + 'px');
    link_tooltip.style('left', (d3.event.layerX - 25) + 'px');
  });
  link.on('mouseout', function(d) {
  	link_tooltip.style('display', 'none');
    link_tooltip.style('opacity', 0);
  });

var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

node.on('mouseover', function(d) {
		var rows = "";
    rows += "<tr><td>" + "Application" + "</td><td>" + d.application + "</td></tr>";
    rows += "<tr><td>" + "Location" + "</td><td>" + d.location + "</td></tr>";
    var html = "<table><tbody>" + rows + "</tbody></table>";

link_tooltip.select('.value').html(html);
		link_tooltip.style('display', 'block');
    link_tooltip.style('opacity', 2);
	});
  node.on('mousemove', function(d) {
    link_tooltip.style('top', (d3.event.layerY + 10) + 'px');
    link_tooltip.style('left', (d3.event.layerX - 25) + 'px');
  });
  node.on('mouseout', function(d) {
  	link_tooltip.style('display', 'none');
    link_tooltip.style('opacity', 0);
  });
  
  // TODO - we could do this in a loop
  
  svg.append('defs').append('marker')
       .attr({'id':'markerEndGreen',
               'viewBox':'-0 -5 10 10',
               'refX':35,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
         .append('svg:path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('fill', "green")
            .attr('stroke','#FF');
  
  svg.append('defs').append('marker')
       .attr({'id':'markerStartGreen',
               'viewBox':'-0 -5 10 10',
               'refX':-25,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
       .append('svg:path')
            .attr('d', 'M0,0L10,-5L10,5Z')
            .attr('fill', "green")
            .attr('stroke','#FF');  
  
    svg.append('defs').append('marker')
       .attr({'id':'markerEndRed',
               'viewBox':'-1 -5 2 10',
               'refX':25,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
         .append('svg:path')
            .attr('d', 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z')
            .attr('fill', "red")
            .attr('stroke','#FF'); // TODO - this makes it transparent but there may be a better way
  
  svg.append('defs').append('marker')
       .attr({'id':'markerStartRed',
               'viewBox':'-1 -5 2 10',
               'refX':-25,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
       .append('svg:path')
            .attr('d', 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z')
            .attr('fill', "red")
            .attr('stroke','#FF'); 
  
  function tick() {
    link.selectAll("line")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
    
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  }
});
</script>

https://d3js.org/d3.v3.min.js