This Week’s Widget - adjacency matrix

This beautiful little adjacency matrix by Mike Bostock inspired this Github issue/request. At the beginning of the week, I started banging away on a htmlwidget extension to networkD3 using Elijah Meeks’ d3.layout.adjacencyMatrix. The deeper I got the more I realized that an adjacency matrix really is just a subset of a heatmap, so then I started replicating Matthew Lincoln’s fine Shiny/ggplot2 adjacency matrix with RStudio/Joe Cheng’s d3heatmap. This bl.ock visualizing 2015 NCAA football is one result.

As the end of this week nears, I don’t have a whole lot in terms of a finished htmlwidget, but I do have some prototype code and some examples.

Installation

This is not on CRAN and not even in the master branch, so to install we will need some help from devtools::install_github.

devtools::install_github("timelyportfolio/networkD3@feature/adjacency")

For d3heatmap, you can just install.packages("d3heatmap").

Examples

Let’s start small with the bridges of Koenigsberg.

#devtools::install_github("timelyportfolio/networkD3@feature/adjacency")

library(networkD3)
library(igraph)

data(Koenigsberg, package="igraphdata")
koen_df <- get.data.frame(upgrade_graph(Koenigsberg), what="both")
koen_df$edges$from <- match(koen_df$edges$from,koen_df$vertices$name) - 1
koen_df$edges$to <- match(koen_df$edges$to,koen_df$vertices$name) - 1

adjacencyNetwork(
  Links = koen_df$edges,
  Nodes = koen_df$vertices,
  Source = "from",
  Target = "to",
  NodeID = "name",
  Group = "name",
  margin = list(left=150, top=150),
  colourScale = htmlwidgets::JS("d3.scale.category10()"),
  width = 500,
  height = 500
)

Now we can compare with d3heatmap.

library(d3heatmap)

d3heatmap(
  get.adjacency(
    upgrade_graph(Koenigsberg),
    sparse = FALSE
  ),
  colors = "Blues",
  dendrogram = "none",
  cexRow = 0.7, cexCol = 0.7
)

One more example with the karate data from igraphdata.

library(networkD3)
library(igraph)

data(karate, package="igraphdata")
karate_df <- get.data.frame(upgrade_graph(karate), what="both")
karate_df$edges$from <- match(karate_df$edges$from,karate_df$vertices$name) - 1
karate_df$edges$to <- match(karate_df$edges$to,karate_df$vertices$name) - 1

adjacencyNetwork(
  Links = karate_df$edges,
  Nodes = karate_df$vertices,
  Source = "from",
  Target = "to",
  NodeID = "name",
  Group = "Faction",
  margin = list(left=150, top=150),
  width = 500,
  height = 500
)

Again, let’s do the same network but in d3heatmap, but we will include the dendrogram this time.

library(d3heatmap)

d3heatmap(
  get.adjacency(
    upgrade_graph(karate),
    sparse = FALSE
  ),
  colors = "Blues",
  cexRow = 0.7, cexCol = 0.7
)

With a little sorting, our karate adjacency matrix can be more helpful.

# community then by degree sorting
library(dplyr)
fc <- fastgreedy.community(karate)
karate_df <- get.data.frame(karate, what = "both")
karate_df$vertices <- data.frame(membership = unclass(membership(fc)), degree = degree(karate)) %>%
  mutate( name = rownames(.) ) %>%
  arrange( membership, desc( degree ) ) %>%
  select( name ) %>%
  as.vector %>%
  inner_join( karate_df$vertices )
karate_df$edges$from <- match(karate_df$edges$from,karate_df$vertices$name) - 1
karate_df$edges$to <- match(karate_df$edges$to,karate_df$vertices$name) - 1

adjacencyNetwork(
  Links = karate_df$edges,
  Nodes = karate_df$vertices[,c(2,1)],
  Source = "from",
  Target = "to",
  NodeID = "name",
  Group = "Faction",
  margin = list(left=100, top=100)
)

As you can see, I have a long way to go with this. The dynamic sorting in the Mike Bostock example is probably first to implement. I’d love help, comments, feedback, anything…

Thanks

Thanks Mike Bostock for d3 and another great example using it. Thanks Elijah Meeks for all his d3 posts, book, examples, and layouts. Thanks Joe Cheng for d3heatmap.

As always, thanks to

• Ramnath Vaidyanathan and RStudio for htmlwidgets
• all the contributors to R and JavaScript