4  Sigma.js: high-level API

library(rtemis.draw)

.:rtemis.draw 0.3.0 🖌 aarch64-apple-darwin23

Attaching package: 'rtemis.draw'

The following object is masked from 'package:graphics':

    Axis

Network (graph) plots are rendered with Sigma.js, a WebGL renderer purpose-built for large graphs, rather than ECharts. rtemis.draw picks the most performant JavaScript library for each plot type, so networks use Sigma + graphology (layout and community detection) while the rest of the package continues to use ECharts. The high-level draw_network() and the low-level GraphModel classes are the R counterparts of the network renderer in rtemis.live.

Note on rendering Like the other draw_* functions, the network plot auto-detects your system’s light/dark setting and themes accordingly. Communities are detected with the Louvain algorithm and the default layout is ForceAtlas2; both run in the browser, so a graph re-lays out each time the widget is created.

4.1 From a correlation matrix

The most common input is a square weight matrix — a correlation matrix is the canonical example. Entry [i, j] is the edge weight between nodes i and j; the absolute value drives edge thickness and the sign drives edge color, so a correlation matrix renders directly. Node ids come from the matrix dimnames, and each node’s size defaults to its weighted degree.

num <- penguins[, c("bill_len", "bill_dep", "flipper_len", "body_mass")]
cormat <- cor(num, use = "complete.obs")

draw_network(cormat)

By default every non-zero edge is drawn. Use threshold to keep only the stronger associations:

draw_network(cormat, threshold = 0.3)

4.2 Communities and layout

Set color_by_group = TRUE to color nodes by their detected Louvain community. The resolution argument tunes the community sizes — higher values yield more, smaller communities:

draw_network(cormat, color_by_group = TRUE, resolution = 1.2)

Four layouts are available: "force" (ForceAtlas2, the default), "circular", "circlepack", and "random". The circular layout orders nodes around the ring by community so groups sit together:

draw_network(cormat, layout = "circular", color_by_group = TRUE)

4.3 From an edge list

Instead of a matrix you can pass an edge-list data frame. The source and target columns name the endpoints (the first two columns are used if those names are absent), with optional weight and sign columns:

edges <- data.frame(
  source = c("A", "A", "B", "C", "C", "D"),
  target = c("B", "C", "C", "D", "E", "E"),
  weight = c(1.0, 0.8, 0.5, 1.2, 0.3, 0.9)
)

draw_network(edges)

An optional nodes data frame supplies node attributes (id/name, label, value, group). Any node referenced by an edge but missing from the table is added automatically. Set directed = TRUE for a directed graph:

nodes <- data.frame(
  id    = c("A", "B", "C", "D", "E"),
  group = c("x", "x", "y", "y", "y")
)

draw_network(edges, nodes = nodes, directed = TRUE, color_by_group = TRUE)

4.4 Styling

The node and edge appearance is fully configurable. node_size sets the base radius (in screen pixels), edge_scale maps normalized weight to stroke width, and the *_opacity arguments control transparency. scale_by_degree (on by default) scales each node by its weighted degree; blend_edges colors each edge as the blend of its two endpoint colors instead of by sign:

draw_network(
  cormat,
  node_size       = 16,
  edge_scale      = 5,
  node_opacity    = 1,
  edge_opacity    = 0.6,
  scale_by_degree = FALSE,
  color_by_group  = TRUE,
  blend_edges     = TRUE,
  title           = "Penguin measurement correlations"
)

Hover a node to highlight its neighborhood and read its degree (and community, when color_by_group is on).

4.5 Lower-level API

draw_network() builds the graph and a SigmaOption render spec internally. For full control — assembling nodes and edges by hand, or constructing the render spec directly and rendering it with draw() — see the Sigma.js low-level S7 API chapter.