Networks - Edges 3

Edges Example 3 for How to Create Effective Network Data Visualization

Another popular way to encode directionality in network edges is through the use of curved lines. This requires SVG:path elements for your edges instead of SVG:line elements. These edges use a curved edge generator I got from Mike Bostock's patent example.

The handedness of the curve determines its direction. In this case, edges go out from the left-hand side of the node, which means edges come in on the right-hand side. While this reduces visual clutter from arrowheads, this method is often critiqued due to its difficulty to read directionality as well as the increased size of links (thus increasing their visual prominence).

From a gestalt perspective, the curved lines help reduce the signal that straight lines provide that might focus a reader's eyes on particular centers, as well as reduces the parallelism signal that occurs when lines share the same slope.

Curved edges are also used in undirected networks for aesthetic purposes, in which case the handedness can be purposefully randomized.

<html>
<head>
  <title>Drawing curved 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>

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

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

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

edgelist.forEach(function (edge) {
    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(-200)
  .on("tick", updateNetwork);

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

d3.select("svg").selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("r", 5)
  .style("fill", "#996666")
  .call(force.drag());

force.start();

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

d3.select("svg").selectAll("circle")
      .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