Matt Stockton

mattstockton@gmail.com
Navigating your network graph with Nodal.me

Nodal.me is a project that Kris Gosser, Jesse Vogt, and I recently hacked together. It is a way for you to visually navigate your connections on GitHub. The concept is straightfoward: search for someone on Github to see who follows them. Then, you can ‘expand’ any of those people to see who follows them, etc. Nodal incrementally builds the GitHub network follower graph starting at an initial node. The concept of visualizing your network graph isn’t new or novel. However, I think the tools that we used to build Nodal enable us to do some very novel things, which I am excited to experiment with as we go forward. Below are my thoughts on the possible future of navigating a network graph.

First, go ahead and give Nodal a try now - you don’t even need a GitHub account to experiment, either click the previous link or go to the main page and type in a popular GitHub user such as Mike Bostock (you can also sign in with GitHub, this will allow you to experiment for longer). Now, drag Mike’s node around. Next, click on one of Mike’s connections, and click the ‘Show Followers’ button — now that person’s followers will be added to the graph. I think this by itself is very cool. Again, it isn’t novel and doesn’t really serve a practical purpose, but I think it lays the groundwork for something very powerful.

Nodal uses D3.js, which is actually written by Mike Bostock. There is a huge set of things you can do with D3.js, and I will not go into those details here — I encourage you to check out the documentation and examples. Remember all of those awesome electoral college maps on the New York Times and various other sites? A lot of those were powered by D3.js. The specific feature we used in D3.js to build Nodal is called Force Layout. Force Layout allows you to build force-directed graphs without having to worry about building the underlying physics engine — basically, we get all of the fluid movement of the nodes in Nodal for free.

Now, I want you to try another feature of Nodal. Click the ‘Adjust Physics’ button in the top right. Notice that you can adjust 6 different properties of the nodes (Link Distance, Link Strength, Friction, Charge, Theta, and Gravity). Change a few of these properties and see what happens to the nodes on the screen. Some simple changes are predictable (e.g. changing the Link Distance), whereas some are not (e.g. changing the Charge to 1000 makes the nodes go crazy). When you adjust the physics in Nodal, you are adjusting the physics for all of the nodes at the same time. With D3.js, you have control over the physical properties for each individual node — something we are currently not using in Nodal. If we were to use it, we could potentially create more interesting force-directed graphs (for example, different nodes can have different Link Distances or Charges).

This level of control over the physical properties of the nodes is what really excites me. Hear me out through this example: Let’s say you want to search your GitHub network to find someone who is skilled at Django, Python, Javascript, and Node.js. Let’s also assume that your function to assess skill in each language / technology is simply the number of repos each person has created in GitHub related to that language / technology. We could populate your network graph as described above, but instead of having sliders that adjust the physics of the nodes directly, we could build sliders that mapped to your skill function for each technology of interest (Django, Python, Javascript, and Node.js). When you adjust each slider, the behavior of the node graph would be to arrange the nodes in order of your defined skill function (e.g. higher skilled people would float to the right)

Need more Django than Node.js? turn the Django slider up, and turn the Node.js slider down — watch the nodes arrange themselves in Nodal so that the Django skill function has a higher weight than the Node.js skill function. Decide you don’t need Node.js that much? Turn the slider all the way down, and watch the nodes adjust again. Don’t know exactly what you want? Experiment with moving the sliders, and see how the nodes react.

So why is this so great to me? Because you can tweak your skill function and see a visual response in real time. It is a continuous view of the results. You could try to do something similar through excel or a database query, but the results are very much discrete. You run it, look at the static results, and then have to tweak your skill functions manually. The visual, continuous nature of this idea allows you to change the function on the fly, and see the results immediately.

This might be a weak example (I don’t think I would use the above technique to find solid Engineers), but think of another potential application: LinkedIn. Imagine if a hiring manager could see a graph of their network, and have sliders that meant different things (years of experience, number of recommendations, average length of job, rank of college, etc.). How powerful would those sliders be to help you find a good job candidate? This is why I’m excited about what we’ve built so far in Nodal. How about your ideas? I’m interested to hear your thoughts.

Find the code on GitHub