In JohnCoene/sigmajs: Interface to 'Sigma.js' Graph Visualization Library

library(htmltools)
library(sigmajs)
library(dplyr)

# ----------------------------- GET STARTED
nodes_demo <- sg_make_nodes()
edges_demo <- sg_make_edges(nodes_demo, 17)

nodes_demo$size <- 1

get_started <- sigmajs(height = 150) %>% 
  sg_nodes(nodes_demo, id, color, size) %>% 
  sg_edges(edges_demo, id, source, target) %>% 
  sg_settings(defaultNodeColor = "#98D3A5",
              mouseEnabled = FALSE,
                touchEnabled = FALSE,
              minNodeSize = 3,
              maxNodeSize = 3) %>% 
  sg_layout()

# ----------------------------- DYNAMIC
edges_demo$delay <- runif(nrow(edges_demo), 2000, 10000) # between .5 and 2 seconds

src <- edges_demo[, c("source", "delay")]
tgt <- edges_demo[, c("target", "delay")]

names(tgt) <- c("source", "delay")

nodes <- src %>% 
  bind_rows(tgt) %>% 
  group_by(source) %>% 
  summarise(
    delay = min(delay) - 10,
    size = n()
  ) %>% 
  ungroup() %>% 
  mutate(
    color = sample(
      c("#B1E2A3", "#98D3A5", "#328983", "#1C5C70", "#24C96B"), 
      n(), replace = TRUE)) %>% 
  select(id = source, delay, size, color)

last_edge <- max(nodes$delay) + 100

dyn <- sigmajs(height = 150) %>%
  sg_force_start() %>%
  sg_add_nodes(nodes, delay, id, size, color, cumsum = FALSE) %>%
  sg_add_edges(edges_demo, delay, id, source, target, refresh = TRUE, cumsum = FALSE) %>% # read delay documentation
  sg_force_stop(last_edge) %>% 
  sg_settings(mouseEnabled = FALSE,
                touchEnabled = FALSE,
              minNodeSize = 1,
              maxNodeSize = 4)

# ----------------------------- ANIMATE
n <- nrow(nodes_demo)
layout <- sg_get_layout(nodes_demo, edges_demo)
nodes_demo$to_x <- layout$x
nodes_demo$to_y <- layout$y
nodes_demo$to_size <- runif(n, 5, 10)
nodes_demo$color <- sample(c("#ffe66d", "#e85d75"), n, replace = TRUE)
nodes_demo$to_color <- sample(c("#B1E2A3", "#98D3A5", "#328983", "#1C5C70",
  "#24C96B"), n, replace = TRUE)

animate <- sigmajs(height = 150) %>%
  sg_nodes(nodes_demo, id, label, size, color, to_x, to_y, to_size, to_color) %>%
  sg_edges(edges_demo, id, source, target) %>% 
  sg_animate(mapping = list(x = "to_x", y = "to_y", size = "to_size", color = "to_color"),
             delay = 500) %>%
  sg_settings(animationsTime = 10000,
              minNodeSize = 1,
              maxNodeSize = 5,
              mouseEnabled = FALSE,
                touchEnabled = FALSE)

br()
div(
  class = "row",
  div(
    class = "col-md-8",
    h1(
      "sigmajs",
      a(
        class = "github-button",
        href = "https://github.com/JohnCoene/sigmajs",
        `data-show-count` = "true",
        `aria-label` = "Star JohnCoene/sigmajs on GitHub",
        "Star"
      )
    ),
    a("sigma.js", href = "http://sigmajs.org/", target = "_blank"), 
    " for R. A powerful, full-featured R package for interactive graph visualisation.",
    br(),
    br(),
    tags$button(
      role = "button",
      "How to ", 
      class = "btn btn-warning",
      `data-toggle` = "collapse",
      href = "#collapseExample",
      `aria-expanded` = "false",
      `aria-controls` = "collapseExample",
      tags$i(
        class = "fa fa-rocket"
      )
    )
  ),
  div(
    class = "col-md-4",
    br(),
    img(
      src = "man/figures/logo.png",
      class = "img-responsive",
      style = "margin:0 auto;max-height:200px;"
    )
  )
)

br()
br()

div(
  class = "collapse",
  id = "collapseExample",
  div(
    class = "well",
    "Start with the 1)", a("get started guide", href = "articles/get_started.html"), 
    "to get up to speed, then move on to 2)", 
    a("layouts", href = "articles/layout.html"), "then to 3)", 
    a("buttons", href = "articles/buttons.html"), "and finally 4)", 
    a("dynamic graphs", href = "articles/dynamic.html"),
    "and you should be at ease with the core functionalities."
  )
)

h2("Features")

div(
  class = "row",
  div(
    class = "col-md-4",
    div(
      class = "thumbnail",
      div(
        class = "caption",
        h3("Customisation"),
        get_started,
        p("Easily and neatly layout and cluster nodes on your", code("sigmajs"), "graphs."), br(),
        p(
          a(
            href = "articles/layout.html",
            class = "btn btn-primary",
            tags$i(class = "fa fa-share-alt"),
            "Layout"
          ),
          a(
            href = "articles/cluster.html",
            class = "btn btn-success",
            tags$i(class = "fa fa-cubes"),
            "Cluster"
          )
        )
      )
    )
  ),
  div(
    class = "col-md-4",
    div(
      class = "thumbnail",
      div(
        class = "caption",
        h3("Dynamism"),
        dyn,
        p("Learn how to make a temporal graph in static R markdown documents."),
        p(
          a(
            href = "articles/dynamic.html",
            class = "btn btn-primary",
            tags$i(class = "fa fa-spinner fa-pulse fa-fw"),
            "Dynamic"
          ),
          a(
            href = "articles/buttons.html",
            class = "btn btn-success",
            tags$i(class = "fa fa-gavel"),
            "Buttons"
          )
        )
      )
    )
  ),
  div(
    class = "col-md-4",
    div(
      class = "thumbnail",
      div(
        class = "caption",
        h3("Animations"),
        animate,
        p("Animate the color, size, and x/y coordinates of the nodes on the canvas."),
        p(
          a(
            href = "articles/animate.html",
            class = "btn btn-primary",
            tags$i(class = "fa fa-cogs"),
            "Animate"
          )
        )
      )
    )
  )
)

div(
  tags$ul(
    class = "nav nav-tabs",
    role = "tablist",
    tags$li(
      role = "presentation",
      class = "active",
      tags$a(
        href = "#shiny",
        `aria-controls` = "shiny",
        role = "tab",
        `data-toggle` = "tab",
        tags$i(class = "fa fa-desktop"),
        "Shiny"
      )
    ),
    tags$li(
      role = "presentation",
      tags$a(
        href = "#dynamism",
        `aria-controls` = "dynamism",
        role = "tab",
        `data-toggle` = "tab",
        tags$i(class = "fa fa-exchange"),
        "Crosstalk"
      )
    ),
    tags$li(
      role = "presentation",
      tags$a(
        href = "#formats",
        `aria-controls` = "formats",
        role = "tab",
        `data-toggle` = "tab",
        tags$i(class = "fa fa-file-code-o"),
        "Formats"
      )
    )
  ),
  div(
    class = "tab-content",
    div(
      class = "tabpanel",
      class = "tab-pane fade active in",
      id = "shiny",
      div(
        class = "row",
        div(
          class = "col-md-8",
          p(
            code("sigmajs"), "plays hand-in-hand with Shiny, it lets you:",
            tags$ul(
              tags$li("Catch how users interact with your graphs."),
              tags$li("Easily apply filters."),
              tags$li("Trigger events.")
            )
          )
        ),
        div(
          class = "col-md-4",
          br(),
         p(
            a(
              href = "articles/shiny.html",
              class = "btn btn-primary",
              tags$i(class = "fa fa-graduation-cap"),
              "Guide"
            ),
            a(
              href = "http://shiny.john-coene.com/sigmajs/",
              target = "_blank",
              class = "btn btn-success",
              tags$i(class = "fa fa-desktop"),
              "Demo"
            )
          )
        )
      )
    ),
    div(
      class = "tabpanel",
      class = "tab-pane fade",
      id = "dynamism",
      div(
        class = "row",
        div(
          class = "col-md-10",
          p("Have", code("sigmajs"), "play hand-in-hand with other", 
            a("htmlwidgets,", href = "https://rstudio.github.io/crosstalk/widgets.html", target = "_blank"),
            " such as", a("leaflet,", href = "https://rstudio.github.io/leaflet/", target = "_blank"), "or", 
            a("DT", href = "https://rstudio.github.io/DT/", target = "_blank"), 
            " to highlight nodes and neighbours on click."
          )
        ),
        div(
          class = "col-md-2",
          p(
            a(
              href = "articles/talkcross.html",
              class = "btn btn-primary",
              tags$i(class = "fa fa-exchange"),
              "Crosstalk"
            )
          )
        )
      )
    ),
    div(
      class = "tabpanel",
      class = "tab-pane fade",
      id = "formats",
      div(
        class = "row",
        div(
          class = "col-md-8",
          p("Build", code("sigmajs"), "graphs from igraph objects or GEXF files in a single function call.")
        ),
        div(
          class = "col-md-4",
          p(
            a(
              href = "articles/formats.html#igraph",
              class = "btn btn-primary",
              tags$i(class = "fa fa-share-alt"),
              "igraph"
            ),
            a(
              href = "articles/formats.html#gexf",
              target = "_blank",
              class = "btn btn-success",
              tags$i(class = "fa fa-file-code-o"),
              "GEXF"
            )
          )
        )
      )
    )
  )
)

Install

Install the stable version from CRAN.

install.packages("sigmajs")

or the development version Github or Bitbucket.

# install.packages("remotes")
remotes::install_github("JohnCoene/sigmajs") # github
remotes::install_bitbucket("JohnCoene/sigmajs") # bitbucket

Example

Note that the graphs do not work in the RStudio viewer, and thus open in your default browser.

library(sigmajs)

# generate data
nodes <- sg_make_nodes(25) # 20 nodes
edges <- sg_make_edges(nodes, 50) # 50 edges

sigmajs() %>% # initialise
  sg_nodes(nodes, id, label, size) %>% # add nodes
  sg_edges(edges, id, source, target) %>% # add edges
  sg_layout() %>%  # layout
  sg_cluster() %>% # cluster
  sg_drag_nodes() %>% # allows user to drag nodes
  sg_neighbours() # show node neighbours on node click

br()

div(
  class = "panel panel-default",
  div(
    class = "panel-body",
    div(
      class = "row",
      div(
        class = "col-md-10",
        "sigmajs is part of the", "twinetverse,",
        "a set of packages for Twitter network analysis and visualisation: it'll",
        tags$strong("1) get you started with network data"), "and", 
        strong("2) walk you through from basic use cases to advanced functions.")
      ),
      div(
        class = "col-md-2",
        tags$button(
          type = "button",
          "Twinetverse ", 
          `data-toggle` = "modal", 
          `data-target` = "#twinetverse", 
          class = "btn btn-info"
        )
      )
    )
  )
)

div(
  class = "modal fade",
  id = "twinetverse",
  tabindex = "-1", 
  role = "dialog",
  `aria-labelledby` = "myModalLabel",
  div(
    class = "modal-dialog",
    role = "document",
    div(
      class = "modal-content",
      div(
        class = "modal-header",
        tags$button(
          type = "button",
          class = "close",
          `data-dismiss` = "modal",
          `aria-label` = "Close",
          tags$span(
            `aria-hidden` = "true",
            tags$i(class = "fa fa-times")
          )
        ),
        tags$h4(class = "modal-title", id = "myModalLabel", "Twinetverse")
      ),
      div(
        class = "modal-body",
        img(
          src = "http://twinetverse.john-coene.com/reference/figures/logo.png",
          style = "max-height:150px;",
          align = "right"
        ),
        "The", a("twinetverse", href = "http://twinetverse.john-coene.com/", target = "_blank"), "is a set of packages,",
        tags$i("including sigmajs,"), "to visualise Twitter interactions, it includes everything you need to:",
        br(),
        br(),
        tags$ol(
          tags$li(
            "Collect data"
          ),
          tags$li(
            "Build, and"
          ),
          tags$li(
            "Visualise graphs"
          )
        ),
        br(),
        "The", a("twinetverse", href = "http://twinetverse.john-coene.com/", target = "_blank"), "comes with an in-depth guide:",
        "a 12 chapter-long book filled with examples.", "It is highly recommended if you want to fully grasp the intricacies of sigmajs.",
        "The book will also get you setup and running with",
        strong("real-world, easy to understand"), "network data if you are unfamiliar with it."
      ),
      div(
        class = "modal-footer",
        tags$a(
          href = "http://twinetverse.john-coene.com/", 
          target = "_blank",
          class = "btn btn-default",
          tags$i(class = "fa fa-desktop"),
          " Website"
        ),
        tags$a(
          href = "http://twinetbook.john-coene.com/", 
          target = "_blank",
          class = "btn btn-primary",
          tags$i(class = "fa fa-book"),
          " Book"
        )
      )
    )
  )
)