Musings on R

Using Interactive D3.js charts from within Tiki with rNVD3

Published by Xavier de Pedro on 2013-05-10 Xavi

I've recently managed to reproduce my first charts using the nice package rNVD3 from Ramnath Vaidyanathan:

This rNVD3 package uses NVD3, which provides re-usable charts with d3.js, without taking away the power that d3.js brings with itself. But let's make a "Hello world" type of example, with the minimum complexity in it.

For this, I just needed to copy one of Ramnath's examples, but I will save the html to disk, with something like object$save('foo.html') instead of object$printChart('foo.html'). used in his example

And then, you can load the html in a wiki page with an iframe. Easy.

Proof of concept

A working proof-of-concept reusing your rNVD3 package can be found here:

The main code is this one:

# Testing https://github.com/ramnathv/rNVD3 
if(!require(rjson)){ install.packages("rjson", repos="http://ftp.heanet.ie/mirrors/cran.r-project.org/") }
if(!require(plyr)){ install.packages("plyr", repos="http://ftp.heanet.ie/mirrors/cran.r-project.org/") }
require('rjson', quietly = TRUE);
require('plyr', quietly = TRUE);

if(!require(devtools)){ install.packages("devtools", repos="http://ftp.heanet.ie/mirrors/cran.r-project.org/") }
require('devtools', quietly = TRUE);
if(!require(rNVD3)){ install_github('rNVD3', 'ramnathv') }
require('rNVD3', quietly = TRUE);

hair_eye = subset(as.data.frame(HairEyeColor), Sex == "Female")
p1 <- nvd3Plot(Freq ~ Hair | Eye, data = hair_eye, type = 'multiBarChart')
p1$chart(color = c('brown', 'blue', '#594c26', 'green'))

{iframe name="haireye_rNVD3" title="Interactive Charts" width="100%" height="800px" align="middle" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src="haireye.html"}


And once everything is ready in your system (all packages installed, etc), you'll see something like this:

Click to enlarge
Click to enlarge

And when you change from "Grouped display" to "Stacked display", you will see a transition of data changing from one display to the other in real time in your browser, ending with this:

Click to enlarge
Click to enlarge


The Web platform to manage the whole thing is Tiki ( https://tiki.org ), and the communication with R is handled by PluginR ( https://doc.tiki.org/PluginR ), as usual with most of our work.

This example has been added as a new test (r_test7) in the Tiki configuration profile http://profiles.tiki.org/r_test . Therefore, when you apply ( ~ install) this profile in your Tiki, you'll have this whole test loaded in a new wiki page, handy for you to play with it.

Future work

For later I leave my goal to achieve running some shiny app from a Wiki page in Tiki (in case this is possible!, which I'm not sure yet, maybe some new development is needed)

First impressions

For the time being, I'm quite glad with the first impression by the rNVD3 author (Ramnath Vaidyanathan) when he first knew about this proof-of-concept a few hours ago:

Ramnath Vaidyanathan wrote:
First off, nice work embedding it in a Wiki. A key objective of rCharts is to make it easy to share charts and this is a great way to do it.

Oh well, thanks for you nice words. Some more work is in the oven with PluginR, so stay tuned! :-)