Units in rCharts sankey diagram

Question

I am using the following code to generate an rCharts Sankey diagram ( https://github.com/timelyportfolio/rCharts_d3_sankey ):

if(!require(rCharts)){
  library(devtools)
  install_github('ramnathv/rCharts')
}
library(rCharts)

sankeyPlot <- rCharts$new()
sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')
sankeyPlot$set(
  data = data.frame(source=c('Cold','Warm','Total'),target=c('Total','Total','End'),value=c(20,80,100)),
  nodeWidth = 15,
  nodePadding = 10,
  layout = 32,
  width = 500,
  height = 300,
  units = "TWh",
  labelFormat = ".1%"
)
sankeyPlot$setTemplate(
  afterScript = "
  <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>
  ")

sankeyPlot

In Sankeyplot$set , I set a value for units. However, neither do I see the units, nor do I see the values. The units example comes from the official github documentation (example_hirst_f1.R). How could I show the values and the units in my chart?

Answer 1

In the sankeyPlot output an svg g element is created with class="node". In this element the value and its unit are added in the title element inside a rect element representing the node. This title element is not a visible element. The name on the other hand is added in the text element (in this case "warm") and is visible.

You can see this structure by right clicking in the view window in Rstudio and then "inspect".

Screenshot of the node structure in Web Inspector

A quick fix would be to add the value and its unit to this text element. This is done by replacing line 105 in layout/charts.html from

  .text(function (d) { return d.name; })

with

.text(function (d) { return d.name + " " + format(d.value); })

and then using this as a template.

Of course there are probably better solutions. I suppose the title element is there for some reason (using it in a mouseover event maybe). But at least it is a start. I hope it helps.

Answer 2

JeroenDM's answer can also be inserted in the afterscript. In this case the Github repository can be used without modifications.

sankeyPlot$setTemplate(
  afterScript = "
  <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)

  units = ' TWh'

  var formatNumber = d3.format('0,.0f'),    // zero decimal places
  format = function(d) { return formatNumber(d) + units; }

  d3.selectAll('#{{ chartId }} svg .node text')
  .text(function (d) { return d.name + ' (' + format(d.value) + ')'; })
  </script>
  ")