Executing Javascript in R?

Question

Recently, I learned about the "highcharter" library in R (e.g. https://jkunst.com/highcharter/). There appears to be many interesting visualizations that are possible with this library - but there do not seem to be as many options as in the original "highchart" javascript libary (e.g. https://www.highcharts.com/).

I started looking at different visualization options that are available within the original "highchart" library and came across the following visualization : https://www.highcharts.com/demo/packed-bubble-split

I see here that there is an option to look at the source code that is used for these visualizations:

Lately, I have been learning how to execute HTML and Javascript code within R (e.g. R markdown). I had the following question:

Is it possible for me to take the code that is provided here and somehow render this code in R, and thereby producing these exact same visualizations in R?

Maurits Evers · Accepted Answer · 2022-10-22 11:59:18Z

Yes this is possible in RMarkdown (and I assume Quarto, though I haven't made the change yet;-).

The key is to

load JS libraries into the body of the HTML document; this can be easily done using htmltools inside an R code chunk. You can see the relevant JS libraries in the HTML part, as given in the JS fiddle.

```{r, echo = FALSE}
htmltools::tagList(
  htmltools::tags$script(src = "https://code.highcharts.com/highcharts.js"),
  htmltools::tags$script(src = "https://code.highcharts.com/highcharts-more.js"),
  htmltools::tags$script(src = "https://code.highcharts.com/modules/exporting.js"),
  htmltools::tags$script(src = "https://code.highcharts.com/modules/accessibility.js")
)
```

Place a <div> element directly inside the RMarkdown document
```
<div id="container"></div>
```
Finally, include the JS code inside a JS code chunk, the output of which we suppress with echo = FALSE
```
```{js, echo = FALSE}
// JS code goes in here
```
```
The JS code is the full "Javascript + No-library (pure JS)" code that contains the data and constructs the packed bubble chart, as given in the JS fiddle.

I have put together a reproducible Gist with a full sample Rmd document, including the JS code from https://www.highcharts.com/demo/packed-bubble-split.

Knitting the Rmd document then gives the following (interactive but static screenshot here) plot

Collectives™ on Stack Overflow

Executing Javascript in R?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related