Graph Visualizations Using Sigma.js

Visualization overview

This package uses ggplot-like grammar: a basic visualization is first created and then modified by adding/removing attributes with additional functions, using the pipe operator from the magrittr package.

The basic visualization is created with the sigma_from_igraph function, then various functions are called to control the aesthetics of the visualization, which all take a sgraph object as the first argument.

Example

The dataset “Les Miserables” is included as a classic R graph example, which shows the co-appearances of the characters in the novel “Les Miserables”.

library(sgraph)
library(igraph)
#> 
#> Attaching package: 'igraph'
#> The following objects are masked from 'package:stats':
#> 
#>     decompose, spectrum
#> The following object is masked from 'package:base':
#> 
#>     union

data(lesMis)
class(lesMis)
#> [1] "igraph"
names(vertex_attr(lesMis))
#> [1] "id"    "label"
names(edge_attr(lesMis))
#> [1] "value"

Each node has an ID and a label, and each edge has a value equal to the number of co-appearances two characters had.
To create a basic sgraph object, we call sigma_from_igraph:

sig <- sigma_from_igraph(lesMis)
sig

We can resize the nodes using a fixed value:

sig %>% add_node_size(one_size = 7)

Or using a node attribute:

df_nodes = cbind.data.frame(name = vertex_attr(lesMis, 'id'),
  degree = degree(lesMis))

# seems sigma.js is not scaling automatically with min_size and max_size
# do it manually for now
df_nodes$degree %<>% scale(center = FALSE) %>% `*`(3) %>% `+`(3)

igraph = add_igraph_info(lesMis, df_nodes)

sig <- sigma_from_igraph(lesMis) %>%
 add_node_size(size_vector = vertex_attr(igraph, 'degree'), min_size = 3, max_size = 8)
sig

We can use the label attribute to change the node names displayed:

sig %>%
  add_node_labels(label_attr = 'label')

We can use add_edge_size function to change edge sizes:

sig %>%
  add_edge_size(one_size = 5)

And add_edge_color function to change edge colors:

sig %>%
  add_edge_color(one_color = "#ccc")