example1.Rmd

---
title: Slidify Playground
subtitle: Adapted from OpenCPU MarkdownApp
author: Ramnath Vaidyanathan
framework: io2012
widgets: [mathjax]
---

## Normal Distribution

The normal (or Gaussian) distribution is defined as follows:

$$latex
f(x;\mu,\sigma^2) = \frac{1}{\sigma\sqrt{2\pi}} 
e^{ -\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2 }
$$

---

## Density Plot

To generate random draws from a normal distribution we use the **rnorm** function:

```{r block1}
output <- rnorm(1000, 100, 15);
```

---

## Bell Shape

The normal distribution has the typical bell shape:

```{r block2, fig.width=8, fig.height=5}
library(ggplot2)
qplot(output)
```

---

## Kernel density estimation

We can perform density estimation on the sample:

```{r block3, fig.width=8, fig.height=5}
plot(density(output))
``` 

---

## Carl Friedrich Gauß

This little guy had something to do with it

!['Gauss'](http://goo.gl/ZwTTXv)

example2.Rmd

---
title: Slidify Playground2
subtitle: Adapted from OpenCPU MarkdownApp
author: Ramnath Vaidyanathan
framework: revealjs
widgets: [mathjax]
---
 
## Normal Distribution
 
The normal (or Gaussian) distribution is defined as follows:
 
$$latex
f(x;\mu,\sigma^2) = \frac{1}{\sigma\sqrt{2\pi}} 
e^{ -\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2 }
$$

---
 
## Density Plot
 
To generate random draws from a normal distribution we use the **rnorm** function:
 
```{r block1}
output <- rnorm(1000, 100, 15);
```

---
 
## Bell Shape
 
The normal distribution has the typical bell shape:
 
```{r block2, fig.width=8, fig.height=5}
library(ggplot2)
qplot(output)
```

---
 
## Kernel density estimation
 
We can perform density estimation on the sample:
 
```{r block3, fig.width=8, fig.height=5}
plot(density(output))
``` 

---
 
## Carl Friedrich Gauß
 
This little guy had something to do with it
 
!['Gauss'](http://goo.gl/ZwTTXv)

example3.Rmd

---
title: ImpressJS
author: Ramnath Vaidyanathan
framework: impressjs
github: {user: ramnathv, repo: slidify}
twitter: {text: "Slidify with impress.js!"}
--- .slide x:-1000 y:-1500

<q>Aren't you just **bored** with all those slides-based presentations?</q>

--- .slide x:0 y:-1500

<q>Don't you think that presentations given **in modern browsers** shouldn't **copy the limits** of 'classic' slide decks?</q>

--- .slide x:1000 y:-1500

<q>Would you like to **impress your audience** with **stunning visualization** of your talk?</q>

--- #title x:0 y:0 scale:4

<span class="try">then you should try</span>
# impress.js^*
<span class="footnote">^* no rhyme intended</span>

--- #its x:850 y:3000 rot:45 scale:5

 It's a **presentation tool** <br/>
inspired by the idea behind [prezi.com](http://prezi.com) <br/>
and based on the **power of CSS3 transforms and transitions** in modern browsers.

--- #big x:3500 y:2100 rot:180 scale:6

visualize your <b>big</b> <span class="thoughts">thoughts</span>

--- #tiny x:2825 y:2325 z:-3000 rot:300 scale:1

and **tiny** ideas

--- #ing x:3500 y:-850 rot:270 scale:6
by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas

--- #imagination x:6700 y:-300 scale:6

the only **limit** is your <b class="imagination">imagination</b>

--- #source x:6300 y:2000 rot:20 scale:4

want to know more?

<q>[use the source](http://github.com/bartaz/impress.js), Luke</q>

--- #one-more-thing x:6000 y:4000 scale:2

one more thing...

--- #its-in-3d x:6200 y:4300 z:-100 rotx:-40 roty:-10 scale:2

<span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?

<span class="footnote">* beat that, prezi ;)</span>

--- #rstats x:-1000 y:5000

```{r echo = T, eval = F}
library(ggplot2)
qplot(wt, mpg, data = mtcars)
```

--- x:-1500 y:5500

```{r echo = F, eval = T, message = F}
opts_chunk$set(fig.path = 'assets/fig/')
library(ggplot2)
qplot(wt, mpg, data = mtcars)
```

example4.Rmd

---
title: Shower Template for Slidify
author: Ramnath Vaidyanathan
framework: shower
--- .cover #Cover

# Shower Presentation Template

![cover](http://shwr.me/pictures/cover.jpg)

---

## Header

This `<tool>` is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser.

[This link will be opened in the new tab](index/example.html)

---

## Two rows.<br/> Mighty heading

This `<tool>` is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser.

---

## Unordered List

- This tool is provided
- Without warranty, guarantee
- Or much in the way of explanation
  1. Note that use of this tool
  2. May or may not crash your browser
  3. Lock up your machine
- Erase your hard drive.

---

## Ordered List

1. This tool is provided
2. Without warranty, guarantee
3. Or much in the way of explanation
   - Note that use of this tool
   - May or may not crash your browser
   - Lock up your machine
4. Erase your hard drive.

--- .cover #FitToHeight

## Fit to Height

![height](http://shwr.me/pictures/cover.jpg)

--- .cover .w #FitToWidth

## Fit to Width

![width](http://shwr.me/pictures/cover.jpg)

---

## Code Sample

```r
library(ggplot2)
qplot(wt, mpg, data = mtcars)
```

--- .shout #warning

## Warning

--- .shout #demo

## [Demo](examples/index.html) 

--- #blockquote

## Block Quote

> This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.

---

## Shower Presentation Template

Author: Vadim Makeev, Opera Software <br/>
Modified: Ramnath Vaidyanthan, for [Slidify](http://ramnathv.github.com/slidify)

example5.Rmd

---
title: DeckJS
author: Ramnath Vaidyanathan
framework: deckjs
deckjs: {theme: web-2.0}
highlighter: highlight.js
hitheme    : solarized_light
---

# Getting Started with deck.js

---

## How to Make a Deck

1. <h3>Write Slides</h3>
   Slide content is simple HTML.
2. <h3>Choose Themes</h3>
   One for slide styles and one for deck transitions.
3. <h3>Include Extensions</h3>
   Add extra functionality to your deck, or leave it stripped down.

---

## Slides are just HTML elements with a class of slide.

```html
<section class="slide">
  <h2>How to Make a Deck</h2>
  <ol>
    <li>
      <h3>Write Slides</h3>
      <p>Slide content is simple HTML.</p>
    </li>
    <li>
      <h3>Choose Themes</h3>
      <p>One for slide styles and one for deck transitions.</p>
    </li>
    …
  </ol>
</section>
```

---

## Style Themes

Customizes the colors, typography, and layout of slide content.

```html
<link rel="stylesheet" href="/path/to/css/style-theme.css">
```

## Transition Themes

Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But you aren’t using those browsers to give your presentations, are you…

```html
<link rel="stylesheet" href="/path/to/css/transition-theme.css">
```

---

## Extensions

Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:

> - deck.goto: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.
> - deck.hash: Enables internal linking within slides, deep linking to individual slides, and updates the address bar & a permalink anchor with each slide change.
> - deck.menu: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view. Touch devices can double-tap the deck to switch between views.
> - deck.navigation: Adds clickable left and right buttons for the less keyboard inclined.
> - deck.status: Adds a page number indicator. (current/total)

<p class='slide'>Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the documentation.</p>

---

## Images

![Kitties](http://placekitten.com/600/375)

```markdown
![Kitties](http://placekitten.com/600/375)
```

---

## Block Quotes

> Food is an important part of a balanced diet

> <cite>Fran Lebowitz</cite>

```
> Food is an important part of a balanced diet

> <cite>Fran Lebowitz</cite>
```

---

## Video Embeds

Embed videos from your favorite online video service or with an HTML5 video element

<iframe width="400" height="225" frameborder="0"
  src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" >
</iframe>

```html
<iframe width="400" height="225" frameborder="0"
  src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" >
</iframe>

example6.Rmd

---
title: rCharts NVD3 Tutorial
author: Ramnath Vaidyanathan
date: "2014-01-14"
framework: bootstrap
hitheme: twitter-bootstrap
highlighter: prettify
---

## NVD3 Plots using rCharts

This is a short tutorial on how to use NVD3 with rCharts. The source for this tutorial can be found [here](https://gist.github.com/ramnathv/8070363#file-example6-rmd)

```{r setup, tidy = F, cache = F, echo = F}
library(rCharts)
options(
  rcharts.mode = 'iframesrc', 
  rcharts.cdn = TRUE,
  RCHART_WIDTH = 700,
  RCHART_HEIGHT = 400
)
library(knitr)
opts_chunk$set(tidy = F, results = 'asis', comment = NA)
```


### Scatter Chart

```{r}
p1 <- nPlot(mpg ~ wt, group = 'cyl', data = mtcars, type = 'scatterChart')
p1$xAxis(axisLabel = 'Weight')
p1
```


### Multibar Chart

```{r}
hair_eye = as.data.frame(HairEyeColor)
p2 <- nPlot(Freq ~ Hair, group = 'Eye', 
  data = subset(hair_eye, Sex == "Female"), 
  type = 'multiBarChart'
)
p2$chart(color = c('brown', 'blue', '#594c26', 'green'))
p2
```


### Multibar Horizontal Chart

```{r}
p3 <- nPlot(~ cyl, group = 'gear', data = mtcars, type = 'multiBarHorizontalChart')
p3$chart(showControls = F)
p3
```

### Pie Chart

```{r}
p4 <- nPlot(~ cyl, data = mtcars, type = 'pieChart')
p4
```

### Donut Chart

```{r}
p5 <- nPlot(~ cyl, data = mtcars, type = 'pieChart')
p5$chart(donut = TRUE)
p5
```

### Line Chart

```{r}
data(economics, package = 'ggplot2')
p6 <- nPlot(uempmed ~ date, data = economics, type = 'lineChart')
p6
```

### Line with Focus Chart

```{r}
ecm <- reshape2::melt(
  economics[,c('date', 'uempmed', 'psavert')], 
  id = 'date'
)
p7 <- nPlot(value ~ date, group = 'variable', 
  data = ecm, 
  type = 'lineWithFocusChart'
)
p7
```

### Stacked Area Chart

```{r}
dat <- data.frame(
  t = rep(0:23, each = 4), 
  var = rep(LETTERS[1:4], 4), 
  val = round(runif(4*24,0,50))
)
p8 <- nPlot(val ~ t, group =  'var', data = dat, 
 type = 'stackedAreaChart', id = 'chart'
)
p8
```

### Multi Chart

```{r}
p12 <- nPlot(value ~ date, group = 'variable', data = ecm, type = 'multiChart')
p12$set(multi = list(
  uempmed = list(type="area", yAxis=1),
  psavert = list(type="line", yAxis=2)
))
p12$setTemplate(script = system.file(
  "/libraries/nvd3/layouts/multiChart.html",
  package = "rCharts"
))
p12
```

examples.json

[
  {"title": "Example 1: Google IO 2012", "file": "example1.Rmd"},
  {"title": "Example 2: Revealjs", "file": "example2.Rmd"},
  {"title": "Example 3: ImpressJS", "file": "example3.Rmd"},
  {"title": "Example 4: Shower", "file": "example4.Rmd"},
  {"title": "Example 5: DeckJS", "file": "example5.Rmd"},
  {"title": "Example 6: NVD3 Plots using rCharts", "file": "example6.Rmd"}
]