Networks - Graphs 5

Graph Example 5 for How to Create Effective Network Data Visualization

In this example, the position of the modularity nodes on the mini-map is determined by the average position of the nodes that make them up. Mousing over a node on the mini-map will highlight the node in the main network data visualization.

Drag the regular nodes to watch the change in position of the modularity nodes in the mini-map.

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

<html>
<head>
  <title>Linked modularity minimap</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>

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 == 4) {
      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);
}

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;
    }
  });

var modules = nodes.map(function (d) {return d.module})
  .filter(onlyUnique)
  .map(function (d) {return {id: d, members: []}});

var moduleEdges = [];
  var singletons = {id: "singletons", members: []};

var moduleNodeHash = {};

modules.forEach(function (module) {
    module.members = nodes.filter(function (d) {return d.module === module.id});
    moduleNodeHash[module.id] = module;
    if (module.members.length === 1) {
      singletons.members.push(module.members[0]);
    }
  });

modules.push(singletons);

var moduleEdgeHash = {};

edges.forEach(function (edge) {

if (!moduleEdgeHash[moduleNodeHash[edge.source.module].id + "-" + moduleNodeHash[edge.target.module].id]) {
      var moduleEdge = {source: moduleNodeHash[edge.source.module], target: moduleNodeHash[edge.target.module], weight: 1};
      moduleEdgeHash[moduleNodeHash[edge.source.module].id + "-" + moduleNodeHash[edge.target.module].id] = moduleEdge;
      moduleEdges.push(moduleEdge);
    }
    else {
      moduleEdgeHash[moduleNodeHash[edge.source.module].id + "-" + moduleNodeHash[edge.target.module].id].weight += 1;
    }
  })

return {nodes: modules, edges: moduleEdges}

}

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]
});

var modularityGraph = modularityCensus(nodes, edges, result);

var mSVG = d3.select("#viz").append("svg")
  .attr("class", "modularity")
  .attr("height", 100)
  .attr("width", 100)
  .style("height", 100)
  .style("width", 100)
  .style("position", "absolute")
  .style("left", 375)
  .style("top", 375)
  .style("background", "white");

mSVG.selectAll("line")
  .data(modularityGraph.edges)
  .enter()
  .append("line")
  .attr("class", "modularity")
  .style("stroke-width", function (d) {return d.weight * 2})
  .style("stroke", "black");

mSVG.selectAll("circle")
  .data(modularityGraph.nodes.filter(function(d) {return d.members.length > 1}))
  .enter()
  .append("circle")
  .attr("class", "modularity")
  .attr("r", function (d) {return d.members.length})
  .style("stroke", "black")
  .style("stroke-width", "1px")
  .style("fill", function (d) {return d.id == "singletons" ? "lightgray" : colors(d.id)})
  .on("mouseover", moduleOver)
  .on("mouseout", moduleOut);

var force = d3.layout.force().nodes(nodes).links(edges)
  .size([500,500])
  .charge(-300)
  .gravity(0.2)
  .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 moduleOver(d) {
    console.log("MODULE", d);
    d3.select(this)
    .style("stroke-width", "4px")
    d3.select("svg.main").selectAll("circle")
    .style("stroke-width", function (p) {return p.module == d.id ? "4px" : "1px"})
  }

function moduleOut(d) {
    d3.select(this)
    .style("stroke-width", "1px")
    d3.select("svg.main").selectAll("circle")
    .style("stroke-width", "1px")
  }

function updateNetwork() {
    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 + ")"});

d3.select("svg.modularity").selectAll("circle")
    .each(function (d) {
      var theseNodes = d.members;
      var avgX = d3.mean(theseNodes, function (p) {return p.x});
      var avgY = d3.mean(theseNodes, function (p) {return p.y});
      d.x = avgX / 5;
      d.y = avgY / 5;
    })
      .attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")"});

d3.select("svg.modularity").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});

}

function updateModularityNetwork() {

}
}
</script>
  </footer>

</html>

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