Demonstrate your R code with an interactive, embeddable Javascript widget

There's lots of helpful advice and examples on using R around the web. But what if your visitors could execute and play with simple R examples right on the web page? This is surprisingly easy to do, thanks to a web service and an embeddable widget provided by the Sage project. There are some kinks and caveats, but I think this feature has nice potential for online use in teaching R and statistics.

(If you're reading this on R-bloggers, I recommend heading to my original post, since my examples will likely not work on R-bloggers.)

Sage is an open-source mathematics bundle that includes R, which also includes a server for evaluating code in the languages supported by Sage. What this means is that we can put a editable box on our web page, called a "compute cell", with R code that a viewer can execute and modify:

You can change this however you want, and execute and see the results by pressing the "Evaluate" button (or pressing Shift+Enter).

How about output files? The Sage server will return those as links that you can download:

Plots show up the same way:

This is a bit unfortunate. It would be nice if the R plots showed up as images without having to click a new link; it looks fairly straightforward to hack the Javascript of the widget to make this happen but I don't have the chops. When you're executing straight Sage code, instead, the images do show up.

Also, I know there's a way to make Sage remember your input from previous compute cells, but I haven't figured out how to make that happen. Update: In the comments, Alex Kramer and Jason Grout have pointed out a way to do this: specify linked : true in the call to makeSagecell. More details here.

What version of R do they have and what packages can we use?

As of this writing, it's a year out of date, but that's sure a lot better than many university computer labs. I won't look a gift horse in the mouth!

Embedding the Sage Compute Cell on your Webpage

You can find full documentation on embedding Sage compute cells here. What this won't tell you, however, is how to make the default language R.

Here's how I did it. In the header of your web page, before the CSS link, you load the relevant scripts, as suggested on the official documentation:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="http://aleph.sagemath.org/static/jquery.min.js"></script>
<script src="http://aleph.sagemath.org/static/embedded_sagecell.js"></script>

Then you need to tel the Sage server how to initialize your compute cell:

<script>
$(function () {
    sagecell.makeSagecell({inputLocation: 'div.compute-r',
                           evalButtonText: 'Evaluate',
                           defaultLanguage: "r", 
                           languages: sagecell.allLanguages});
});
</script>

Note the defaultLanguage and languages; these undocumented arguments are how you can make R the default language for the compute cell. (I found this tip here from someone who was using compute cells with GNU Octave.)

The header code makes it so that any time you use div class="compute", it will create a compute cell:

<div class="compute-r"><script type="text/x-sage">
YOUR_R_CODE_HERE
</script></div>

How do you do this in WordPress.org? I just plopped the header code into my header.php and changed my user permissions to allow me to run Javascript from within a post (see here); this is admittedly a clumsy hack, especially since there's a bunch of overhead in the Javascript that means that I'm now loading MathJax on every page on my blog.

It would be pretty straightforward to create a simple WordPress plugin to do this, if any readers are feeling especially energetic.

PS: Sage is awesome

I discovered this tool while exploring Sage itself, which is beautiful and very fun. I'm refreshing my linear algebra skills using Robert A. Beezer's wonderful online book, which uses these compute cells with Sage extensively as a teaching tool.