A collaboration ego-network in networkD3

>> GitHub repository

I recently created an interactive visualization of my collaboration ego-network. Some colleagues have asked for more details, so here’s this post.

D3 is a JavaScript library to create and manipulate data-driven documents. One of the many things people can do in D3 is producing interactive visualizations of networks. D3 network visualizations are great, but D3 itself is not immediate to use if you’re not very familiar with JavaScript. However if you are an R user the first thing you think in these cases is, “There must be an R package for that”. It turns out there is one, thanks to Christopher Gandrud and JJ Allaire. They created networkD3, an R interface to the D3 functions for network visualization, which is based on the htmlwidgets framework.

I gave networkD3 a try and I was impressed. Like I said, I used it to create an interactive visualization of my collaboration ego-network — the collaboration network (who works with whom) of the people and institutes that I (ego) have been working with lately. With basically one line of code, networkD3 allows you to create a fairly complicated html document based on D3 functions. The R code is here.

(Click here for a larger version of the graph)

Most of the R code just prepares the data in a format that’s suitable for networkD3. A relatively easy way to input your collaboration data is by creating a table of collaborator names and attributes (collaboration_egonet_nodes.csv in the code) and, using the same list of collaborators, an adjacency matrix to enter data on who works with whom among them (collaboration_egonet_adj_matrix.csv in the code).

Something that might be tricky at first is the fact that in networkD3 nodes need to be numbered starting from 0 (not from 1 like standard R packages for network analysis). Once that’s done, the main function to create a networkD3 object is forceNetwork, which generates a D3 force-directed network graph. You can control node color, node size, edge width, labels etc. If you have some familiarity with D3 itself, you can also write a JavaScript expression to regulate the behavior of a node when it’s clicked on. Some examples are here.

Once you get the visualization, you can export it to html or embed it in RMarkdown or Shiny. If you use WordPress, it’s good to know that you can very easily embed your networkD3 html file in a WordPress post or page. All you need is the iframe plugin to embed any external content in WordPress. You’ll then just have to upload your html page as created by networkD3 to your WordPress media library, and use that html as the iframe source.

A collaboration ego-network in networkD3
Tagged on: