R Shiny - Rotating tabPanel & onclick function

Question

I am using networkD3 and shiny to visualize some data. I have a diagonalNetwork created by networkD3. However, I want the tree to be displayed vertically. networkD3 doesn't seem to have an option to rotate diagonal networks.

Can I rotate a tabPanel in shiny?

I have added the code below. If possible I would like to be able to rotate the diagram specified by diagonalNetwork(). If not, can I rotate the whole tabPanel?

I notice that networkD3's forceNetwork has an onclick option, is it possible to respond to node clicks in the same way with a diagonalNetwork?

#### Load necessary packages and data ####
library(shiny)
library(networkD3)

data(MisLinks)
data(MisNodes)

hc <- hclust(dist(USArrests), "ave")
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata//flare.json")



## Convert to list format
Flare <- jsonlite::fromJSON(URL, simplifyDataFrame = FALSE)


#### Server ####
server <- function(input, output) {

  output$simple <- renderDiagonalNetwork({
    diagonalNetwork(List = Flare, fontSize = 10, opacity = 0.9)
  })  
  

  output$force <- renderForceNetwork({
    forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
                 Target = "target", Value = "value", NodeID = "name",
                 Group = "group", opacity = input$opacity)
    
    
  })
  
  ## 
  #dendroNetwork(hc, height = 600)
 # 
#  dendroNetwork(hc, height = 500, width = 800, fontSize = 10,
#                linkColour = "#ccc", nodeColour = "#fff", nodeStroke = "steelblue",
#                textColour = "#111", textOpacity = 0.9, textRotate = NULL,
#                opacity = 0.9, margins = NULL, linkType = c("elbow", "diagonal"),
#                treeOrientation = c("horizontal", "vertical"), zoom = FALSE)
  
  

}

#### UI ####

ui <- shinyUI(fluidPage(

  titlePanel("Shiny networkD3 "),

  sidebarLayout(
    sidebarPanel(
      sliderInput("opacity", "Opacity (not for Sankey)", 0.6, min = 0.1,
                    max = 1, step = .1)
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Simple Network", diagonalNetworkOutput("simple")),
        tabPanel("Force Network", forceNetworkOutput("force"))
      )
    )
  )
))

#### Run ####
shinyApp(ui = ui, server = server)

It would be easier to help if you provided a [reproducible example](http://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example) with sample input data that we can run to test possible solutions. — MrFlick, May 08 '17 at 15:35
I dont see a click event for the forcenetwork. I see a mouseover and a drag and drop event, but im not sure that is what you mean. Anyway, as it is not very related to the first question, i would anyway suggesting to make a new post and describe the desired output for the second question clearer. Concerning the first question, see the answer below. — Tonio Liebrand, May 08 '17 at 21:30

score 1 · Accepted Answer · edited May 23 '17 at 11:47

Add this to your server.R

Note: The id of your div containing the network is simple.

  observe({
    runjs("
          var rotated = false;
          var div = document.getElementById('simple');

          deg = rotated ? 0 : 90

          div.style.webkitTransform = 'rotate('+deg+'deg)'; 
          div.style.mozTransform    = 'rotate('+deg+'deg)'; 
          div.style.msTransform     = 'rotate('+deg+'deg)'; 
          div.style.oTransform      = 'rotate('+deg+'deg)'; 
          div.style.transform       = 'rotate('+deg+'deg)';

          rotated = !rotated;
          div.style.position = 'absolute';
          div.style.width = 1200+'px';
          div.style.height = 1200+'px';
    ")
  })

In your ui.R you have to include useShinyjs() and dont forget to load the package shinyjs. Info about rotating in JS can be found here: Rotate a div using javascript

Thank you! thats great, I think I will need to learn more javascript! — Daniel Cole, May 09 '17 at 14:58

score 1 · Answer 2 · answered Aug 30 '17 at 09:17

In the current dev version of networkD3 (v0.4.9000 @ 2017.08.30), there is a new treeNetwork() function that has this and many other new features built-in (they're also collapsible).

You can install the current dev version with...

devtools::install_github("christophergandrud/networkD3")

and plot a vertical (expanding down) diagonal plot with...

library(networkD3)
library(jsonlite)

URL <- paste0("https://cdn.rawgit.com/christophergandrud/networkD3/",
              "master/JSONdata//flare.json")
Flare <- jsonlite::fromJSON(URL, simplifyDataFrame = FALSE)

treeNetwork(Flare, type = "tidy", direction = "down")

There's still plenty of bugs to work out, e.g. placement and rotation of the text labels, so we'd appreciate testing, filling out issues/bug reports, and/or pull requests. https://github.com/christophergandrud/networkD3

No, not at the moment, but I’d be happy to answer questions (in the right place, i.e. not in a comment thread of a different question), and I’d be even more happy to have assistance writing it from people that have worked with it. — CJ Yetman, Mar 01 '18 at 07:28

R Shiny - Rotating tabPanel & onclick function

2 Answers2