Animate

John Coene

2019-09-12

sigmajs also lets you easily animate your graphs.

Random

Pass the initial variables to nodes and edges as well as those you want to animate to, you then reference those variables you want to animate to in the mapping of sg_animate.

# generate data
nodes <- sg_make_nodes(30)
edges <- sg_make_edges(nodes)

# add transitions
n <- nrow(nodes)
nodes$to_x <- runif(n, 5, 10)
nodes$to_y <- runif(n, 5, 10)
nodes$to_size <- runif(n, 5, 10)
nodes$to_color <- sample(c("#ffe66d", "#e85d75"), n, replace = TRUE)

sigmajs() %>%
  sg_nodes(nodes, id, label, size, color, to_x, to_y, to_size, to_color) %>%
  sg_edges(edges, id, source, target) %>% 
  sg_animate(mapping = list(x = "to_x", y = "to_y", size = "to_size", color = "to_color")) %>%
  sg_settings(animationsTime = 2000)

Layout

You can animate x, y, size and color, the function lets you specify the delay; time before the animation trigers. You can also specify the animation duration in sg_settings with animationsTime.

Let’s redo the above and use the sg_get_layout function to get the x and y coordinates of our graph and use it in the animation, going from a random graph to a nice layout.

layout <- sg_get_layout(nodes, edges)

nodes$to_x <- layout$x
nodes$to_y <- layout$y

sigmajs() %>%
  sg_nodes(nodes, id, label, size, color, to_x, to_y, to_size, to_color) %>%
  sg_edges(edges, id, source, target) %>% 
  sg_animate(mapping = list(x = "to_x", y = "to_y", size = "to_size", color = "to_color")) %>%
  sg_settings(animationsTime = 2000)

Button

Or better, you could tie the animation to a button so the user can trigger it him/herself (I set the delay to 0 on sg_animate).

sigmajs() %>%
  sg_nodes(nodes, id, label, size, color, to_x, to_y, to_size, to_color) %>%
  sg_edges(edges, id, source, target) %>% 
  sg_animate(mapping = list(x = "to_x", y = "to_y", size = "to_size", color = "to_color"),
             delay = 0) %>%
  sg_settings(animationsTime = 3500) %>% 
  sg_button(
    "animate", # button label 
    "animate", # event name
    class = "btn btn-warning"
  )

animate