johncoene / sigmajs

Σ sigma.js for R

sigmajs

sigmajs for R.

• Install
• Examples
• Website
• Shiny Demo

With the rise in popularity of networks, it is important for R users to have access to a package that allows visualising the aforementioned networks in a highly configurable, interactive and dynamic manner. sigmajs is a fully-fledged wrapper for the sigma.js JavaScript library.

The sigma.js JavaScript library is described as follows on its website:

Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications

Install

The stable version from CRAN.

install.packages("sigmajs")

The development version from Github of Bitbucket.

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

Examples

Most functions have corresponding demo(), see documentation and shiny demo.

library(sigmajs)

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

# visualise
sigmajs() %>%
	sg_nodes(nodes, id, label, size, color) %>%
	sg_edges(edges, id, source, target)

# from igraph 
data("lesmis_igraph")
 
layout <- igraph::layout_with_fr(lesmis_igraph)

sigmajs() %>%
	sg_from_igraph(lesmis_igraph, layout)

# from GEXF
gexf <- system.file("examples/arctic.gexf", package = "sigmajs")

sigmajs() %>% 
	sg_from_gexf(gexf) 

# proxies demos
demo(package = "sigmajs")

Contributing

See the contrinuting guidelines if you encounter any issue. Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

sigmajs's Issues

Crosstalk seems to match partial strings

Hello there,
I realy like this framework and was excited to see that there is a possibility to filter for nodes via crosstalk. Unfortunately it does not work correctly. Neither in the example on the website nor with my own data. The issue I see is the following:

Using meaningful ids leads to no match when you select a node or row. Using a id that is based on a simple counter (like in your example) works for the first nine nodes correctly. For row 10-19 it selects row 1, for row 20-29 row 2 and so on. When you select a node (e. g. wit id 27) it will select row 2 and 7.

Therefore, I assume that the comparison is not based on == but on somethink like %in% or str_detect?

Best regards
Simon

Providing each node and edge with a specific colour via hex codes

Hi John,

Is it possible to provide each node and edge with a specific colour via hex codes?

Cheers,

Jamie

[JOSS-review] statement of need

Related to openjournals/joss-reviews#814

The README file contains a paragraph on the "statement of need", which describes very well who may benefit from this package.

Please revise the introduction of your paper and add a similar statement of need to it, as the summary paragraph does not fully satisfy the requirements for the statement of need. This is just a minor issue, you may copy from your readme.

One addition to the readme-file. You write

sigmajs leverages the original library's great many methods

This is unclear to user who are not familiar with sigma.js, as it's not clear what the "original libraries" are. Please add a small sentence, which explains what the original library does and why there's an R implementation. Edit: There's a good example in your paper. Maybe you should add some parts from the paper to the readme and vice versa.

Color one node different than the others

I'm using sigmajs R package in a shiny app and I would like to color one node diferently than the others to highlight it.

I was trying:

network <- reactive({
          graph_from_data_frame(d = edges(),
                                vertices = nodes(),
                                directed = FALSE)
        })

output$org_plot <- renderSigmajs(
      
      sigmajs() %>%
        sg_from_igraph(network()) %>%
        sg_settings(drawLabels = TRUE, drawEdgeLabels = FALSE) %>%
        sg_layout(layout = igraph::layout_nicely) %>%
        sg_settings(
          minNodeSize = 3,
          maxNodeSize = 9,
          edgeColor = "default",
          defaultEdgeColor = "#d3d3d3",
          labelThreshold = 5           
        ) %>% 
        sg_neighbours()
  )
  
observeEvent(input$filter_org_list, {
  
  nodes_color <- node_size_label() %>% 
    mutate(color = case_when(
      id == input$filter_org_list ~ "red",
      TRUE ~ "black"
    ))
  
  sigmajsProxy("change") %>% 
    sg_change_nodes_p(nodes_color, color, "color")
})

where input$filter_org_list is the node I want to highlight.

The above doesn't work as expected, it changes all nodes to black.

Is it possible to do what I want? Am I doing something wrong?

ERROR: Some vertex names in edge list are not listed in vertex data frame

I am receiving the following error:

Error in igraph::graph_from_data_frame(edges, directed, nodes) :
Some vertex names in edge list are not listed in vertex data frame

However when I run:

all(c(edg$source, edg$target) %in% nds$id)

It returns TRUE so why is it not working?

Nodes dataframe is columned:

id; label; x; y; size; color

Edges dataframe columned:

id; source; target

where source and target are the ids of nodes.

sigmajs() %>% # initialise
  sg_nodes(nds, id, label, x, y, size, color) %>% # add nodes
  sg_edges(edg, id, source, target) %>% # add edges
  sg_layout() %>%  # layout
  sg_neighbours() # show node neighbours on node click

Thanks in advance!

Error when trying to run sample code to visualize twitter network (twinetwork - book example)

When i try to run the code in the twinetverse-book to create a first visualization (https://twinetbook.john-coene.com/get-started.html#visualise) sigmajs() %>% sg_nodes(nodes, id, size) %>% sg_edges(edges, id, source, target) i get the following error message:
Error: Can't bind data because some arguments have the same name . Any idea what could cause this? I've tried on two machines (linux / windows), both runing R 3.4.3. The not twitter - related examples on the main page (http://sigmajs.john-coene.com/) that i've tried out work well. Not sure whether it is a bug or a problem on my side.

crosstalk not working properly

When clicking on the graph, table show different items. this also happens on the demo.

[JOSS-review] Broken link to Code of Conduct

related to openjournals/joss-reviews#814

The link to the code-of-conduct in the readme is broken and needs to be fixed.

question: attach labels to edges?

Hi John, thanks for your impressive library. For one of my projects I'm currently using visNetwork to generate an interactive graph visualization. Only recently, I noticed sigmajs. Among the examples you provide I cannot find any with labels attached to edges, which is crucial to my projects. Would be great if you could advise if this is possible with sigmajs and how to achieve it. Thanks!

[JOSS-review] Add content to License file

Hi John,
this issue is related to openjournals/joss-reviews#814.
The JOSS requires the content of a license to be included in the license file. Please add the full license text to your existing LICENSE file.

If this conflicts with a possible CRAN submission, add your license information for CRAN to the DESCRIPTION file (and probably exclude your LICENSE file from checks / package-building).

Highlighting neighbors proxy doesn't work

Hey,

The title explains the issue. While the sg_neighbours() function works fine, the sg_neighbours_p() doesn't. When I try to highlight the nodes, there's no reactivity.

Way to define a layout

Is there a way to define the coordinates of the layout and pass it to sg_layout function?

version of sigma.js

is it 1.2.1 or v2 alpha20

Improved documentation

Thanks for this great package. I managed to run the example in sg_nodes but I'm a bit lost when I try to use my own data.
Can you improve the documentation to clarify what input is needed and what are the arguments?
Current description of the arguments is a bit sparse:

sg	An object of class sigmajsas intatiated by sigmajs.
data	Data.frame (or list) of nodes or edges.
...	any column.

Thanks

[JOSS-review] Guidelines for how to contribute

related to openjournals/joss-reviews#814

The documentation requires guidelines for community members to

1. Contribute to the software
2. Report issues or problems with the software
3. Seek support

Please add this information to the README, or if these instructions will be too long for the readme and obscure the introduction into the package, please add a (markdown) file and link from the readme to that file.

Hover over edges not working

Hello, very interested in this package and it is very well documented so kudos for that! However, I'm running into a problem when I try to capture hovering over edge events. Following this as a guide, here is my code:

library(shiny)
library(sigmajs)

nodes <- sg_make_nodes(100)
edges <- sg_make_edges(nodes)

ui <- fluidPage(
  sigmajsOutput("sg"),
  p("Hover over a node or edge"),
  verbatimTextOutput("hoverNode"),
  verbatimTextOutput("hoverEdge")
)

server <- function(input, output){
  output$sg <- renderSigmajs({
    sigmajs() %>%
      sg_nodes(nodes, id, size, color) %>%
      sg_edges(edges, id, source, target)
  })

  # capture node hover
  output$hoverNode <- renderPrint({
    paste0("This is node number: ", input$sg_over_node[["id"]])
  })
  # capture edge hover
  output$hoverEdge <- renderPrint({
    paste0("This is edge number: ", input$sg_over_edge[["id"]])
  })
}

shinyApp(ui, server) # run

As I move my mouse around, it captures the node hovering events just fine, but displays nothing when hovering over an edge. Is this a bug or am I doing something incorrectly?

Thanks!

-Kyle

> sessionInfo()
R version 3.5.0 (2018-04-23)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS Sierra 10.12.6

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.5/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shiny_1.1.0        igraph_1.2.1       sigmajs_0.1.1.9000

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.17     rstudioapi_0.7   bindr_0.1.1      magrittr_1.5     devtools_1.13.6  tidyselect_0.2.4
 [7] xtable_1.8-2     R6_2.2.2         rlang_0.2.1      dplyr_0.7.6      tools_3.5.0      withr_2.1.2     
[13] crosstalk_1.0.0  htmltools_0.3.6  yaml_2.1.19      digest_0.6.15    assertthat_0.2.0 tibble_1.4.2    
[19] crayon_1.3.4     bindrcpp_0.2.2   purrr_0.2.5      later_0.7.3      htmlwidgets_1.2  promises_1.0.1  
[25] memoise_1.1.0    glue_1.2.0       mime_0.5         compiler_3.5.0   pillar_1.2.3     jsonlite_1.5    
[31] httpuv_1.4.4.2   pkgconfig_2.0.1 

Great work! Does it also exist for Python?

Super nice realization! Do you know if something like this also exists for Python? As far as I know R is not that different from Python, so I wonder how difficult it would be to port what you wrote to Python as well... What do you think?

update to sigma.js v2?

sigma.js released v2 with webgl support, which can handle much larger graphs. it'd be really nice to update this package to sigma.js v2.

Exporting a dynamic graph

I was wondering if it is possible to export a dynamic network (while keeping the "dynamism" of the network) via the sg_export function or anything similar. Thanks!
Luigi

sg_zoom_p doesn't work for me

Hi, I am trying to use the function sg_zoom_p so that upon clicking on a node, I would zoom onto that node. However, I can't get that working and I cannot find an example in the documentation. I did something like this, where output$sg <- renderSigmajs({...}):

observeEvent(input$sg_click_node, {
    sigmajsProxy("sg") %>% 
      sg_zoom_p(id = input$sg_click_node$id)
  })

When I click on a node, nothing has changed. Do you know what I am doing wrong here, or could you provide an example of how to do that? Thanks!

Does not display in jupyter notebook nor in rstudio

I currently can't get output in neither jupyter notebook (In irkernel I get ERROR while rich displaying an object: Error in file(file, "rb"): invalid 'description' argument) nor in Rstudio (latest download -> as far as I can identifiy it it's a empty html plot displayed in the plot area of rstudio). I followed the install from github instruction and using the latest R from debian unstable.

I tried this code:

library(sigmajs)

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

# visualise
sigmajs() %>%
  sg_nodes(nodes, id, label, size, color) %>%
  sg_edges(edges, id, source, target)

I'm not sure what is happening here, is there anything I can do to debug this?

Here is the complete error in IRkernel:

ERROR while rich displaying an object: Error in file(file, "rb"): invalid 'description' argument

Traceback:
1. FUN(X[[i]], ...)
2. tryCatch(withCallingHandlers({
 .     rpr <- mime2repr[[mime]](obj)
 .     if (is.null(rpr)) 
 .         return(NULL)
 .     prepare_content(is.raw(rpr), rpr)
 . }, error = error_handler), error = outer_handler)
3. tryCatchList(expr, classes, parentenv, handlers)
4. tryCatchOne(expr, names, parentenv, handlers[[1L]])
5. doTryCatch(return(expr), name, parentenv, handler)
6. withCallingHandlers({
 .     rpr <- mime2repr[[mime]](obj)
 .     if (is.null(rpr)) 
 .         return(NULL)
 .     prepare_content(is.raw(rpr), rpr)
 . }, error = error_handler)
7. mime2repr[[mime]](obj)
8. repr_html.htmlwidget(obj)
9. lapply(obj$dependencies, function(dep) {
 .     html <- c()
 .     if (length(dep$script) > 0) {
 .         f <- file.path(dep$src$file, dep$script)
 .         html <- c(html, sprintf("<script src=\"%s\"></script>", 
 .             dataURI(mime = "application/javascript", file = f)))
 .     }
 .     if (length(dep$stylesheet) > 0) {
 .         f <- file.path(dep$src$file, dep$stylesheet)
 .         html <- c(html, sprintf("<link href=\"%s\" rel=\"stylesheet\" />", 
 .             dataURI(mime = "text/css;charset-utf-8", file = f)))
 .     }
 .     paste(html, collapse = "\n")
 . })
10. FUN(X[[i]], ...)
11. sprintf("<script src=\"%s\"></script>", dataURI(mime = "application/javascript", 
  .     file = f))
12. dataURI(mime = "application/javascript", file = f)
13. file(file, "rb")

The Rstudio output looks like this:

`sg_noverlap()` shows graph only after resize

Running the example from ?sg_noverlap:

nodes <- sg_make_nodes(500)
edges <- sg_make_edges(nodes)

sigmajs() %>%
  sg_nodes(nodes, id, size, color) %>%
  sg_edges(edges, id, source, target) %>%
  sg_layout() %>% 
  sg_noverlap()

I see a blank page. However, if I resize the page/canvas container/browser window, the graph is rendered. Tested this in RStudio 1.3.1093, Firefox 83.0, and Chromium 87.0.4280.67. The behavior is always the same.

This is sigmajs version 0.1.5 installed from CRAN.

In the browser DevTools, I see the following console message: (/tmp/sg_noverlap.html is the file with the sigmajs htmlwidget exported with RStudio)

Uncaught TypeError: p[d.id] is undefined
    atomicGo file:///tmp/sg_noverlap.html:913
    go file:///tmp/sg_noverlap.html:913
    start file:///tmp/sg_noverlap.html:913
    startNoverlap file:///tmp/sg_noverlap.html:913
    renderValue file:///tmp/sg_noverlap.html:1142
    renderValue file:///tmp/sg_noverlap.html:891
    staticRender file:///tmp/sg_noverlap.html:658
    forEach file:///tmp/sg_noverlap.html:60
    staticRender file:///tmp/sg_noverlap.html:581
    forEach file:///tmp/sg_noverlap.html:60
    staticRender file:///tmp/sg_noverlap.html:579
    maybeStaticRenderLater file:///tmp/sg_noverlap.html:703
    <anonymous> file:///tmp/sg_noverlap.html:710
    EventListener.handleEvent* file:///tmp/sg_noverlap.html:708
    <anonymous> file:///tmp/sg_noverlap.html:907
sg_noverlap.html:913:2006
    atomicGo file:///tmp/sg_noverlap.html:913
    go file:///tmp/sg_noverlap.html:913
    start file:///tmp/sg_noverlap.html:913
    startNoverlap file:///tmp/sg_noverlap.html:913
    renderValue file:///tmp/sg_noverlap.html:1142
    renderValue file:///tmp/sg_noverlap.html:891
    staticRender file:///tmp/sg_noverlap.html:658
    forEach self-hosted:206
    forEach file:///tmp/sg_noverlap.html:60
    staticRender file:///tmp/sg_noverlap.html:581
    forEach self-hosted:206
    forEach file:///tmp/sg_noverlap.html:60
    staticRender file:///tmp/sg_noverlap.html:579
    maybeStaticRenderLater file:///tmp/sg_noverlap.html:703
    <anonymous> file:///tmp/sg_noverlap.html:710
    (Async: EventListener.handleEvent)
    <anonymous> file:///tmp/sg_noverlap.html:708
    <anonymous> file:///tmp/sg_noverlap.html:907

Editing after GEXF import

Hi John,

Please could you help with the following:

1. Is it possible to edit node sizes (and perhaps location) after importing as a GEXF?

2. The neighbouring edges, when highlighted, are obscured by the remaining edges - is there any way to bring neighbouring edges to the front? I've tried to colour them with transparent hex codes but this doesn't seem to work.

3. How would you recommend exporting graphs to use in webpages?

Thanks!

Jamie

Click events

Is there any additional info on click events online? I have read the CRAN page (https://cran.r-project.org/web/packages/sigmajs/sigmajs.pdf) and followed the link for the official documentation (https://github.com/jacomyal/sigma.js/wiki/Events-API) but I don't find it clear.

I would like to highlight the adjacent nodes, and the adjacent nodes of these, i.e. I would like to highlight a path through a tripartite graph.

Setting node attributes

How can I assign each node a unique label of my choice and unique x and y coordinates. Means creating a number of node objects and pushing same to nodes list.

Same I am able to do in javascript.....
g.nodes.push({
id: data.nodes[i].id,
label: labelName,
x: xAxisVal,
y: yAxisVal,
size: .1
color: nodeColor,
});