Interactive dashboards with R
Build on Flexdashboard, Crossover and htmlwidgets
Dashboards in R
Dashboards provide a great way to communicate information and insights about a particular set of data, or combination of data sets. Within the R ecosystem, there are various tools to build interactive dashboards. If your dashboards needs to automatically update with real-time data, there is Shinydashboard, a R package that makes it very easy to build interactive and dynamic dashboards straight from R. In order to deploy the dashboard, you’ll need to set up a Shiny server or Shinyproxy. Alternatively, you can sign up for Shinyapps.io.
The need for a back-end database setup, and the costs involved, may be an impediment to the deployment of a dashboard. You should therefore always ask yourself; is the information / data I want to show going to be updated regularly? Is it important to provide the information in real time? If the answer is no, I would suggest you have a look at the flexdashboard package. With this R package, you can use R Markdown to create and publish dashboards using various flexible column and row-based layouts.
The great advantage is that these dashboards can be served from any web server, without any special requirement of heavy data-base back-ends. Which doesn’t mean you can only make static dashboards. Thanks to the R htmlwidgets packages you can embed interactive graphs, maps and tables, while the crossover let’s these widgets ‘talk’ to each other, providing cross-widget interactions.
The examples on the flexdashboard and Crossover websites show that it is really easy to set up a basic dashboard. But how difficult is it to set up a dashboard with various widgets (maps, graphs, tables) and link these all together? I decided to give it a try, creating a dashboard that shows the data and results of a project carried out by second-year students of the Applied Geo-information Science (formally Geo Media & Design) program.
Schijndel forest garden
The students carried out fieldwork in a forest garden in Schijndel, a small town in the south of the Netherlands. The forest garden was established two years ago, as a collaborative effort of the Dutch Forest Garden Foundation (Stichting Voedselbosbouw Nederland, the Green Development Fund Brabant and the HAS University of Applied Sciences). The students collected soil samples and carried analysis in the laboratory to measure the pH, organic matter content,and loam, among others. They used this data to create distribution maps of these soil characteristics using different interpolation techniques.
The idea was to provide the results in the form of a dashboard rather than the usual report. The work is part of a monitoring project, so the fieldwork will be repeated yearly. But at such a low frequency, it isn’t really worth it building a dynamic dashboard. Which is why I decided to use Flexdashboard in combination with Crosstalk to create an interactive dashboard. Below you’ll see a screenshot of the end result. You can click here to open the dashboard itself. The dashboard is in Dutch, sorry about that, but hopefully it will give you an idea what is possible using this setup. If you want to see how the dashboard was created, you can check out the code by clicking on the source code button in the upper right corner.
The dashboard has four different tabs. The first provides an introduction and a leaflet map showing the interpolation maps (created in QGIS) of four different soil characteristics. The second tab (shown below) provides more insights in the distribution of the values of the four variables, and allows one to compare the measured and interpolated values. The third tab shows a table with the field data, and various ways to select data points (on the map, in the table or using sliders). The widgets are linked, so selecting data in one widget selects the same data points in the other widgets (linked brushing and filtering). Finally, the fourth tab provides a number of slides explaining the information and different options offered by the dashboard.
Disclaimer and caveats
One important disclaimer; the development of this dashboard was mostly about exploring what widgets can be combined in what way, and less on the needs of the end-user. Not really the way one should develop an app. On the other hand, as a developer (which I am not anyway) it is good to know the possibilities and limits of your tools of course.
And talking about limitations, it is important to realize that Crosstalk, the library which makes it possible to link different HTML widgets, has some limitations. It only works for linked brushing and filtering of views that show individual data points, not aggregate or summary views. That means that for example histograms are not supported since each bar represents multiple data points (that is why the histograms in the second tab are not linked to the map).
Another limitation one should be aware of is that not all HTML widget packages support Crosstalk yet. If your favorite widget does not, you will need to check with the author of the package whether there is any interest in providing support in the future. Or you can try to add it yourself. This document will help you get started.
Also, when making a dashboard, be aware that all data used in the dashboard will be loaded into the browser. This makes Crosstalk less suitable for large data sets. There are of course ways to work around this limitation. For example, the maps on the first tab were saved as MBTiles (see here for a tutorial) and served using Tileserver-php. But that means some extra demands on the setup on the server side.
The Flexdashboard package offers various themes to modify the base appearance of flexdashboard. You can further customize the appearance of your dashboard by including a stylesheet via the css option. But, as is stated on the website, you should realize that themes define colors for many elements and states, so you should be careful to override all of the required elements. I managed to change the appearance to my likening (sort of), but I had to resort to some trial and error to manage to do so.