Slidify and rCharts

DVDC and SPDC Meetup

Ramnath Vaidyanathan
McGill University

Slidify helps create, customize and share, elegant, dynamic and interactive HTML5 documents using R Markdown.

Demo 1 | Create

Slidify helps create, customize and share, elegant, dynamic and interactive HTML5 documents using R Markdown.

Customization

Slidify is highly modular and attempts to achieve clean separation of content from view and behavior. There are several ways to customize a document.

  1. Frameworks
  2. Layouts
  3. Widgets

Demo 2 | Frameworks

How Slidify Works?

Journey of a Slide

Slide

--- {class: class1, bg: yellow, id: id1}

## Slide Title

Slide Contents

*** =pnotes

Some notes

Payload

$html
[1] "<h2>Slide Title</h2>\n\n<p>Slide Contents</p>\n"

$header
[1] "<h2>Slide Title</h2>"

$level
[1] "2"

$title
[1] "Slide Title"

$content
[1] "<p>Slide Contents</p>\n"

$class
[1] "class1"

$bg
[1] "yellow"

$id
[1] "id1"

$pnotes
$pnotes$html
[1] "<p>Some notes</p>\n"

$pnotes$level
[1] ""

$pnotes$title
[1] ""

$pnotes$content
[1] "<p>Some notes</p>\n"

$pnotes$name
[1] "pnotes"


$blocks
list()

Layout

<slide class="{{ slide.class }}" id="{{ slide.id }}" style="background:{{{ slide.bg }}};">
  {{# slide.header }}
  <hgroup>
    {{{ slide.header}}}
  </hgroup>
  {{/ slide.header }}
  <article data-timings="{{ slide.dt }}">
    {{{ slide.content }}}
  </article>
  <!-- Presenter Notes -->
  {{# slide.pnotes }}
  <aside class="note" id="{{ id }}">
    <section>
      {{{ html }}}
    </section>
  </aside>
  {{/ slide.pnotes }}
</slide>

Rendered

<slide class="class1" id="id1" style="background:yellow;">
  <hgroup>
    <h2>Slide Title</h2>
  </hgroup>
  <article data-timings="">
    <p>Slide Contents</p>

  </article>
  <!-- Presenter Notes -->
  <aside class="note" id="">
    <section>
      <p>Some notes</p>

    </section>
  </aside>
</slide>

Slide Title

Slide Contents

Slide Properties

Slide Properties

Variable Description
slide.title The title of the slide with no markup
slide.header The title of the slide with markup
slide.level The title header level (h1 - h6)
slide.content The contents of the slide sans header
slide.html The contents of the slide with header
slide.num The number of the slide
slide.id The id assigned to the slide
slide.class The class assigned to the slide
slide.bg The background assigned to the slide
slide.myblock The slide block named myblock
slide.blocks The slide blocks which are not named
slide.rendered The rendered slide

Slide Properties

Carousel Slide

slide

--- &carousel .span12

## Carousel


*** {class: active, img: "http://placehold.it/960x500"}

Image 1

*** {img: "http://placehold.it/960x500"}

Image 2

layout

---
layout: slide
---

{{{ slide.content }}}
<div id="{{slide.id}}-carousel" class="carousel slide {{slide.class}}">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    {{# slide.blocks }}
    <li data-target="#{{slide.id}}-carousel" data-slide-to="{{num}}" class="{{class}}"></li>
    {{/ slide.blocks }}
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    {{# slide.blocks }}
    <div class="item {{class}}">
      <img src="{{img}}" alt="{{alt}}">
      <div class="carousel-caption">{{{ content }}}</div>
    </div>
    {{/ slide.blocks }}
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#{{slide.id}}-carousel" data-slide="prev">&lsaquo;</a>
  <a class="right carousel-control" href="#{{slide.id}}-carousel" data-slide="next">&rsaquo;</a>
</div>

Carousel

Slidify helps create, customize and share, elegant, dynamic and interactive HTML5 documents using R Markdown.

Publish

Share your document easily on github, rpubs and dropbox

slidify('index.Rmd')
publish('mydeck', 'ramnathv')

Slidify helps create, customize and share, elegant, dynamic and interactive HTML5 documents using R Markdown.

Dynamic

 ## A Simple Plot

 ```{r simple-plot, fig.height = 6, fig.align = 'center', message = F}
 require(ggplot2)
 qplot(wt, mpg, data = mtcars)
 ```

 ---

 ## MotionPlot

 ```{r results = 'asis', commment = NA, message = F, echo = F}
 require(googleVis)
 M1 <- gvisMotionChart(Fruits, idvar="Fruit", timevar="Year")
 print(M1, tag = 'chart')
 ```

A Simple Plot

require(ggplot2)
qplot(wt, mpg, data = mtcars)

plot of chunk simple-plot

MotionPlot

HT to knitr and @yihui

Slidify helps create, customize and share, elegant, dynamic and interactive HTML5 documents using R Markdown.

Interactive Quiz

--- &radio  
## Interactive Quiz

What is 1 + 1?

1. 1 
2. _2_
3. 3
4. 4

*** .hint

This is a hint

*** .explanation

This is an explanation

Interactive Quiz

What is 1 + 1?

  1. 1
  2. 2
  3. 3
  4. 4

This is a hint

This is an explanation

Interactive Chart

require(rCharts)
haireye = as.data.frame(HairEyeColor)
n1 <- nPlot(Freq ~ Hair, 
  group = 'Eye',
  data = subset(haireye, Sex == 'Male'),
  type = 'multiBarChart'
)
n1$print('chart1')

Interactive Chart

Interactive Slides Demo

Interactive Visualizations

img

rCharts is an R package to create, customize and share interactive visualizations, using a lattice-like formula interface.

rCharts Demos

Basic Plot

r1 <- rPlot(mpg ~ wt | am + vs, 
  data = mtcars, 
  color = 'gear',
  type = 'point'
)
r1

Add Controls

r1$addControls("x", "wt", names(mtcars))
r1$addControls("y", "mpg", names(mtcars))
r1

Publish Chart

Credits

  1. Kenton Russel and Thomas Reinholdsson for coauthoring rCharts.
  2. Yihui Xie for knitr.
  3. Joe Cheng for Shiny.
  4. Jeffrey Horner and RStudio for Markdown.
  5. Hadley Wickham for several R packages.
  6. Authors of all the JS Libraries I have liberally used.
  7. Authors of several presentation libraries in Ruby/Python/JS.