Author: Thomas Charlon
Date: 2024-08-19

# Graph Visualizations Using Sigma.js

#### Thomas Charlon

#### 2024-08-19

Sgraph enables to visualize graphs using the latest stable version of Sigma.js v2.4.0. Graphs are created using the igraph package.

## 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")