9 June 2013

Quick and Simple D3 Network Graphs from R

Sometimes I just want to quickly make a simple D3 JavaScript directed network graph with data in R. Because D3 network graphs can be manipulated in the browser–i.e. nodes can be moved around and highlighted–they're really nice for data exploration. They're also really nice in HTML presentations. So I put together a bare-bones simple function–called d3SimpleNetwork for turning an R data frame into a D3 network graph.


By bare-bones I mean other than the arguments indicating the Data data frame, as well as the Source and Target variables it only has three arguments: height, width, and file.

The data frame you use should have two columns that contain the source and target variables. Here's an example using fake data:

Source <- c("A", "A", "A", "A", "B", "B", "C", "C", "D")
Target <- c("B", "C", "D", "J", "E", "F", "G", "H", "I")
NetworkData <- data.frame(Source, Target)

The height and width arguments obviously set the graph's frame height and width. You can tell file the file name to output the graph to. This will create a standalone webpage. If you leave file as NULL, then the graph will be printed to the console. This can be useful if you are creating a document using knitr Markdown or (similarly) slidify. Just set the code chunk results='asis and the graph will be rendered in the document.


Here's a simple example. First load d3SimpleNetwork:

# Load packages to download d3SimpleNetwork

# Download d3SimpleNetwork

Now just run the function with the example NetworkData from before:

d3SimpleNetwork(NetworkData, height = 300, width = 700)

Click here for the fully manipulable version. If you click on individual nodes they will change colour and become easier to see. In the future I might add more customisability, but I kind of like the function's current simplicity.

Update 12 June 2013: The original d3SimpleNetwork command discussed here doesn't work easily with slidify. I have created a new d3Network R package that does work well with slidify (and other knitr-created HTML slideshows). Use its d3Network command and set the argument iframe = TRUE.


nxskok said...

It works, and is very pretty!

I saved the output to an html file, and it displayed with Firefox. I like how it spaces out the nodes. Next, I am going to try it on a more complicated graph.

Christopher Gandrud said...

Great to hear you liked it.

I'm thinking of adding a small tweak that allows you to change the node spacing.

G$ said...

This is pretty cool. I took my package dependencies and piped it to the d3 network graph so I could see what the dependency graph looks like. Interesting to see how the packages build on each other



package <- grep("^package:", search(), value = TRUE)
keep <- sapply(package, function(x) x == "package:base" ||
!is.null(attr(as.environment(x), "path")))
package <- sub("^package:", "", package[keep])

x = foreach(p=iter(package)) %do% {dependsOnPkgs(p, recursive=FALSE)}
names(x) = package

# parse them into Source and Targets
Source = foreach(i=1:length(x), .combine='c') %do% {rep(names(x[i]),length(x[[i]]))}
Target = (foreach(i=1:length(x), .combine='c') %do%{x[[i]]})
NetworkData <- data.frame(Source, Target)

# Load packages to download d3SimpleNetwork

# Download d3SimpleNetwork
d3SimpleNetwork(NetworkData, height = 800, width = 1280, file='myPackages.html')

Christopher Gandrud said...

@G$ Really nice!

If your interested, take a look at the new package version of d3Network. It allows you to change things like the font size and link distances: http://christophergandrud.github.io/d3Network/

Fr. said...

I have posted an example at the end of this blog post, which shows another plot function for networks, using ggplot2.