|
<!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'> |
|
<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$print('chart1', include_assets = TRUE, cdn = TRUE) |
|
</code></pre> |
|
|
|
<script type='text/javascript' src=http://ramnathv.github.io/rCharts/libraries/widgets/polycharts/js/polychart2.standalone.js></script> |
|
|
|
<div id = 'chart1' class = 'rChart polycharts'></div> |
|
|
|
<script type='text/javascript'> |
|
var chartParams = { |
|
"dom": "chart1", |
|
"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": "chart1" |
|
} |
|
_.each(chartParams.layers, function(el){ |
|
el.data = polyjs.data(el.data) |
|
}) |
|
var graph_chart1 = polyjs.chart(chartParams); |
|
</script> |
|
|
|
</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') |
|
cat('<style>.nvd3{height: 400px;}</style>') |
|
</code></pre> |
|
|
|
<style>.nvd3{height: 400px;}</style> |
|
|
|
<pre><code class="r">n1$print('chart2', include_assets = TRUE, cdn = TRUE) |
|
</code></pre> |
|
|
|
<p><link rel='stylesheet' href=http://nvd3.org/src/nv.d3.css></p> |
|
|
|
<script type='text/javascript' src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script> |
|
|
|
<script type='text/javascript' src=http://d3js.org/d3.v3.min.js></script> |
|
|
|
<script type='text/javascript' src=http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js></script> |
|
|
|
<script type='text/javascript' src=http://nvd3.org/lib/fisheye.js></script> |
|
|
|
<div id = 'chart2' class = 'rChart nvd3'></div> |
|
|
|
<script type='text/javascript'> |
|
$(document).ready(function(){ |
|
drawchart2() |
|
}); |
|
function drawchart2(){ |
|
var opts = { |
|
"dom": "chart2", |
|
"width": 800, |
|
"height": 400, |
|
"x": "Hair", |
|
"y": "Freq", |
|
"group": "Eye", |
|
"type": "multiBarChart", |
|
"id": "chart2" |
|
}, |
|
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> |
|
|
|
</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> |
