Interactive Visualizations in Joomla Using R
In the last five years, data visualization has moved beyond paper-ready plots and graphs to interactive visualizations that are easy and inexpensive to generate. Incorporating interactive visualizations into web sites requires more work and higher authority levels than just including a graphic, but it can be well worth the effort for some articles. The article that follows describes how to address the security and logistical issues involved in using interactive graphics on a web site. The article is divided into the following sections:
- An Example WebGL Visualization
- Configuring PHP to Increase Timeouts for Saving Very Large Articles
- Configuring Server-side Includes
- Minify HTML Files
- Gzip HTML Files
- Using Schema.org Structured Data for Interactive Graphics Search Engine Optimization (SEO)
- Google Trends
- ggvis is intended to be used within Shiny or RStudio
- Interactive heatmaps with d3heatmap
- Scatterplots with scatter3js
- Interactive linecharts with dygraph
- Spherical Network Diagram with threejs
- Network diagram using htmlwidgets
- Line charts using googleVis
An Example WebGL Visualization
Before describing how to embed interactive visualizations in a Joomla article, it is probably worth showing an example of the type of visualization that is described in the article. The visualization below shows a constrained two-product optimization problem where maximum profit is at the top of the dome. The vertical planes are constraints on maximum unit sales; when the price is too low, sales exceed production capability. The visualization was prepared in R using the rgl package for WebGL/OpenGL accelerated graphics. On desktop computers you can rotate and flip the visualization, but on most mobile devices this won’t work, as they do not have the graphics rendering hardware needed for WebGL/OpenGL.
Charts generated with rgl can be included in a Joomla article using the <iframe> method; the Sourcerer server-side include method does not work well for this package.
- Because the files are quite large, when you paste it into the Joomla (or WordPress) editor, it will probably time-out before it finishes saving the article. Saving an article with multiple visualizations will probably not work at all.
- Figure 1 shows using the Joomla Configuration panel to change the default site editor to JCE.
- Figure 2 shows the Component->JCE Editor->Global Configuration panel where you enable compression.
Configuring PHP to Increase Timeouts for Saving Very Large Articles
max_input_time PHP configuration values so that PHP won’t time out while you are saving an article. If you configure server-side includes, you do not necessarily need to do this step. Where to change these values will depend upon how your web hosting firm has set things up. You may be able to change values in
.htaccess or in a local
php.ini file–but you may have to put one in every single directory on your site. If you have Cpanel/Web Hosting Manager (WHM) access, this is by far the easiest solution. For many users, the following steps will work:
- Figure 4 shows finding the PHP info tab in the Joomla Configuration panel.
- Figure 5 shows looking up the location of the php.ini file in the Joomla Configuration panel
- Figure 6 shows the values needed for a custom php.ini file
- Figure 7 shows the Cpanel/Web Hosting Manager panel for modifying the PHP time-out values
Configuring Server-side Includes
The previous discussion shows how to set up PHP to handle pasting large files into an article; this is manageable for articles with a single interactive graphic, but is inconvenient at best, and it just does not work for articles with more than one visualization–the time required to save the article is just too long and trouble prone. Setting up server-side includes is a much more convenient way to handle multiple visualizations. To do this, you will need a Joomla extension that allows in-line embedding of PHP code. Sourcerer is one package that does this using the syntax shown in Figure 8. This is by far the easiest way to include interactive visualizations on your site. In this case, I created a directory for my interactive visualization files and then used
scp to copy the files from my desktop to the web hosting server.
You will need to modify the settings for uploading media files or get shell access and use
Minify HTML Files
.js files for interactive images are very large, you will want to minify them before you upload them to your web server so that your minify/compress extension does not have to work as hard. There are a number of tools to do this. Yui-compressor is probably the easiest to install and use, but is by no means the best at this point. There are some Perl libraries that work better, but you will need to write some code to use them. For the command below to work, you will need to create a new directory for your minified files.
sudo apt-get install yui-compressor for FILE in *.html; do yui-compressor --type js -v -o minify/$FILE $FILE; done;
For the interactive graphics in this article, only the
googleVis had any benefit from this.
Gzip HTML Files
Gzip is by far the best thing to improve performance with interactive graphics. Prior to implementing gzip, Google Page speed would not get though processing this page; with gzip, it gets a score of 68 which is great considering the size of the files. Although you can (and should) turn on the gzip/deflate modules in Apache, it is better to go ahead and gzip the interactive graphics files since they are static anyhow.
Using Schema.org Structured Data for Interactive Graphics Interactive Graphics Search Engine Optimization (SEO)
Once you have marked up the article, test the structured data for errors using Google's Structured Data Testing Tool. Google does not currently implement all of the structured data tags, but it clearly uses structured data in determining how to display search results. The Google query “bruce moore software services event educational” will bring up a list of events listed in the Selected Speeches and Presentations on this web site; another example of how this markup will help search display can be found in the query “arts district chorale events” will present a similar display.
<iframe> tag. Because this tag can be used to replace an entire browser window allowing a malicious article or comment author to impersonate your site, many sites restrict the use, but it can allow you to incorporate some visualization files that were intended to be stand-alone.
All of the R package visualizations are copied or derived from the package examples.
Google Trends is an easy way to get an understanding of the seasonality of some of the queries on your web site. This Google Trends query history for Dallas Cowboys, New York Jets, New York Giants, and New England Patriots shows strong seasonality in searches for NFL football teams.
In some circumstances it is useful to embed a Google Trends chart in your article, as shown in Figure 10. The
<iframe>; it is probably implemented this way to get around the prohibition on direct inclusion of
<iframe> in many content editors.
ggvis is intended to be used within Shiny or RStudio
The R packages ggvis is designed to be run under either RStudio or Shiny, but it can export HTML that can be included in an
<iframe> as shown in the markup in Figure 11. Figure 12 shows the R code used to create the visualization shown in Figure 13. Getting this to render outside of RStudio and Shiny is still a work in progress.
Interactive Heatmaps with d3heatmap
Heatmaps are a popular and useful visualization. Figure 14 shows the R code for the d3heatmap package used to generate the heatmap visualization in Figure 15, where you can mouse over individual tiles to see the specific data represented in the tile–a useful but not particularly flashy interactive feature. The markup for including the visualization in a Joomla article is similar to the markup shown in Figure 11.
Charts generated with d3heatmap can be included in a Joomla article using the <iframe> method; the Sourcerer server-side include method does not work well for this package.
Interactive Scatterplots with scatterplot3js
Scatterplots are probably the bread-and-butter visualization for all statistics, but it can be frustrating to try to trace back a particular plot point to a data element in the data set; you can see an outlier easily in the plot, but finding the primary key value in the dataset may take some time. The interactive features of the scatterplot3js visualization generated with the code in Figure 16 and the shown in Figure 17 make identifying outliers and understanding data much easier.
Charts generated with scatterplot3js can be included in a Joomla article using the <iframe> method; the Sourcerer server-side include method does not work well for this package.
Line charts are a standard type of chart but adding interactivity with mouse-over highlighting for detail data makes them more useful. Figure 18 shows dygraph code that generates the interactive linechart shown in Figure 19
Charts generated with dygraph can be included in a Joomla article using the <iframe> method; the Sourcerer server-side include method does not work well for this package.
Spherical Network Diagram using threejs
Network diagrams are useful for understanding complex datasets and map data. The threejs package provides a way to generate interactive network diagrams that can be manipulated in a web browser. Figure 20 shows the code used to generate the network visualization shown in Figure 21.
Charts generated with threejs can be included in a Joomla article using the <iframe> method; the Sourcerer server-side include method does not work well for this package.
Network diagrams can help to understand complex data;
Network Diagram Using htmlwidgets
Network diagrams are useful for understanding complex datasets. The htmlwidgets package provides a way to generate interactive network diagrams that can be manipulated in a web browser. Figure 22 shows the code used to generate the network visualization shown in Figure 23.
Charts generated with htmlwidgets can be included in a Joomla article using the <iframe> method; the Sourcerer server-side include method does not work well for this package.
Line Chart using GoogleVis
The Google Visualization APIs provide powerful tools for web visualizations; the googleVis package provides a way to take advantage of these tools from within R. Figure 24 shows the code used to generate the interactive line chart shown in Figure 25.
Charts generated with googleVis can be included in a Joomla article using both the Sourcerer server-side include method or the <iframe> method.