Networks - Graphs 8

Graph Example 8 for How to Create Effective Network Data Visualization

This example shows how to use JSNetworkX to calculate a few simple network analysis statistics on the graph, and adjust the size and color of nodes based on those statistics. The statistics calculated are:

Eigenvector centrality - Showing how well connected nodes are to well-connected nodes.

Clustering - Whether the nodes connected to a node are themselves connected to each other.

Betweenness - Highlighting nodes that are on the greatest number of shortest paths in the network.

<html>
<head>
  <title>Clustering, betweenness centrality and eigenvector centrality</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="jsnetworkx.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 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({id: nodeHash[edge.source].id + "-" + nodeHash[edge.target].id, 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 node_data = nodes.map(function (d) {return d.id});
var edge_data = edges.map(function (d) {return [d.source.id, d.target.id]; });

//var G = new jsnx.cycleGraph();
var G = new jsnx.Graph();
G.addNodesFrom(node_data);
G.addEdgesFrom(edge_data);

var betweenness = jsnx.betweennessCentrality(G);
var eigenvector = jsnx.eigenvectorCentrality(G);
var clustering = jsnx.clustering(G);
//var shortestPath = jsnx.shortestPath(G, {source: 28, target: 31})

//console.log(shortestPath);

var evExtent = d3.extent(d3.values(eigenvector._stringValues));
var bwExtent = d3.extent(d3.values(betweenness._stringValues));
var clExtent = d3.extent(d3.values(clustering._stringValues));

var colorScale = d3.scale.linear().domain([0,1]).range(["#ffff99", "#ff6600"]);
var sizeScale = d3.scale.linear().domain([0,1]).range([4,10]);

}

}

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

var drag = force.drag();

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(drag);

nodeEnter.append("circle")
  .attr("r", 8)
  .attr("class", "foreground")
//  .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();

byEV();

function updateNetwork(e) {

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>

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