| <!doctype HTML> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <script src='http://ramnathv.github.io/rCharts/libraries/widgets/polycharts/js/polychart2.standalone.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='chart349d76a70968' class='rChart polycharts'></div> | |
| <script type='text/javascript'> | |
| var chartParams = { | |
| "dom": "chart349d76a70968", | |
| "width": 800, | |
| "height": 400, | |
| "layers": [ | |
| { | |
| "x": "wt", | |
| "y": "mpg", | |
| "data": { | |
| "mpg": [ 21, 21, 22.8, 21.4, 18.7, 18.1, 14.3, 24.4, 22.8, 19.2, 17.8, 16.4, 17.3, 15.2, 10.4, 10.4, 14.7, 32.4, 30.4, 33.9, 21.5, 15.5, 15.2, 13.3, 19.2, 27.3, 26, 30.4, 15.8, 19.7, 15, 21.4 ], | |
| "cyl": [ 6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8, 8, 8, 8, 4, 4, 4, 8, 6, 8, 4 ], | |
| "disp": [ 160, 160, 108, 258, 360, 225, 360, 146.7, 140.8, 167.6, 167.6, 275.8, 275.8, 275.8, 472, 460, 440, 78.7, 75.7, 71.1, 120.1, 318, 304, 350, 400, 79, 120.3, 95.1, 351, 145, 301, 121 ], | |
| "hp": [ 110, 110, 93, 110, 175, 105, 245, 62, 95, 123, 123, 180, 180, 180, 205, 215, 230, 66, 52, 65, 97, 150, 150, 245, 175, 66, 91, 113, 264, 175, 335, 109 ], | |
| "drat": [ 3.9, 3.9, 3.85, 3.08, 3.15, 2.76, 3.21, 3.69, 3.92, 3.92, 3.92, 3.07, 3.07, 3.07, 2.93, 3, 3.23, 4.08, 4.93, 4.22, 3.7, 2.76, 3.15, 3.73, 3.08, 4.08, 4.43, 3.77, 4.22, 3.62, 3.54, 4.11 ], | |
| "wt": [ 2.62, 2.875, 2.32, 3.215, 3.44, 3.46, 3.57, 3.19, 3.15, 3.44, 3.44, 4.07, 3.73, 3.78, 5.25, 5.424, 5.345, 2.2, 1.615, 1.835, 2.465, 3.52, 3.435, 3.84, 3.845, 1.935, 2.14, 1.513, 3.17, 2.77, 3.57, 2.78 ], | |
| "qsec": [ 16.46, 17.02, 18.61, 19.44, 17.02, 20.22, 15.84, 20, 22.9, 18.3, 18.9, 17.4, 17.6, 18, 17.98, 17.82, 17.42, 19.47, 18.52, 19.9, 20.01, 16.87, 17.3, 15.41, 17.05, 18.9, 16.7, 16.9, 14.5, 15.5, 14.6, 18.6 ], | |
| "vs": [ 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1 ], | |
| "am": [ 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1 ], | |
| "gear": [ 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 5, 5, 5, 5, 5, 4 ], | |
| "carb": [ 4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2, 2, 4, 2, 1, 2, 2, 4, 6, 8, 2 ] | |
| }, | |
| "facet": "gear", | |
| "type": "point" | |
| } | |
| ], | |
| "facet": { | |
| "type": "wrap", | |
| "var": "gear" | |
| }, | |
| "guides": [], | |
| "coord": [], | |
| "id": "chart349d76a70968" | |
| } | |
| _.each(chartParams.layers, function(el){ | |
| el.data = polyjs.data(el.data) | |
| }) | |
| var graph_chart349d76a70968 = polyjs.chart(chartParams); | |
| </script> | |
| </body> | |
| </html> |
| <!doctype HTML> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'> | |
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> | |
| <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
| <script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script> | |
| <script src='http://nvd3.org/lib/fisheye.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='chart349d77ece1fb' class='rChart nvd3'></div> | |
| <script type='text/javascript'> | |
| $(document).ready(function(){ | |
| drawchart349d77ece1fb() | |
| }); | |
| function drawchart349d77ece1fb(){ | |
| var opts = { | |
| "dom": "chart349d77ece1fb", | |
| "width": 800, | |
| "height": 400, | |
| "x": "Hair", | |
| "y": "Freq", | |
| "group": "Eye", | |
| "type": "multiBarChart", | |
| "id": "chart349d77ece1fb" | |
| }, | |
| data = [ | |
| { | |
| "Hair": "Black", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 32 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 53 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 10 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 3 | |
| }, | |
| { | |
| "Hair": "Black", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 11 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 50 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 10 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 30 | |
| }, | |
| { | |
| "Hair": "Black", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 10 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 25 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 7 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 5 | |
| }, | |
| { | |
| "Hair": "Black", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 3 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 15 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 7 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 8 | |
| } | |
| ] | |
| if(!(opts.type==="pieChart" || opts.type==="sparklinePlus")) { | |
| var data = d3.nest() | |
| .key(function(d){ | |
| //return opts.group === undefined ? 'main' : d[opts.group] | |
| //instead of main would think a better default is opts.x | |
| return opts.group === undefined ? opts.y : d[opts.group]; | |
| }) | |
| .entries(data); | |
| } | |
| if (opts.disabled != undefined){ | |
| data.map(function(d, i){ | |
| d.disabled = opts.disabled[i] | |
| }) | |
| } | |
| nv.addGraph(function() { | |
| var chart = nv.models[opts.type]() | |
| .x(function(d) { return d[opts.x] }) | |
| .y(function(d) { return d[opts.y] }) | |
| .width(opts.width) | |
| .height(opts.height) | |
| d3.select("#" + opts.id) | |
| .append('svg') | |
| .datum(data) | |
| .transition().duration(500) | |
| .call(chart); | |
| nv.utils.windowResize(chart.update); | |
| return chart; | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>rCharts with Slidify</title> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Ramnath Vaidyanathan"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/css/reveal.min.css"> | |
| <link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/css/theme/solarized.css" id="theme"> | |
| <link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/css/tomorrow.css" id="theme"> | |
| <!--[if lt IE 9]> | |
| <script src="lib/js/html5shiv.js"></script> | |
| <![endif]--> <link rel="stylesheet" href = "assets/css/ribbons.css"> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <div class="slides"> | |
| <section class='' data-state='' id='slide-1'> | |
| <style> | |
| iframe { | |
| width: 1600px; | |
| height: 1200px; | |
| } | |
| </style> | |
| <h2>rCharts with Slidify</h2> | |
| </section> | |
| <section class='class' data-state='' id='id'> | |
| <h2>rPlot</h2> | |
| <pre><code class="r">library(rCharts) | |
| r1 <- rPlot(mpg ~ wt | gear, data = mtcars, type = 'point') | |
| r1 | |
| </code></pre> | |
| <iframe src=chart1.html seamless></iframe> | |
| </section> | |
| <section class='' data-state='' id='slide-3'> | |
| <h2>nPlot</h2> | |
| <pre><code class="r">hair_eye_male = subset(as.data.frame(HairEyeColor), Sex == "Male") | |
| n1 <- nPlot(Freq ~ Hair, group = 'Eye', | |
| data = hair_eye_male, type = 'multiBarChart') | |
| n1 | |
| </code></pre> | |
| <iframe src=chart2.html seamless></iframe> | |
| </section> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/lib/js/head.min.js"></script> | |
| <script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/js/reveal.min.js"></script> | |
| <script> | |
| // Full list of configuration options available here: | |
| // https://github.com/hakimel/reveal.js#configuration | |
| Reveal.initialize({ | |
| controls: true, | |
| progress: true, | |
| history: true, | |
| center: true, | |
| theme: Reveal.getQueryHash().theme || 'solarized', | |
| transition: Reveal.getQueryHash().transition || 'default', | |
| dependencies: [ | |
| // Cross-browser shim that fully implements classList - | |
| // https://github.com/eligrey/classList.js/ | |
| { src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/lib/js/classList.js', condition: function() { return !document.body.classList;}}, | |
| // Zoom in and out with Alt+click | |
| { src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, | |
| // Speaker notes | |
| { src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }, | |
| // Remote control your reveal.js presentation using a touch device | |
| //{ src: 'http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/revealjs/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } } | |
| ] | |
| }); | |
| </script> <!-- LOAD HIGHLIGHTER JS FILES --> | |
| <script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script> | |
| <script>hljs.initHighlightingOnLoad();</script> | |
| <!-- DONE LOADING HIGHLIGHTER JS FILES --> | |
| </html> |
| title | author | framework | revealjs | mode | ||
|---|---|---|---|---|---|---|
rCharts with Slidify |
Ramnath Vaidyanathan |
revealjs |
|
standalone |
--- .class #id
library(rCharts)
r1 <- rPlot(mpg ~ wt | gear, data = mtcars, type = 'point')
r1hair_eye_male = subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Hair, group = 'Eye',
data = hair_eye_male, type = 'multiBarChart')
n1| --- | |
| title : rCharts with Slidify | |
| author : Ramnath Vaidyanathan | |
| framework : revealjs | |
| revealjs : {theme: solarized} | |
| mode : standalone | |
| --- | |
| <style> | |
| iframe { | |
| width: 1600px; | |
| height: 1200px; | |
| } | |
| </style> | |
| ## rCharts with Slidify | |
| --- .class #id | |
| ## rPlot | |
| ```{r chart1, results = 'asis', comment = NA, tidy = F, fig.path = ''} | |
| library(rCharts) | |
| r1 <- rPlot(mpg ~ wt | gear, data = mtcars, type = 'point') | |
| r1 | |
| ``` | |
| --- | |
| ## nPlot | |
| ```{r chart2, results = 'asis', comment = NA, tidy = F, fig.path = ''} | |
| hair_eye_male = subset(as.data.frame(HairEyeColor), Sex == "Male") | |
| n1 <- nPlot(Freq ~ Hair, group = 'Eye', | |
| data = hair_eye_male, type = 'multiBarChart') | |
| n1 | |
| ``` | |
I have tried to replicate the example by
slidify(index.Rmd). The generatedindex.htmlcodes are not generated as the codes in this gist. Like to note that I have keptchart1.htmlandchart2.htmlin the same folder. Theindex.htmlis generating<p><iframe src=' chart1-1.html ' scrolling='no' frameBorder='0' seamless class='rChart polycharts ' id=iframe- chart2251174e468 ></iframe> <style>iframe.rChart{ width: 100%; height: 400px;}</style></p>in place of<iframe src=chart1.html seamless></iframe>.