Incorrect output sankey diagram when using shiny

Question

When I create a sankey diagram in a regular R session the output looks ok. The tooltip shows an arrow between the connections:

require(rCharts)
require(rjson)

links <- matrix(unlist(
  rjson::fromJSON(
    file = "http://bost.ocks.org/mike/sankey/energy.json"
  )$links
),ncol = 3, byrow = TRUE)
nodes <- unlist(
  rjson::fromJSON(
    file = "http://bost.ocks.org/mike/sankey/energy.json"
  )$nodes
)

links <- data.frame(links)
colnames(links) <- c("source", "target", "value")
links$source <- sapply(links$source, FUN = function(x) {return(as.character(nodes[x+1]))}) #x+1 since js starts at 0
links$target <- sapply(links$target, FUN = function(x) {return(nodes[x+1])}) #x+1 since js starts at 0
sankeyPlot <- rCharts$new()
sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')
sankeyPlot$set(
  data = links,
  nodeWidth = 15,
  nodePadding = 10,
  layout = 32,
  width = 960,
  height = 500,
  units = "TWh",
  title = "Sankey Diagram"
)
sankeyPlot

When I create it in shiny, the arrow in the tooltip is replaced by unusual characters. Also below the plot an unusual character is printed. I needed to download the d3_sankey library to make the shiny app version work, so if you want to reproduce it you have to change the path in the setLib statement. How can this be fixed?

require(shiny)

runApp(list(
  ui = pageWithSidebar(
    headerPanel('Test'),
    sidebarPanel(  'Test'  ),
    mainPanel(
      chartOutput("Plot", 'C:/R-3.0.1/library/rCharts/libraries/sankey')  
    )
  ),
  server = function(input, output, session){

    output$Plot <-  renderChart2({
      sankeyPlot2 <- rCharts$new()
      sankeyPlot2$setLib('C:/R-3.0.1/library/rCharts/libraries/sankey')
      sankeyPlot2$set(
    data = links,
    nodeWidth = 15,
    nodePadding = 10,
    layout = 32,
    width = 960,
    height = 500,
    units = "TWh",
    title = "Sankey Diagram"
      )
      return(sankeyPlot2)
     })
  }
))

> sessionInfo()
R version 3.0.2 (2013-09-25)
Platform: x86_64-w64-mingw32/x64 (64-bit)

locale:
[1] LC_COLLATE=Dutch_Belgium.1252  LC_CTYPE=Dutch_Belgium.1252   
[3] LC_MONETARY=Dutch_Belgium.1252 LC_NUMERIC=C                  
[5] LC_TIME=Dutch_Belgium.1252    

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

other attached packages:
[1] shiny_0.8.0.99 rjson_0.2.13   rCharts_0.4.2 

loaded via a namespace (and not attached):
 [1] bitops_1.0-6    caTools_1.16    digest_0.6.4    grid_3.0.2     
 [5] httpuv_1.2.1    lattice_0.20-23 plyr_1.8        Rcpp_0.10.6    
 [9] RCurl_1.95-4.1  RJSONIO_1.0-3   tools_3.0.2     whisker_0.3-2  
[13] xtable_1.7-1    yaml_2.1.10    

Answer 1

The problem is related to character encoding in multiple files. This is how I resolved the issues on my Windows 7 machine.

1. Mouseover tooltip issue

An arrow character is used to construct the "link" between source and target. It occurs in these files:

example_build_network_sankey.html
layouts\chart.html
layouts\chart_static_title.html
layouts\chart.html

Replace the arrow with the ASCii characters -> so the code looks like:

.text(function (d) { return d.source.name + " -> " + d.target.name + "\n" + format(d.value); });

2. Characters below the chart

 is found in:

\libraries\highlighters\prettify\css\sunburst.css
\layouts\chart.html
\libraries\widgets\d3_sankey\layouts\chart.html

I used the Search and Replace in Files facility in UltraEdit to replace this special character with a blank space. This one is tricky because I could not see the character in the UE editor. If I highlighted the blank space it appears as a backtick. The character is also found in jquery-1.8.2.min.js.