Sankey plots + Shiny

[sanchez5674]

Hi,

I am trying to add a Sankey plot to a Shiny app and I am running into the same problems posted here

https://groups.google.com/forum/#!topic/shiny-discuss/Ob8PjnmA4RQ

I have also found this link:

timelyportfolio/rCharts_d3_sankey#3

where it seems it is possible to make it work but I have not had any luck downloading the gh-pages.zip. It is not even clear to me if that is the correct way to go or not ...

Is there a working example I can take a look at?

Thanks in advance!

Carlos

[sanchez5674]

Hi,

After looking and mixing and matching some comments from Timelyportfolio and Ramnath, I was able to get this to work. Now, my only issue is that

sankeyPlot$setTemplate(
   afterScript = "<script> Whatever </script>"
) 

doesn't seem to have any effect. 

Here it is a simple example: 

ui.R

library(shiny)
library(rCharts)

shinyUI(bootstrapPage(
  div(
    class="container-fluid",
    div(class="row-fluid",
       headerPanel("Header Panel") 
    ),
    div(class="row-fluid",
        sidebarPanel(
          h4("Empty")
        ),
        mainPanel(
          tableOutput("table"),
           showOutput('sankey', 'd3_sankey')
        )
    )
  )
))

server.R 

library(shiny)
library(rCharts)

shinyServer(function(input, output){
  data <- reactive({
    data <- data.frame(source=c("A","A","A","B","G","H","H","L"),
               target=c("B","L","G","E","M","L","B","M"),
               value=c("1","3","2","3","2","7","2","25"))
    return(data)
  })

  output$table <- renderTable({
    return(data())
  })

  output$sankey <-  renderChart2({  
    sankeyPlot <- rCharts$new()
    sankeyPlot$setLib("http://timelyportfolio.github.io/rCharts_d3_sankey")

    sankeyPlot$set(
      data = data(),
      nodeWidth = 15,
      nodePadding = 10,
      layout = 32,
      width = 500,
      height = 500
    )
    return(sankeyPlot)
  })
})

The final piece of the puzzle is to download the d3_sankey directory

https://github.com/timelyportfolio/rCharts_d3_sankey/tree/gh-pages/libraries/widgets/d3_sankey

and copy it to the same folder where you have put ui.R and server.R

Carlos

[ramnathv]

afterScript will not have an impact in Shiny apps. You will have to use Shinystag$script` mechanism to add custom js code.

[sanchez5674]

Hi Ramnath,

I was thinking the same thing but I'm not much of javascripter :( That is one of the reasons for going with Shiny.

How do I "connect" the js code to the Sankey plot? I would like to include the following color scheme:

<script> // to be specific in case you have more than one chart d3.selectAll('#{{ chartId }} svg path.link') .style('stroke', function(d){ //here we will use the source color //if you want target then sub target for source //or if you want something other than gray //supply a constant //or use a categorical scale or gradient return d.source.color; }) //note no changes were made to opacity //to do uncomment below but will affect mouseover //so will need to define mouseover and mouseout //happy to show how to do this also // .style('stroke-opacity', .7) </script>

[ramnathv]

I will try to post a simple example to show you how it can be done. It might take some time before I can get to this :)

[timelyportfolio]

For reference, what would you like to accomplish with your afterScript? A quick way to get afterScript to appear in shiny will be to modify renderChart2. Here is an example and another in issue #522.

renderChart3 <- function( expr, env = parent.frame(), quoted = FALSE ){
  func <- shiny::exprToFunction(expr, env, quoted)
  function() {
    rChart_ <- func()
    cht_style <- sprintf("<style>.rChart {width: %spx; height: %spx} </style>", 
                         rChart_$params$width, rChart_$params$height)
    cht <- paste(
      capture.output(cat(
        rChart_$print()
        ,render_template(
          rChart_$templates$afterScript %||% 
          "<script></script>"
          , list(chartId = rChart_$params$dom, container = rChart_$container)
        )
        ,sep = ""
      ))
      , collapse = "\n")
    HTML(paste(c(cht_style, cht), collapse = "\n"))
  }
}

This is a temporary hack, but should get you up and running. Let me know how it works. You might also be interested in the d3Network package for additional d3 network plots from R.

[sanchez5674]

Hi,

I was able to include renderChart3 without any issues and that worked great. Thank you very much!

Basically, I was just trying to add color as described in here:

http://stackoverflow.com/questions/25412223/adding-color-to-sankey-diagram-in-rcharts

I will take a look at the d3Network package.

Keep up the great work. It is fantastic.

Carlos

[ramnathv]

Thanks @timelyportfolio for taking care of this.