Hey there!

In my last post I’ve been talking about the webinar on Creating JavaScript data visualizations in R by the R Studio Team. Today I would like you to show what was covered during this webinar and what I’ve learned. If you missed the session you can watch the entire video here.

I am actually quite new to JavaScript and still struggling with complex code and some JavaScript libraries like D3, Leaflet are not that easy to understand for a beginner. Thats why I was stunned by the power of R and the htmlwidgets package: once you install it, you only need about two lines of code to create a complex JavaScript graph that is ready to be published on your webpage. Here are a couple of examples on how to create JS data visualisations with R:

Installation

First step: install the htmlwidgets package available on CRAN:

install.packages("htmlwidgets")
library(htmlwidgets)

If you want to start with your first visualization I encourage you to use RStudio. Once you open RStudio go to File -> New File -> R Markdown.

R Markdown allows you to translate R Code into HTML Code that you can use for web publishing. Let’s start!

DataTables

The first example will cover the DataTables plugin for jQuery. With this plugin you can generate interactive JavaScript tables for your needs. If you want to use this plugin with R, you have to first install the datatable package:

#the datatable packge is currently not available on CRAN, use devtools to get it
devtools::install_github("rstudio/DT")
library(DT)

Now let’s use the famous iris dataset that is included in R. You can have a look and explore the dataset by typing in iris into the R console.  To create a datatable out of this data just two lines of code are needed. In the R Markdown document write the following inside one chunk:

```{r}
library(DT)
datatable(iris)
```

If you are not familiar with R Markdown, you can have a look at its documentation here. Once you entered the code, click on Knit HTML,  a window will open and you should be able to see the final result:

Please note that this is just a static image. You can see the interactive version here. As you can see you get an HTML-File as an output from the R Markdown document. This HTML-File can be easily uploaded on your ftp server and is ready to be used.

Of course R allows you to customize your datatable, and once more you don’t have to use JavaScript syntax here:

I.e. if you want to change the column names, use the follwing code:

datatable(head(iris), colnames = c('Another Better Name' = 2, 'Yet Another Name' = 4))

If you know R, you can see that it’s quite intuitive and easy to manipulate. For more customization options I will refer you to the official R DataTables page on github.  Have fun!

Dygraphs

Dygraphs is another JavaScript library for charting. It provides rich tools for charting time-series data and is really powerful. If you want to use this library with R you have to install it first.

install.packages("dygraphs")
library(dygraphs)

Open a new R Markdown document (see above) and type in the following lines of code to create a JS dygraph chart with R:

```{r}
library(dygraphs)
dygraph(sunspots) %>% dyRangeSelector()
```

Sunspots is also a free dataset that comes with R. It contains monthly values of counted sunspots from 1789-1910. The function dygraph(data) creates a basic Time-Series dygraph.  You can use the pipe operator %>% to specify some further options, in this case you can include a range selector into your graph with dyRangeSelector():

Please note that this is a static image, the  interactive version is available here. For further specifications and options you can have a look at the dygraphs R webpage.

Conclusions

I hope this tutorial was useful to some of you and showed you how easy it is to create JavaScript charts with R. Just a couple of lines of code are in most cases enough to generate nice visualizations. The big plus is that you don’t have to take care of other stuff like CSS/HTML/including external files into your header etc., this is all done for you, automatically by R.

A crucial point however is, that you need the newest version of RStudio and knitR, otherwise this can result in a blank HTML output page or other error messages.

Please note that there are more JavaScript widgets available for R like: Leaflet, MetricGraphics, threeJS, DiagrammeR. I will try to cover these in upcoming posts.

Leave a comment if you have further questions!

Cheerio Martin