Reproducible web documents with R, knitr & Markdown

Carson Sievert

Why use Markdown?

  • Easy to learn and use.
  • Focus on content, rather than coding and debugging errors.
  • It's flexible. Markdown was created to simplify HTML, but with the right tools, your Markdown files can easily be converted to many different formats!
  • Fastest way to internet!

What is Markdown?

  • Markdown is a particular type of markup language.
  • Markup languages are designed produce documents from plain text.
  • Some of you may be familiar with LaTeX. This is another (less human friendly) markup language for creating pdf documents.
  • LaTeX gives you much greater control, but it is restricted to pdf and has a much greater learning curve.
  • As I mentioned, there are tools (mainly pandoc) that allow you to render markdown in different formats (for example, HTML/pdf/word)

Yes, even word documents...

knitr + markdown + pandoc = rmarkdown

  • rmarkdown is a new package from RStudio that merges a lot of technologies in an exciting way.
  • In fact, in RStudio now, you integrate R code into your Markdown document and render as HTML/pdf/Word in the click of a button!

  • You can even embed your shiny apps in HTML documents generated with rmarkdown!

Some Examples

Markdown syntax

Header 1
================
Header 2
----------------
### Header 3

This is regular text.

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

Resulting HTML

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>

<p>This is regular text.</p>

<blockquote>
<p>This is a blockquote.</p>

<p>This is the second paragraph in the blockquote.</p>

<h2>This is an H2 in a blockquote</h2>
</blockquote>

Header 1

Header 2

Header 3

This is regular text.

This is a blockquote.

This is the second paragraph in the blockquote.

This is an H2 in a blockquote

Markdown syntax

Here we have an unordered list.

* Item 1
* Item 2
  * Item 2a
  * Item 2b

Here we have an ordered list

1. Item 1
2. Item 2
  * Item 2a
  * Item 2b

Resulting HTML

<p>Here we have an unordered list.</p>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul></li>
</ul>
<p>Here we have an ordered list</p>
<ol>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul></li>
</ol>

Here we have an unordered list.

  • Item 1
  • Item 2
    • Item 2a
    • Item 2b

Here we have an ordered list

  1. Item 1
  2. Item 2
    • Item 2a
    • Item 2b

Markdown syntax

What if we want to *italicize* or **bold**?

* In a list, I may want to _italicize_ or __bold__ this way.

I can also include inline `code` or 

```
blocks of code
```
Or even a [link](http://google.com)

Resulting HTML

<p>What if we want to <em>italicize</em> or <strong>bold</strong>?</p>
<ul>
<li>In a list, I may want to <em>italicize</em> or <strong>bold</strong> this way.</li>
</ul>
<p>I can also include inline <code>code</code> or </p>
<pre><code>blocks of code</code></pre>
<p>Or even a <a href="http://google.com">link</a> </p>

What if we want to italicize or bold?

  • In a list, I may want to italicize or bold this way.

I can also include inline code or

blocks of code

Or even a link

Markdown syntax

When in doubt, you can always put HTML into markdown:

<img src="http://
i.imgur.com/qM4s4rC.jpg">

I can also do fancy latex equations $\alpha = \beta$ with help from [MathJax](http://www.mathjax.org/)

Resulting HTML

<p>When in doubt, you can always put HTML into markdown:</p>

<p><img src="http://
i.imgur.com/qM4s4rC.jpg"></p>

<p>I can also do fancy latex equations \( \alpha = \beta \) with help from <a href="http://www.
mathjax.org/">MathJax</a></p>

When in doubt, you can always put HTML into markdown:

I can also do fancy latex equations \( \alpha = \beta \) with help from MathJax

RStudio + rmarkdown = awesome

For non-RStudio users...

This is an R Markdown document.

```{{r}}
summary(cars)
```

You can also embed plots, for example:

```{{r fig.width=7}}
plot(cars)
```

Save the content to the left in your working directory as “index.Rmd”. Then run the code below to replicate “knit HTML”.

library(knitr)
knit2html("index.Rmd")
browseURL("index.html")

This is actually equivalent to:

library(rmarkdown)
render("index.Rmd")
browseURL("index.html")

Custom styling...

  • It's easy to customize styling using the markdownToHTML function from the markdown package.
knit("index.Rmd") #generates 'index.md' file
library(markdown)
markdownToHTML("index.md", "index.html", stylesheet='custom.css')
  • If you have rmarkdown, there are some nice templates you can use (File -> New File -> R Markdown -> From Template)

Your Turn

  • Go to: File -> New File -> R Markdown
  • Try out different output formats and pick one that you like!

The power of code chunks

Title
====================

This is an R Markdown document.

```{{r results='asis'}}
library(knitr)
kable(head(cars), 'html')
```

You can also embed plots, for example:

```{{r fig.width=7, fig.height=6, echo=FALSE}}
plot(cars)
```

This is an R Markdown document.

library(knitr)
kable(head(cars), 'html')
speed dist
4 2
4 10
7 4
7 22
8 16
9 10

You can also embed plots, for example:

plot of chunk unnamed-chunk-5

Interactive Plots

library(rCharts)
dat <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Hair, group = "Eye", data = dat, type = "multiBarChart")
n1$print("nvd3mbar")

Interactive Tables

Leveraging JavaScript, it's “easy” to make interactive stuff. Thanks to Yihui for source.

mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.0 6 160.0 110 3.90 2.620 16.46 0 1 4 4
Mazda RX4 Wag 21.0 6 160.0 110 3.90 2.875 17.02 0 1 4 4
Datsun 710 22.8 4 108.0 93 3.85 2.320 18.61 1 1 4 1
Hornet 4 Drive 21.4 6 258.0 110 3.08 3.215 19.44 1 0 3 1
Hornet Sportabout 18.7 8 360.0 175 3.15 3.440 17.02 0 0 3 2
Valiant 18.1 6 225.0 105 2.76 3.460 20.22 1 0 3 1
Duster 360 14.3 8 360.0 245 3.21 3.570 15.84 0 0 3 4
Merc 240D 24.4 4 146.7 62 3.69 3.190 20.00 1 0 4 2
Merc 230 22.8 4 140.8 95 3.92 3.150 22.90 1 0 4 2
Merc 280 19.2 6 167.6 123 3.92 3.440 18.30 1 0 4 4
Merc 280C 17.8 6 167.6 123 3.92 3.440 18.90 1 0 4 4
Merc 450SE 16.4 8 275.8 180 3.07 4.070 17.40 0 0 3 3
Merc 450SL 17.3 8 275.8 180 3.07 3.730 17.60 0 0 3 3
Merc 450SLC 15.2 8 275.8 180 3.07 3.780 18.00 0 0 3 3
Cadillac Fleetwood 10.4 8 472.0 205 2.93 5.250 17.98 0 0 3 4
Lincoln Continental 10.4 8 460.0 215 3.00 5.424 17.82 0 0 3 4
Chrysler Imperial 14.7 8 440.0 230 3.23 5.345 17.42 0 0 3 4
Fiat 128 32.4 4 78.7 66 4.08 2.200 19.47 1 1 4 1
Honda Civic 30.4 4 75.7 52 4.93 1.615 18.52 1 1 4 2
Toyota Corolla 33.9 4 71.1 65 4.22 1.835 19.90 1 1 4 1
Toyota Corona 21.5 4 120.1 97 3.70 2.465 20.01 1 0 3 1
Dodge Challenger 15.5 8 318.0 150 2.76 3.520 16.87 0 0 3 2
AMC Javelin 15.2 8 304.0 150 3.15 3.435 17.30 0 0 3 2
Camaro Z28 13.3 8 350.0 245 3.73 3.840 15.41 0 0 3 4
Pontiac Firebird 19.2 8 400.0 175 3.08 3.845 17.05 0 0 3 2
Fiat X1-9 27.3 4 79.0 66 4.08 1.935 18.90 1 1 4 1
Porsche 914-2 26.0 4 120.3 91 4.43 2.140 16.70 0 1 5 2
Lotus Europa 30.4 4 95.1 113 3.77 1.513 16.90 1 1 5 2
Ford Pantera L 15.8 8 351.0 264 4.22 3.170 14.50 0 1 5 4
Ferrari Dino 19.7 6 145.0 175 3.62 2.770 15.50 0 1 5 6
Maserati Bora 15.0 8 301.0 335 3.54 3.570 14.60 0 1 5 8
Volvo 142E 21.4 4 121.0 109 4.11 2.780 18.60 1 1 4 2

References & resources

Thanks for coming!