layers and multiple series

[timelyportfolio]

To follow through on conversation with @bowerth and @bart6114 https://github.com/Bart6114/dimple/issues/1, open this issue to tackle one of the biggest missing features of rcdimple which is layers or multiple series. There is already some code in place to make this happen, but the integration is poor. I'll work up a quick prototype to start the conversation.

[timelyportfolio]

branch feature/layers

[timelyportfolio]

One example from https://github.com/timelyportfolio/rcdimple/blob/feature/layers/inst/experiments/layers.R using the first draft ugly add_series implementation.

#devtools;:install_github("timelyportfolio/rcdimple@feature/layers")
library(rcdimple)

# more testing
mtcars$name <- rownames(mtcars)
mtcars %>%
  dimple(mpg ~ cyl, type = "bar", groups = "cyl") %>%
  add_series(x = "cyl", y = "mpg", type = "line" ) %>%
  # hidden = FALSE so we can compare
  add_series(x = "cyl", y = "mpg", groups = "name", type = "bubble") %>%
  add_series(x = "cyl", y = "mpg", groups = "cyl", type = "bubble", yAxis = list(hidden=FALSE))  

[bowerth]

Many thanks, this works quite well haven't yet figured out how to prevent the creation of a second y-Axis on the right - is there an option to set the left-hand side y-Axis for add_series?

[timelyportfolio]

The trick (ugly I know) is yAxis = list(hidden=FALSE). I thought I had it working but it seems to be broken. Let me dig a little.

[timelyportfolio]

The second y-axis works in these lines.

[timelyportfolio]

Ok @bowerth , it appears like it the hidden = FALSE needs to be on the first non-primary layer.

mtcars$name <- rownames(mtcars)
mtcars %>%
  dimple(mpg ~ cyl, type = "bar", groups = "cyl") %>%
  add_series(x = "cyl", y = "mpg", type = "line", yAxis = list(hidden=FALSE) ) %>%
  # hidden = FALSE so we can compare
  add_series(x = "cyl", y = "mpg", groups = "name", type = "bubble") %>%
  add_series(x = "cyl", y = "mpg", groups = "cyl", type = "bubble")  

[bowerth]

Thanks - well, the objective is to compare on the same scale (left-hand side)

• stacked bars for breakdown in latest year
• second series (bubble) for total value in reference year

in ggplot2, this would be something like

data %>%
  filter(indic_code == "2.1.1") %>%
  ggplot(aes(x = cou)) +
  geom_bar(aes(y = value_latest, fill = var), stat = "identity") +
  geom_point(aes(y = value_earliest), stat = "identity")

[timelyportfolio]

I hate to keep showing this ugly method, but this is possible. Unfortunately, we have to manually/programatically specify overrideMin and overrideMax for the yAxis. Here is the code for now. I'm trying to figure out a clean way to do this, but not having much luck.

df %>%
  dimple( value_latest ~ cou, groups = "var", type = "bar") %>%
  xAxis( orderRule = "cou" ) %>%
  yAxis( overrideMin = 0, overrideMax = 3 ) %>%
  add_series(
    x = "cou",
    y = "value_earliest",
    type = "bubble",
    yAxis = list( overrideMin = 0, overrideMax = 3 )
  ) %>%
  add_legend()

[bowerth]

many thanks for this - I'm trying to add the axis selector for addSeries to the dimple binding - see http://dimplejs.org/advanced_examples_viewer.html?id=advanced_price_range_lollipop

 // Add the bars mapped to the second y axis
        myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);

for this purpose, it would be useful to check the JavaScript code that is generated by htmlwidgets.js and passed to dimple-binding-0.1/dimple.js - could you suggest a way to obtain the intermediate JS code before the SVG is generated?

[timelyportfolio]

@bowerth, same example as before? I believe I have a solution, but I have not had a chance to implement.

[bowerth]

yes, the same example - actually, it's only one of many similar cases - the overrideMax value could be calculated from the data if necessary but adding a parameter to chose the y-axis (y1, y2) seems more intuitive. I'm looking forward to your implementation and in the meantime try to find a way to increase transparency in the JS chain htmlwidgets.js - dimple.js - dimple.min.js

[timelyportfolio]

I just pushed some changes in https://github.com/timelyportfolio/rcdimple/commit/e6687c0c1c157e86ac0246d9b90bce598e621bfb to allow specification of an existing axis, but I have intentionally not documented yet. For an example, see lines.

In terms of transparency in the JS chain, I'm not sure I understand. The data for an htmlwidget is passed in a <script> tag, so if you would like to see, you can do something like with Inspect Element in Chrome.

Maybe, setting a breakpoint in this line in htmlwidgets.js will help.

Let me know.

[bowerth]

this works perfectly, many thanks for implementing!

[timelyportfolio]

@bowerth I only consider this a prototype for discussion. Please let me know how it goes with additional use, so that we can refine/iterate. Glad it worked.