# Animate

#### John Coene

#### 2019-04-09

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