xxxxxxxxxx<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><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="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-responsive.no-icons.min.css" rel="stylesheet"><!-- <link rel="stylesheet" href="/css/bootstrap.min.css"> --><link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css"> <link rel="stylesheet" href="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/css/main.css"> <link rel="stylesheet" href="https://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/prettify/css/twitter-bootstrap.css" /> <script src="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> </head><body> <!--[if lt IE 7]> <p class="chromeframe">You are using an outdated browser. <a href="https://browsehappy.com/">Upgrade your browser today</a> or <a href="https://www.google.com/chromeframe/?redirect=true"> install Google Chrome Frame </a> to better experience this site. </p> <![endif]--> <!-- Ref: https://twitter.github.com/bootstrap/examples/hero.html --> <div class="container"> <p><link href='https://fonts.googleapis.com/css?family=Lora|Lato' rel='stylesheet' type='text/css'></p><p><link rel="icon" type="image/png" href="https://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='https://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 --><p><br/></p><p>There was a recent blog post by <a href="https://twitter.com/Sheri_G">Sheri Gilley</a> of <a href="https://www.revolutionanalytics.com/">Revolution Analytics</a> on <a href="https://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="https://www.r-project.org/">R</a> and <a href="https://www.revolutionanalytics.com/enterprise-deployment">Revolution R Enterprise</a>, in being able to integrate frameworks like <a href="https://rcharts.io">rCharts</a> and <a href="https://angularjs.org">AngularJS</a>. Although I haven't had the opportunity to play with <a href="https://www.revolutionanalytics.com/enterprise-deployment">DeployR</a>, I believe that along with <a href="https://www.rstudio.com/shiny/">Shiny</a> and <a href="https://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="https://angularjs.org">AngularJS</a> and <a href="https://davidwalsh.name/dat-gui">DatGUI</a> has been available in <a href="https://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="https://nvd3.org">NVD3</a> library for the chart and the <a href="https://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="https://rstudio.com/shiny">Shiny</a> or <a href="https://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="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/bootstrap.min.js"></script> <script src="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/plugins.js"></script> <script src="https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/main.js"></script> <!-- Load Javascripts for Widgets --> <!-- Google Prettify --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script> <script src='https://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> <!-- End Google Prettify --> </html> Modified http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js to a secure url
Modified http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js to a secure url
Modified http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/jquery-1.8.2.min.js to a secure url
Modified http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/bootstrap.min.js to a secure url
Modified http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/plugins.js to a secure url
Modified http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/main.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js to a secure url
Modified http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/prettify/js/lang-r.js to a secure url
https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/jquery-1.8.2.min.js
https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fdfcfd4773d48d3
https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/vendor/bootstrap.min.js
https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/plugins.js
https://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/bootstrap/js/main.js
https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js
https://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/prettify/js/lang-r.js