index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Interactive Controls and rCharts</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="favicon.ico">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-responsive.no-icons.min.css" rel="stylesheet">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/css/main.css">
<link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/prettify/css/twitter-bootstrap.css" />
<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
</head>
<body>
<div class="container">
<p><link href='//fonts.googleapis.com/css?family=Lora|Lato' rel='stylesheet' type='text/css'></p>
<p><link rel="icon"
type="image/png"
href="//rcharts.io/img/slidify_logo_notext.png"></p>
<style>
.container {
width: 1000px;
}
p {
font-family: "Lora";
font-size: 15px;
line-height: 24px;
text-align: justify;
}
h2 {
font-family: "Lato"
}
</style>
<h2>Interactive Controls and rCharts</h2>
<p id='author' class='text-muted'>by <a href='//twitter.com/ramnath_vaidya'>Ramnath Vaidyanathan</a>, Dec 25, 2013</p>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fdfcfd4773d48d3"></script>
<p><br/></p>
<p>There was a recent blog post by <a href="https://twitter.com/Sheri_G">Sheri Gilley</a> of <a href="//www.revolutionanalytics.com/">Revolution Analytics</a> on <a href="//blog.revolutionanalytics.com/2013/12/combining-the-power-of-deployr-rcharts-and-angularjs.html">Combining the Power of DeployR, rCharts, and AngularJS</a>. It is a very cool application that showcases the power of <a href="//www.r-project.org/">R</a> and <a href="//www.revolutionanalytics.com/enterprise-deployment">Revolution R Enterprise</a>, in being able to integrate frameworks like <a href="//rcharts.io">rCharts</a> and <a href="//angularjs.org">AngularJS</a>. Although I haven't had the opportunity to play with <a href="//www.revolutionanalytics.com/enterprise-deployment">DeployR</a>, I believe that along with <a href="//www.rstudio.com/shiny/">Shiny</a> and <a href="//opencpu.org">OpenCPU</a>, it presents a bright future for building and deploying interactive R applications on the web.</p>
<p>Now, what some of you may not know is that integration of simple interactive controls using <a href="//angularjs.org">AngularJS</a> and <a href="//davidwalsh.name/dat-gui">DatGUI</a> has been available in <a href="//rcharts.io">rCharts</a> for quite some time now. The nice thing about using a framework like AngularJS is that a lot of the interactivity can be handled on the client side with minimal amount of code, after the chart has been created from R.</p>
<p>Let us start by creating a simple scatterplot of mileage vs weight of cars from the ubiquitous <code>mtcars</code> dataset.</p>
<pre><code class="r">library(rCharts)
n1 <- rPlot(mpg ~ wt, data = mtcars, color = "gear", type = "point")
n1
</code></pre>
<iframe src='
chart1.html
' scrolling='no' seamless></iframe>
<style>iframe{ width: 100%; height: 400px;}</style>
<p>Suppose, we want to let the user choose the <code>x</code>, <code>y</code> and <code>color</code> variables interactively. This can be done using the <code>addControls</code> method, which accepts three arguments: (1) the variable to control, (2) it's current value and (3) the possible set of values to choose from. By default, <code>addControls</code> uses AngularJS to add the controls.</p>
<pre><code class="r">n1$addControls("x", value = "wt", values = names(mtcars))
n1$addControls("y", value = "wt", values = names(mtcars))
n1$addControls("color", value = "gear", values = names(mtcars))
n1
</code></pre>
<iframe src='
chart2.html
' scrolling='no' seamless></iframe>
<style>iframe{ width: 100%; height: 400px;}</style>
<p>See how a few lines of R code can result in a nice visualization with interactive controls. Cool, right!</p>
<p>Let us build another chart with interactive controls, this time using the <a href="//nvd3.org">NVD3</a> library for the chart and the <a href="//davidwalsh.name/dat-gui">DatGUI</a> javascript library for interactive controls. As before, the code stays almost the same, except that we swap the controls template to use <code>datgui</code> instead of <code>angularjs</code>.</p>
<pre><code class="r">HairEye <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Eye, data = HairEye, group = 'Hair', type = 'multiBarChart')
n1$addControls("type", "multiBarChart",
values = c('multiBarChart', 'multiBarHorizontalChart')
)
n1$setTemplate(script = system.file('libraries', 'nvd3', 'controls', 'datgui.html', package = 'rCharts'))
n1$set(width = 650)
n1
</code></pre>
<iframe src='
chart3.html
' scrolling='no' seamless></iframe>
<style>iframe{ width: 100%; height: 400px;}</style>
<p>Currently, rCharts only supports simple controls, and my plan is to extend this support. In my next post, I will discuss how rCharts can integrate with a server side framework like <a href="//rstudio.com/shiny">Shiny</a> or <a href="//opencpu.org">OpenCPU</a> to allow for greater level of interactivity, that might involve more extensive manipulation of data.</p>
<p><a href="https://gist.github.com/ramnathv/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a></p>
</div>
</body>
<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/bootstrap.min.js"></script>
<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/plugins.js"></script>
<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
<script src='//slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/prettify/js/lang-r.js'></script>
<script>
var pres = document.getElementsByTagName("pre");
for (var i=0; i < pres.length; ++i) {
pres[i].className = "prettyprint linenums";
}
prettyPrint();
</script>
</html>
index.Rmd
---
title: Interactive Controls and rCharts
framework: bootstrap
hitheme: twitter-bootstrap
highlighter: prettify
mode: standalone
---
<link href='http://fonts.googleapis.com/css?family=Lora|Lato' rel='stylesheet' type='text/css'>
<link rel="icon"
type="image/png"
href="http://rcharts.io/img/slidify_logo_notext.png">
<style>
.container {
width: 1000px;
}
p {
font-family: "Lora";
font-size: 15px;
line-height: 24px;
text-align: justify;
}
h2 {
font-family: "Lato"
}
</style>
## Interactive Controls and rCharts
<p id='author' class='text-muted'>by <a href='http://twitter.com/ramnath_vaidya'>Ramnath Vaidyanathan</a>, Dec 25, 2013</p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fdfcfd4773d48d3"></script>
<!-- AddThis Button END -->
<br/>
There was a recent blog post by [Sheri Gilley](https://twitter.com/Sheri_G) of [Revolution Analytics](http://www.revolutionanalytics.com/) on [Combining the Power of DeployR, rCharts, and AngularJS](http://blog.revolutionanalytics.com/2013/12/combining-the-power-of-deployr-rcharts-and-angularjs.html). It is a very cool application that showcases the power of [R](http://www.r-project.org/) and [Revolution R Enterprise](http://www.revolutionanalytics.com/enterprise-deployment), in being able to integrate frameworks like [rCharts](http://rcharts.io) and [AngularJS](http://angularjs.org). Although I haven't had the opportunity to play with [DeployR](http://www.revolutionanalytics.com/enterprise-deployment), I believe that along with [Shiny](http://www.rstudio.com/shiny/) and [OpenCPU](http://opencpu.org), it presents a bright future for building and deploying interactive R applications on the web.
Now, what some of you may not know is that integration of simple interactive controls using [AngularJS](http://angularjs.org) and [DatGUI](http://davidwalsh.name/dat-gui) has been available in [rCharts](http://rcharts.io) for quite some time now. The nice thing about using a framework like AngularJS is that a lot of the interactivity can be handled on the client side with minimal amount of code, after the chart has been created from R.
Let us start by creating a simple scatterplot of mileage vs weight of cars from the ubiquitous `mtcars` dataset.
```{r setup, echo = F, results = 'asis', cache = F}
library(knitr)
opts_chunk$set(tidy = F, comment = NA, results = 'asis', fig.path = "")
options(rcharts.mode = 'iframe', rcharts.cdn = TRUE)
```
```{r chart1}
library(rCharts)
n1 <- rPlot(mpg ~ wt, data = mtcars, color = "gear", type = "point")
n1
```
Suppose, we want to let the user choose the `x`, `y` and `color` variables interactively. This can be done using the `addControls` method, which accepts three arguments: (1) the variable to control, (2) it's current value and (3) the possible set of values to choose from. By default, `addControls` uses AngularJS to add the controls.
```{r chart2}
n1$addControls("x", value = "wt", values = names(mtcars))
n1$addControls("y", value = "wt", values = names(mtcars))
n1$addControls("color", value = "gear", values = names(mtcars))
n1
```
Let us build another chart with interactive controls, this time using the [NVD3](http://nvd3.org) library for the chart and the [DatGUI](http://davidwalsh.name/dat-gui) javascript library for interactive controls. As before, the code stays almost the same, except that we swap the controls template to use `datgui` instead of `angularjs`.
```{r chart3}
HairEye <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Eye, data = HairEye, group = 'Hair', type = 'multiBarChart')
n1$addControls("type", "multiBarChart",
values = c('multiBarChart', 'multiBarHorizontalChart')
)
n1$setTemplate(script = system.file('libraries', 'nvd3', 'controls', 'datgui.html', package = 'rCharts'))
n1$set(width = 650)
n1
```
Currently, rCharts only supports simple controls, and my plan is to extend this support. In my next post, I will discuss how rCharts can integrate with a server side framework like [Shiny](http://rstudio.com/shiny) or [OpenCPU](http://opencpu.org) to allow for greater level of interactivity, that might involve more extensive manipulation of data.
<a href="https://gist.github.com/ramnathv/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
index.md
---
title: Interactive Controls and rCharts
framework: bootstrap
hitheme: twitter-bootstrap
highlighter: prettify
mode: standalone
---
<link href='http://fonts.googleapis.com/css?family=Lora|Lato' rel='stylesheet' type='text/css'>
<link rel="icon"
type="image/png"
href="http://rcharts.io/img/slidify_logo_notext.png">
<style>
.container {
width: 1000px;
}
p {
font-family: "Lora";
font-size: 15px;
line-height: 24px;
text-align: justify;
}
h2 {
font-family: "Lato"
}
</style>
## Interactive Controls and rCharts
<p id='author' class='text-muted'>by <a href='http://twitter.com/ramnath_vaidya'>Ramnath Vaidyanathan</a>, Dec 25, 2013</p>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fdfcfd4773d48d3"></script>
<br/>
There was a recent blog post by [Sheri Gilley](https://twitter.com/Sheri_G) of [Revolution Analytics](http://www.revolutionanalytics.com/) on [Combining the Power of DeployR, rCharts, and AngularJS](http://blog.revolutionanalytics.com/2013/12/combining-the-power-of-deployr-rcharts-and-angularjs.html). It is a very cool application that showcases the power of [R](http://www.r-project.org/) and [Revolution R Enterprise](http://www.revolutionanalytics.com/enterprise-deployment), in being able to integrate frameworks like [rCharts](http://rcharts.io) and [AngularJS](http://angularjs.org). Although I haven't had the opportunity to play with [DeployR](http://www.revolutionanalytics.com/enterprise-deployment), I believe that along with [Shiny](http://www.rstudio.com/shiny/) and [OpenCPU](http://opencpu.org), it presents a bright future for building and deploying interactive R applications on the web.
Now, what some of you may not know is that integration of simple interactive controls using [AngularJS](http://angularjs.org) and [DatGUI](http://davidwalsh.name/dat-gui) has been available in [rCharts](http://rcharts.io) for quite some time now. The nice thing about using a framework like AngularJS is that a lot of the interactivity can be handled on the client side with minimal amount of code, after the chart has been created from R.
Let us start by creating a simple scatterplot of mileage vs weight of cars from the ubiquitous `mtcars` dataset.
```r
library(rCharts)
n1 <- rPlot(mpg ~ wt, data = mtcars, color = "gear", type = "point")
n1
```
<iframe src='
chart1.html
' scrolling='no' seamless></iframe>
<style>iframe{ width: 100%; height: 400px;}</style>
Suppose, we want to let the user choose the `x`, `y` and `color` variables interactively. This can be done using the `addControls` method, which accepts three arguments: (1) the variable to control, (2) it's current value and (3) the possible set of values to choose from. By default, `addControls` uses AngularJS to add the controls.
```r
n1$addControls("x", value = "wt", values = names(mtcars))
n1$addControls("y", value = "wt", values = names(mtcars))
n1$addControls("color", value = "gear", values = names(mtcars))
n1
```
<iframe src='
chart2.html
' scrolling='no' seamless></iframe>
<style>iframe{ width: 100%; height: 400px;}</style>
See how a few lines of R code can result in a nice visualization with interactive controls. Cool, right!
Let us build another chart with interactive controls, this time using the [NVD3](http://nvd3.org) library for the chart and the [DatGUI](http://davidwalsh.name/dat-gui) javascript library for interactive controls. As before, the code stays almost the same, except that we swap the controls template to use `datgui` instead of `angularjs`.
```r
HairEye <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Eye, data = HairEye, group = 'Hair', type = 'multiBarChart')
n1$addControls("type", "multiBarChart",
values = c('multiBarChart', 'multiBarHorizontalChart')
)
n1$setTemplate(script = system.file('libraries', 'nvd3', 'controls', 'datgui.html', package = 'rCharts'))
n1$set(width = 650)
n1
```
<iframe src='
chart3.html
' scrolling='no' seamless></iframe>
<style>iframe{ width: 100%; height: 400px;}</style>
Currently, rCharts only supports simple controls, and my plan is to extend this support. In my next post, I will discuss how rCharts can integrate with a server side framework like [Shiny](http://rstudio.com/shiny) or [OpenCPU](http://opencpu.org) to allow for greater level of interactivity, that might involve more extensive manipulation of data.
<a href="https://gist.github.com/ramnathv/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>