Incorrect output sankey diagram when using shiny - r

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.
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); });
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.