Add line to rChart (dimple) scatter plot

Question

I would like to add horizontal line to a scatter in dimple.js created by rCharts on a predefined value of y.

library(rCharts)

df <- data.frame(a  = rnorm(10), b = rnorm(10))

d1 <- dPlot(b~a,
            data = df,
            type = "bubble"
            )

d1

I tried it by adding:

d1$layer(y= 0, copy_layer=T, type='line', color=list(const='red'))

But this returns the message:

Error in envRefInferField(x, what, getClass(class(x)), selfEnv) : ‘layer’ is not a valid field or method name for reference class “Dimple”

Are there other ways to get horizontal line in the plot?

Answer 1

Very good question, and I am glad you asked. This functionality will be added with this pull request. For now, you can test it by require(devtools); install_github("rCharts","timelyportfolio",ref="dimple_layer"). Here is your example reworked to work almost right. Also, I added some other considerations. I'm still trying to get the dimple aggregation working correctly in rCharts. You will see a not so perfect workaround.

library(rCharts)

df <- data.frame(id = 1:10, a  = rnorm(10), b = rnorm(10))

d1 <- dPlot(b~a,
            groups = "a",
            data = df,
            type = "bubble"
            ,defaultColors = "#!['blue']!#"
)
d1$xAxis(type="addMeasureAxis")
d1$yAxis(type="addMeasureAxis",overrideMin = -2, overrideMax = 2)

d1

d1$layer(
  y ~ x
  ,groups = c("x","y")
  ,data = data.frame(x = c(1,10), y = rep(0,2))
  ,type="line"
)
d1

For now, a better way to handle might be to use afterScript to draw a line on top. As you can see this is definitely a work in progress and is far too hacky.

library(rCharts)

df <- data.frame(id = 1:10, a  = rnorm(10), b = rnorm(10))

d1 <- dPlot(b~a,
            groups = "a",
            data = df,
            type = "bubble"
            ,defaultColors = "#!['blue']!#"
)
d1$xAxis(type="addMeasureAxis")
d1$yAxis(type="addMeasureAxis",overrideMin = -2, overrideMax = 2)

d1

d1$setTemplate(
  afterScript = sprintf(
'
<script>
var line = d3.svg.line()
  .x(function(d) { return myChart.axes[0]._draw.scale()(d.x); })
  .y(function(d) { return myChart.axes[1]._draw.scale()(d.y); });

d3.select("#%s svg g")
  .append("path")
  .datum([{x:myChart.axes[0]._min,y:0},{x:myChart.axes[0]._max,y:0}])
  .attr("d",line)
  .style("stroke","blue")
  .style("stroke-width",3)
</script>
'
,d1$params$dom
))

d1