D3 Examples - Networks

Networks - Graphs 6

Rather than trying to show the entire network structure, this removes the links between communities and then lays out the communities on a grid. This allows readers to examine the different structures of communities and provides a different perspective on the network.

To do this, we need to use a multi-foci approach in the force layout's tick function, which pushes nodes toward an area determined by their module, and which does not allow the force layout's alpha parameter to decrease until those nodes are within a certain distance from that region.

This example relies on the jLouvain library to calculate community structure.

xxxxxxxxxx
 
<html>
<head>
  <title>Community Grid</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="jsLouvain.js" type="text/JavaScript"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>
​
<div id="viz">
  <svg class="main">
  </svg>
</div>
</body>
  <footer>
<script>
​
d3.csv("firm.csv",function(error,data) {createNetwork(data)});
​
function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
}
​
function createNetwork(edgelist) {
  var nodeHash = {};
  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({id: nodeHash[edge.source].id + "-" + nodeHash[edge.target].id, source: nodeHash[edge.source], target: nodeHash[edge.target], weight: edge.weight});
    }
  });
  createForceNetwork(nodes, edges);
}
​
function modularityCensus(nodes, edges, moduleHash) {
  edges.forEach(function (edge) {
    if (edge.source.module !== edge.target.module) {
      edge.border = true;
    }
    else {
      edge.border = false;
    }
  });
  nodes.forEach(function (node) {
    var theseEdges = edges.filter(function(d) {return d.source === node || d.target === node});
​
    var theseSourceModules = theseEdges.map(function (d) {return d.source.module}).filter(onlyUnique);
    var theseTargetModules = theseEdges.map(function (d) {return d.target.module}).filter(onlyUnique);
​
    if (theseSourceModules.length > 1 || theseTargetModules.length > 1) {
      node.border = true;
    }
    else {
      node.border = false;
    }
  });
​
}
​
function createForceNetwork(nodes, edges) {
​
//create a network from an edgelist
​
var colors = d3.scale.ordinal().domain([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]).range(["#996666", "#66CCCC", "#FFFF99", "#CC9999", "#666633", "#993300", "#999966", "#660000", "#996699", "#cc6633", "#ff9966", "#339999", "#6699cc", "#ffcc66", "#ff6600", "#00ccccc"]);
​
var node_data = nodes.map(function (d) {return d.id});
var edge_data = edges.map(function (d) {return {source: d.source.id, target: d.target.id, weight: 1}; });
​
var community = jLouvain().nodes(node_data).edges(edge_data);
var result  = community();
​
nodes.forEach(function (node) {
  node.module = result[node.id]
});
​
 modularityCensus(nodes, edges, result);
​
 edges = edges.filter(function (d) {return d.border == false});
​
  var force = d3.layout.force().nodes(nodes).links(edges)
  .size([500,500])
  .charge(-300)
  .chargeDistance(100)
  .gravity(0.01)
  .on("tick", updateNetwork);
​
  var edgeEnter = d3.select("svg.main").selectAll("g.edge")
  .data(edges, function (d) {return d.id})
  .enter()
  .append("g")
  .attr("class", "edge");
​
  edgeEnter
  .append("line")
  .style("stroke-width", function (d) {return d.border ? "3px" : "1px"})
  .style("stroke", "black")
  .style("pointer-events", "none");
​
  var nodeEnter = d3.select("svg.main").selectAll("g.node")
  .data(nodes, function (d) {return d.id})
  .enter()
  .append("g")
  .attr("class", "node")
  .call(force.drag());
​
  nodeEnter.append("circle")
  .attr("r", 8)
  .style("fill", function (d) {return colors(d.module)})
  .style("stroke", "black")
  .style("stroke-width", function (d) {return d.border ? "3px" : "1px"})
​
  nodeEnter.append("text")
  .style("text-anchor", "middle")
  .attr("y", 3)
  .style("stroke-width", "1px")
  .style("stroke-opacity", 0.75)
  .style("stroke", "white")
  .style("font-size", "8px")
  .text(function (d) {return d.id})
  .style("pointer-events", "none")
​
  nodeEnter.append("text")
  .style("text-anchor", "middle")
  .attr("y", 3)
  .style("font-size", "8px")
  .text(function (d) {return d.id})
  .style("pointer-events", "none")
​
  force.start();
​
  function updateNetwork(e) {
​
    var k = 10 * e.alpha;
    nodes.forEach(function(o, i) {
      var xPosition = (parseInt(o.module / 4) * 135) + 125;
      var yPosition = (o.module%4 * 110) + 75;
      var xDiff = Math.abs(o.x - xPosition);
      var yDiff = Math.abs(o.y - yPosition);
      var xDir = o.x - xPosition > 0;
      var yDir = o.y - yPosition > 0;
      if (xDiff > 25) {
        o.x += xDir ? -k : k;
      }
      if (yDiff > 25) {
        o.y += yDir ? -k : k;
      }
      if (xDiff > 100 || yDiff > 100) {
        force.alpha(0.099);
      }
    });
​
    d3.select("svg.main").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});
​
    d3.select("svg.main").selectAll("g.node")
      .attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")"});
​
  }
​
}
</script>
  </footer>
​
</html>
​
    