toggle buttons to control rgl 3d scatterplot not working - html

Question

We are working on a meta analysis about lizard niches and convergent evolution, and created a 3d plot with PCA scores, were dots are lizard species from 24 different families.
We decided to use our 3d plots as supplementary material for our manuscript because there are very interesting patterns that are obscured when plotted in 2 dimensions. For example, all nocturnal species stick together, and are separated from the rest in the third plane.
So, to make the figures really useful, I wanted to include some controls to turn some objects on/off (like lizard families, or ellipsoids, or functional groups). I tried using Plotly, that gives you very nice and interactive plots, but symbols in Plotly are limited to only five for 3D plots.
I finally did it with R using the rgl package. I had to create new symbols by overlapping pre-existent ones, but and at the end I got what I needed.
I followed an online tutorial to create interactive controls (https://cran.r-project.org/web/packages/rgl/vignettes/WebGL.html) that can be embedded in html, and with a lot of effort I got those controls working. The problem is that it only works in my computer, only in Chrome (does not work in Firefox, nor Safari). I asked one of the creators of the package and he told me that the tutorial was intended to be use with markdown, and given I changed the html code, the weird behavior was not surprising.
After that I learn some Rmarkdown and html to better understand the tutorial, and re-do the code. Now I have the plots and I have the buttons, but when I compile the script using Knitr, the buttons don't work. Some of them do nothing, some others turn on different set of points.
I am sorry for the length of this post, but I really tried everything and I can't find a solution.
Here is a link to a sample of my dataset, my R script, and the HTML generated using Knitr: https://drive.google.com/open?id=0B-fCxMGN3utrbWgtZzhWYVpxSjg
Thank you so much in advance!

Answer 1

The issue is that there are at least two different schemes for embedding rgl scenes in a web page and for linking a button to the rgl scene, and you're mixing them without providing the "glue" to make them work together.
An rglwidget() always has an elementId. Normally it's some random string, but if you want to refer to that scene, you should specify one.
The toggleButton() function uses the older scheme for inserting the scene into your web page. So you need to translate the elementId to the prefix that it uses.
So try something like this:
```{r results='asis'}
library(rgl)
x <- plot3d(rnorm(10), rnorm(10), rnorm(10))
rglwidget(elementId = "theplot")
elementId2Prefix("theplot")
toggleButton(x["data"], prefix = "theplot")
```