Networks - Edges 4

Edges Example 4 for How to Create Effective Network Data Visualization

A less common method for drawing directed edges is to draw the edge as a shape, in this case a triangle. To code this requires playing with JavaScript's Math.atan2 function so that you can find the edges of the node perpendicular to the direction of the angle of the link to the other node.

One of the challenges in the use of abstract shapes is that your readers don't have any experience with edges as triangles. On seeing this, https://twitter.com/zanstrong asked me if the edges were "comets" (meaning the fat end was the target) or "nails" (meaning the sharp end was the target). You don't want your readers to be confused about fundamental characteristics of an already complicated data visualization like this, so make sure to include a legend that identifies anything that might be confusing, and especially something like this.

A benefit of triangular edges is that the shape encodes the stretching of nodes away from each other due to competing forces in the network, like pieces of taffy.

<html>
<head>
  <title>Drawing triangular edges</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

var nodeSize = 5;

d3.csv("firm.csv",function(error,data) {createNetwork(data)});

function arrowEdge(d) {
  var diffX = d.target.y - d.source.y;
  var diffY = d.target.x - d.source.x;

var angle0 = ( Math.atan2( diffY, diffX ) + ( Math.PI / 2 ) );
  var angle1 = angle0 - ( Math.PI / 2 );
  var angle2 = angle0 + ( Math.PI / 2 );

var x1 = d.source.x + (nodeSize * Math.cos(angle1));
  var y1 = d.source.y - (nodeSize * Math.sin(angle1));
  var x2 = d.source.x + (nodeSize * Math.cos(angle2));
  var y2 = d.source.y - (nodeSize * Math.sin(angle2));

return "M" + x1 + "," + y1 + "L" + x2 + "," + y2 + " L " + d.target.x + "," + d.target.y + "z";

}

function createNetwork(edgelist) {
  var nodeHash = {};
  var edgeHash = {};
  var nodes = [];
  var edges = [];

edgelist.forEach(function (edge, i) {
    if (!nodeHash[edge.source]) {
      nodeHash[edge.source] = {id: edge.source, label: edge.source};
      nodes.push(nodeHash[edge.source]);
    }
    if (!nodeHash[edge.target]) {
      nodeHash[edge.target] = {id: edge.target, label: edge.target};
      nodes.push(nodeHash[edge.target]);
    }
    if (edge.weight >= 5) {
      edges.push({source: nodeHash[edge.source], target: nodeHash[edge.target], weight: edge.weight});
    }
  });
  createForceNetwork(nodes, edges);
}

function createForceNetwork(nodes, edges) {

//create a network from an edgelist

var force = d3.layout.force().nodes(nodes).links(edges)
  .size([500,500])
  .charge(-400)
  .gravity(.3)
  .on("tick", updateNetwork);

d3.select("svg").selectAll("path")
  .data(edges)
  .enter()
  .append("path")
  .style("stroke-width", "1px")
  .style("stroke", "none")
  .style("fill", "#999966");

d3.select("svg").selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", nodeSize)
  .style("fill", "#666633")
  .call(force.drag());

force.start();

function updateNetwork() {
    d3.select("svg").selectAll("path")
    .attr("d", arrowEdge);

d3.select("svg").selectAll("circle.node")
      .attr("cx", function (d) {return d.x})
      .attr("cy", function (d) {return d.y});
  }

}
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js