---
title: "Animate"
author: "John Coene"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Animate}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  warning = FALSE
)
library(sigmajs)
```

`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`.

```{r}
# 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.

```{r}
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`).

```{r}
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"
  )
```