knitr::opts_chunk$set( collapse = TRUE, comment = "#>", warning = FALSE ) library(sigmajs)
sigmajs
also lets you easily animate your graphs.
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)
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)
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" )
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.