Part of project: UIUC Affiliation Network

We can now visualize the network! In case you’d missed it, check out post 1 for obtaining the data and post 2 on setting up the network. Before we visualize it, a quick disclaimer.

With 6,474 nodes and 8,271 edges, the network is pretty large. The algorithm which d3.js uses to render a forced layout graph is O(n log n) so it might take your browser a bit of time to render. Also, the visualization will not look pretty since everything is too cluttered. Therefore, I suggest taking a sample of the data for this next step. I provided all of the departments associated with the engineering college in the Github repository as the sample I’m going to use.

2.5 Setting up simple server

You should set up a simple server to preview your html file. This is really easy to do with Python. Just open up the command line, navigate to your project directory and type the following if you’re using python3:

python3 -m http.server

or the following if you are using python2:

python -m SimpleHTTPServer 8000

You should see an ip address with the port number. Open up a browser and navigate to that address to see a preview of the html file.

3. Visualize

First, make sure you’ve installed d3.js. The first part of the code is pretty straightforward since I’m setting the colors for the network. The important bit is where I set the hover and the mouse pointer-event. We want to be able to see the name of the node when our cursor is over it.

.node:hover text {
  display: inline;
}

.cell {
  fill: none;
  pointer-events: all;
}

With the d3.js script, we begin by setting up some variables for the visuals and creating a force layout graph.

var color = d3.scale.category10();

var width = 1200,
    height = 800

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .gravity(0.4)
    .charge(-120)
    .linkDistance(100)
    .size([width, height]);

The variable color is essentially an ordinal scale with a range of ten categorical colors. The width, height and svg is for the size of our visualization (svg is essentially an xml language to create graphics). The final bit is to create a force layout object with some specific properties. gravity is the pull of the nodes to a fixed point, charge determines how much the nodes repel each other, linkDistance determines the distance between connected nodes. I suggest playing around with the variables to get a better sense of what its doing.

Now, lets read in the json graph file we’d created and pass it into the force object. Note, we want to throw an error just in case there is a problem with the input.

d3.json("uiucSample.json", function(error, json) {
  if (error) throw error;

  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

The next bits of code is self-explanatory in that we set the variables to be what is in the data. There are two parts which we should discuss in detail.

  var circle = node.append("circle")
      .attr("r", function(d) { return d.value+5; })
      .style("fill", function (d) { return color(d.group); });

...

  node.on('mouseover', function(d) {
  link.style('stroke', function(l) {
    if (d === l.source || d === l.target)
      return '#ff3333';
    else
      return '#e6e600';
    });
  });

  node.on('mouseout', function() {
    link.style('stroke', '#e6e600');
  });

The variable circle will draw our node which we want to be in two different colors (one for department and one for people) as well as different size. Next, we want to highlight the edges of the node when we mouse over it. To do so, we have a function which returns the color of the edge based on whether it is connected to another node. The rest of the code is the standard settings for how the force layout to be drawn.