yihui/knitr-slides.html

## knitr-slides.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
  <meta name="author" content="Yihui Xie" />
  <title>Writing beautiful and reproducible slides quickly</title>
  <style type="text/css">
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; }
code > span.dt { color: #902000; }
code > span.dv { color: #40a070; }
code > span.bn { color: #40a070; }
code > span.fl { color: #40a070; }
code > span.ch { color: #4070a0; }
code > span.st { color: #4070a0; }
code > span.co { color: #60a0b0; font-style: italic; }
code > span.ot { color: #007020; }
code > span.al { color: #ff0000; font-weight: bold; }
code > span.fu { color: #06287e; }
code > span.er { color: #ff0000; font-weight: bold; }
  </style>
<style>
  html { background-color: black; }
  body { background-color: white; }
  /* A section is a slide. It's size is 800x600, and this will never change */
  section {
      font-family: Arial, serif;
      font-size: 20pt;
    }
  address, blockquote, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, table, ul, dl { padding: 10px 20px 10px 20px; }
  h1, h2, h3 {
    text-align: center;
    margin: 10pt 10pt 20pt 10pt;
  }
  ul, ol {
    margin: 10px 10px 10px 50px;
  }
  section.titleslide h1 { margin-top: 200px; }
  h1.title { margin-top: 150px; }
  h1 { font-size: 180%; }
  h2 { font-size: 120%; }
  h3 { font-size: 100%; }
  blockquote { font-style: italic }
  q {
    display: inline-block;
    width: 700px;
    height: 600px;
    background-color: black;
    color: white;
    font-size: 60px;
    padding: 50px;
  }
  footer {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }

  /* Transition effect */
  /* Feel free to change the transition effect for original
     animations. See here:
     https://developer.mozilla.org/en/CSS/CSS_transitions
     How to use CSS3 Transitions: */
  section {
      -moz-transition: left 400ms linear 0s;
      -webkit-transition: left 400ms linear 0s;
      -ms-transition: left 400ms linear 0s;
      transition: left 400ms linear 0s;
  }

  /* Before */
  section { left: -150%; }
  /* Now */
  section[aria-selected] { left: 0; }
  /* After */
  section[aria-selected] ~ section { left: +150%; }

  /* Incremental elements */

  /* By default, visible */
  .incremental > * { opacity: 1; }

  /* The current item */
  .incremental > *[aria-selected] { color: red; opacity: 1; }

  /* The items to-be-selected */
  .incremental > *[aria-selected] ~ * { opacity: 0.2; }
</style>
  <script src="https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
</head>
<body>
<section>
  <h1 class="title">Writing beautiful and reproducible slides quickly</h1>
  <h2 class="author">Yihui Xie</h2>
  <h3 class="date">2012/04/30</h3>
</section>
<section class="slide level1" id="why">
<h1 id="why">Why</h1>
<ul class="incremental">
<li>after you finished typing <code>\documentclass{beamer}</code> and <code>\title{}</code>, I have finished my first slide with markdown</li>
<li>much less commands to remember, e.g. to write bullet points, just begin with a dash “<code>-</code>” instead of <code>\begin{itemize}</code> and <code>\item</code>; how things can be simpler?</li>
<li>I know you want math to show you are a statistician, e.g. \(f(k)={n \choose k}p^{k}(1-p)^{n-k}\)</li>
<li>you do not need to maintain output – only maintain a source file</li>
<li>HTML5/CSS3 is much more fun than LaTeX</li>
</ul>
</section>
<section class="slide level1" id="a-bit-r-code">
<h1 id="a-bit-r-code">A bit R code</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">head</span>(cars)</code></pre>
<pre><code>##   speed dist
## 1     4    2
## 2     4   10
## 3     7    4
## 4     7   22
## 5     8   16
## 6     9   10</code></pre>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">cor</span>(cars)</code></pre>
<pre><code>##        speed   dist
## speed 1.0000 0.8069
## dist  0.8069 1.0000</code></pre>
</section>
<section class="slide level1" id="graphics-too">
<h1 id="graphics-too">Graphics too</h1>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(ggplot2)
<span class="kw">qplot</span>(speed, dist, <span class="dt">data =</span> cars) + <span class="kw">geom_smooth</span>()</code></pre>
<figure>
<img src="http://i.imgur.com/Vwn9A.png" alt="A scatterplot of cars"><figcaption>A scatterplot of <code>cars</code></figcaption>
</figure>
</section>
<section class="slide level1" id="how">
<h1 id="how">How</h1>
<ul class="incremental">
<li>source editor: <a href="http://www.rstudio.org/">RStudio</a> (perfect integration with <a href="http://yihui.name/knitr/"><strong>knitr</strong></a>; one-click compilation); currently you have to use the <a href="http://www.rstudio.org/download/preview">preview version</a> (&gt;= 0.96.109)</li>
<li>HTML5 slides converter: <a href="http://johnmacfarlane.net/pandoc/">pandoc</a>; this document was generated by: <code>pandoc -s -S -i -t dzslides --mathjax knitr-slides.md -o knitr-slides.html</code></li>
<li>the file <a href="https://github.com/yihui/knitr/blob/master/inst/examples/knitr-slides.md"><code>knitr-slides.md</code></a> is the markdown output from its <a href="https://github.com/yihui/knitr/blob/master/inst/examples/knitr-slides.Rmd">source</a>: <code>library(knitr); knitr('knitr-slides.Rmd')</code></li>
<li>or simple click the button <code>Knit HTML</code> in RStudio</li>
</ul>
</section>
<section class="slide level1" id="for-ninjas">
<h1 id="for-ninjas">For ninjas</h1>
<ul class="incremental">
<li>you should tweak the default style; why not try some <a href="http://www.google.com/webfonts">Google web fonts</a>? (think how painful it is to wrestle with fonts in LaTeX)</li>
<li>pandoc provides 3 types of HTML5 slides (dzslides is one of them)</li>
<li>you can tweak the default template to get better appearances</li>
<li>if you have come up with a better dzslides template, please let me know or contribute to pandoc directly (e.g. <code>pre</code> blocks should have <code>max-width</code> and <code>max-height</code>)</li>
</ul>
</section>
<section class="slide level1" id="for-beamer-lovers">
<h1 id="for-beamer-lovers">For beamer lovers</h1>
<ul class="incremental">
<li>pandoc supports conversion to beamer as well. period.</li>
</ul>
</section>
<section class="slide level1" id="for-powerpoint-lovers">
<h1 id="for-powerpoint-lovers">For Powerpoint lovers</h1>
<ul class="incremental">
<li>…</li>
</ul>
</section>
<section class="slide level1" id="reproducible-research">
<h1 id="reproducible-research">Reproducible research</h1>
<p>It is good to include the session info, e.g. this document is produced with <strong>knitr</strong> version <code>0.5.1</code>. Here is my session info:</p>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(<span class="kw">sessionInfo</span>(), <span class="dt">locale =</span> <span class="ot">FALSE</span>)</code></pre>
<pre><code>## R version 2.15.0 (2012-03-30)
## Platform: x86_64-pc-linux-gnu (64-bit)
##
## attached base packages:
## [1] stats     graphics  grDevices utils     datasets  methods   base
##
## other attached packages:
## [1] ggplot2_0.9.0 knitr_0.5.1
##
## loaded via a namespace (and not attached):
##  [1] codetools_0.2-8    colorspace_1.1-1   dichromat_1.2-4
##  [4] digest_0.5.2       evaluate_0.4.2     formatR_0.4.1
##  [7] grid_2.15.0        highlight_0.3.1    MASS_7.3-17
## [10] memoise_0.1        munsell_0.3        parser_0.0-14
## [13] plyr_1.7.1         proto_0.3-9.2      RColorBrewer_1.0-5
## [16] Rcpp_0.9.10        RCurl_1.91-1       reshape2_1.2.1
## [19] scales_0.2.0       stringr_0.6        tools_2.15.0
## [22] XML_3.6-2         </code></pre>
</section>
<section class="slide level1" id="life-is-short">
<h1 id="life-is-short">Life is short</h1>
<ul class="incremental">
<li><p>so keep your audience awake!</p>
<figure>
<img src="http://i.imgur.com/qBO9K.jpg"><figcaption></figcaption>
</figure></li>
</ul>
</section>
<!-- {{{{ dzslides core
#
#
#     __  __  __       .  __   ___  __
#    |  \  / /__` |    | |  \ |__  /__`
#    |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
#
#
# The following block of code is not supposed to be edited.
# But if you want to change the behavior of these slides,
# feel free to hack it!
#
-->

<!-- Default Style -->
<style>
  * { margin: 0; padding: 0; }
  details { display: none; }
  body {
    width: 800px; height: 600px;
    margin-left: -400px; margin-top: -300px;
    position: absolute; top: 50%; left: 50%;
    overflow: hidden;
  }
  section {
    position: absolute;
    pointer-events: none;
    width: 100%; height: 100%;
  }
  section[aria-selected] { pointer-events: auto; }
  html { overflow: hidden; }
  body { display: none; }
  body.loaded { display: block; }
  .incremental {visibility: hidden; }
  .incremental[active] {visibility: visible; }
</style>

<script>
  var Dz = {
    remoteWindows: [],
    idx: -1,
    step: 0,
    slides: null,
    params: {
      autoplay: "1"
    }
  };

  Dz.init = function() {
    document.body.className = "loaded";
    this.slides = $$("body > section");
    this.setupParams();
    this.onhashchange();
    this.setupTouchEvents();
    this.onresize();
  }

  Dz.setupParams = function() {
    var p = window.location.search.substr(1).split('&');
    p.forEach(function(e, i, a) {
      var keyVal = e.split('=');
      Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
    });
  }

  Dz.onkeydown = function(aEvent) {
    // Don't intercept keyboard shortcuts
    if (aEvent.altKey
      || aEvent.ctrlKey
      || aEvent.metaKey
      || aEvent.shiftKey) {
      return;
    }
    if ( aEvent.keyCode == 37 // left arrow
      || aEvent.keyCode == 38 // up arrow
      || aEvent.keyCode == 33 // page up
    ) {
      aEvent.preventDefault();
      this.back();
    }
    if ( aEvent.keyCode == 39 // right arrow
      || aEvent.keyCode == 40 // down arrow
      || aEvent.keyCode == 34 // page down
    ) {
      aEvent.preventDefault();
      this.forward();
    }
    if (aEvent.keyCode == 35) { // end
      aEvent.preventDefault();
      this.goEnd();
    }
    if (aEvent.keyCode == 36) { // home
      aEvent.preventDefault();
      this.goStart();
    }
    if (aEvent.keyCode == 32) { // space
      aEvent.preventDefault();
      this.toggleContent();
    }
  }

  /* Touch Events */

  Dz.setupTouchEvents = function() {
    var orgX, newX;
    var tracking = false;

    var db = document.body;
    db.addEventListener("touchstart", start.bind(this), false);
    db.addEventListener("touchmove", move.bind(this), false);

    function start(aEvent) {
      aEvent.preventDefault();
      tracking = true;
      orgX = aEvent.changedTouches[0].pageX;
    }

    function move(aEvent) {
      if (!tracking) return;
      newX = aEvent.changedTouches[0].pageX;
      if (orgX - newX > 100) {
        tracking = false;
        this.forward();
      } else {
        if (orgX - newX < -100) {
          tracking = false;
          this.back();
        }
      }
    }
  }

  /* Adapt the size of the slides to the window */

  Dz.onresize = function() {
    var db = document.body;
    var sx = db.clientWidth / window.innerWidth;
    var sy = db.clientHeight / window.innerHeight;
    var transform = "scale(" + (1/Math.max(sx, sy)) + ")";

    db.style.MozTransform = transform;
    db.style.WebkitTransform = transform;
    db.style.OTransform = transform;
    db.style.msTransform = transform;
    db.style.transform = transform;
  }


  Dz.getDetails = function(aIdx) {
    var s = $("section:nth-of-type(" + aIdx + ")");
    var d = s.$("details");
    return d ? d.innerHTML : "";
  }

  Dz.onmessage = function(aEvent) {
    var argv = aEvent.data.split(" "), argc = argv.length;
    argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
    var win = aEvent.source;
    if (argv[0] === "REGISTER" && argc === 1) {
      this.remoteWindows.push(win);
      this.postMsg(win, "REGISTERED", document.title, this.slides.length);
      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
      return;
    }
    if (argv[0] === "BACK" && argc === 1)
      this.back();
    if (argv[0] === "FORWARD" && argc === 1)
      this.forward();
    if (argv[0] === "START" && argc === 1)
      this.goStart();
    if (argv[0] === "END" && argc === 1)
      this.goEnd();
    if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
      this.toggleContent();
    if (argv[0] === "SET_CURSOR" && argc === 2)
      window.location.hash = "#" + argv[1];
    if (argv[0] === "GET_CURSOR" && argc === 1)
      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
    if (argv[0] === "GET_NOTES" && argc === 1)
      this.postMsg(win, "NOTES", this.getDetails(this.idx));
  }

  Dz.toggleContent = function() {
    // If a Video is present in this new slide, play it.
    // If a Video is present in the previous slide, stop it.
    var s = $("section[aria-selected]");
    if (s) {
      var video = s.$("video");
      if (video) {
        if (video.ended || video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }
    }
  }

  Dz.setCursor = function(aIdx, aStep) {
    // If the user change the slide number in the URL bar, jump
    // to this slide.
    aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
    window.location.hash = "#" + aIdx + aStep;
  }

  Dz.onhashchange = function() {
    var cursor = window.location.hash.split("#"),
        newidx = 1,
        newstep = 0;
    if (cursor.length == 2) {
      newidx = ~~cursor[1].split(".")[0];
      newstep = ~~cursor[1].split(".")[1];
      if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {
        newstep = 0;
        newidx++;
      }
    }
    if (newidx != this.idx) {
      this.setSlide(newidx);
    }
    if (newstep != this.step) {
      this.setIncremental(newstep);
    }
    for (var i = 0; i < this.remoteWindows.length; i++) {
      this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
    }
  }

  Dz.back = function() {
    if (this.idx == 1 && this.step == 0) {
      return;
    }
    if (this.step == 0) {
      this.setCursor(this.idx - 1,
                     this.slides[this.idx - 2].$$('.incremental > *').length);
    } else {
      this.setCursor(this.idx, this.step - 1);
    }
  }

  Dz.forward = function() {
    if (this.idx >= this.slides.length &&
        this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
        return;
    }
    if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
      this.setCursor(this.idx + 1, 0);
    } else {
      this.setCursor(this.idx, this.step + 1);
    }
  }

  Dz.goStart = function() {
    this.setCursor(1, 0);
  }

  Dz.goEnd = function() {
    var lastIdx = this.slides.length;
    var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
    this.setCursor(lastIdx, lastStep);
  }

  Dz.setSlide = function(aIdx) {
    this.idx = aIdx;
    var old = $("section[aria-selected]");
    var next = $("section:nth-of-type("+ this.idx +")");
    if (old) {
      old.removeAttribute("aria-selected");
      var video = old.$("video");
      if (video) {
        video.pause();
      }
    }
    if (next) {
      next.setAttribute("aria-selected", "true");
      var video = next.$("video");
      if (video && !!+this.params.autoplay) {
        video.play();
      }
    } else {
      // That should not happen
      this.idx = -1;
      // console.warn("Slide doesn't exist.");
    }
  }

  Dz.setIncremental = function(aStep) {
    this.step = aStep;
    var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
    if (old) {
      old.removeAttribute('aria-selected');
    }
    var incrementals = this.slides[this.idx - 1].$$('.incremental');
    if (this.step <= 0) {
      incrementals.forEach(function(aNode) {
        aNode.removeAttribute('active');
      });
      return;
    }
    var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
    if (next) {
      next.setAttribute('aria-selected', true);
      next.parentNode.setAttribute('active', true);
      var found = false;
      incrementals.forEach(function(aNode) {
        if (aNode != next.parentNode)
          if (found)
            aNode.removeAttribute('active');
          else
            aNode.setAttribute('active', true);
        else
          found = true;
      });
    } else {
      setCursor(this.idx, 0);
    }
    return next;
  }

  Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
    aMsg = [aMsg];
    for (var i = 2; i < arguments.length; i++)
      aMsg.push(encodeURIComponent(arguments[i]));
    aWin.postMessage(aMsg.join(" "), "*");
  }

  window.onload = Dz.init.bind(Dz);
  window.onkeydown = Dz.onkeydown.bind(Dz);
  window.onresize = Dz.onresize.bind(Dz);
  window.onhashchange = Dz.onhashchange.bind(Dz);
  window.onmessage = Dz.onmessage.bind(Dz);
</script>


<script> // Helpers
  if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {

      // closest thing possible to the ECMAScript 5 internal IsCallable
      // function
      if (typeof this !== "function")
      throw new TypeError(
        "Function.prototype.bind - what is trying to be fBound is not callable"
      );

      var aArgs = Array.prototype.slice.call(arguments, 1),
          fToBind = this,
          fNOP = function () {},
          fBound = function () {
            return fToBind.apply( this instanceof fNOP ? this : oThis || window,
                   aArgs.concat(Array.prototype.slice.call(arguments)));
          };

      fNOP.prototype = this.prototype;
      fBound.prototype = new fNOP();

      return fBound;
    };
  }

  var $ = (HTMLElement.prototype.$ = function(aQuery) {
    return this.querySelector(aQuery);
  }).bind(document);

  var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
    return this.querySelectorAll(aQuery);
  }).bind(document);

  NodeList.prototype.forEach = function(fun) {
    if (typeof fun !== "function") throw new TypeError();
    for (var i = 0; i < this.length; i++) {
      fun.call(this, this[i]);
    }
  }

</script>
<!-- vim: set fdm=marker: }}} -->
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="author" content="Yihui Xie" />
	<title>Writing beautiful and reproducible slides quickly</title>
	<style type="text/css">
	table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
	margin: 0; padding: 0; vertical-align: baseline; border: none; }
	table.sourceCode { width: 100%; }
	td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
	td.sourceCode { padding-left: 5px; }
	code > span.kw { color: #007020; font-weight: bold; }
	code > span.dt { color: #902000; }
	code > span.dv { color: #40a070; }
	code > span.bn { color: #40a070; }
	code > span.fl { color: #40a070; }
	code > span.ch { color: #4070a0; }
	code > span.st { color: #4070a0; }
	code > span.co { color: #60a0b0; font-style: italic; }
	code > span.ot { color: #007020; }
	code > span.al { color: #ff0000; font-weight: bold; }
	code > span.fu { color: #06287e; }
	code > span.er { color: #ff0000; font-weight: bold; }
	</style>
	<style>
	html { background-color: black; }
	body { background-color: white; }
	/* A section is a slide. It's size is 800x600, and this will never change */
	section {
	font-family: Arial, serif;
	font-size: 20pt;
	}
	address, blockquote, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, table, ul, dl { padding: 10px 20px 10px 20px; }
	h1, h2, h3 {
	text-align: center;
	margin: 10pt 10pt 20pt 10pt;
	}
	ul, ol {
	margin: 10px 10px 10px 50px;
	}
	section.titleslide h1 { margin-top: 200px; }
	h1.title { margin-top: 150px; }
	h1 { font-size: 180%; }
	h2 { font-size: 120%; }
	h3 { font-size: 100%; }
	blockquote { font-style: italic }
	q {
	display: inline-block;
	width: 700px;
	height: 600px;
	background-color: black;
	color: white;
	font-size: 60px;
	padding: 50px;
	}
	footer {
	position: absolute;
	bottom: 10px;
	right: 20px;
	}

	/* Transition effect */
	/* Feel free to change the transition effect for original
	animations. See here:
	https://developer.mozilla.org/en/CSS/CSS_transitions
	How to use CSS3 Transitions: */
	section {
	-moz-transition: left 400ms linear 0s;
	-webkit-transition: left 400ms linear 0s;
	-ms-transition: left 400ms linear 0s;
	transition: left 400ms linear 0s;
	}

	/* Before */
	section { left: -150%; }
	/* Now */
	section[aria-selected] { left: 0; }
	/* After */
	section[aria-selected] ~ section { left: +150%; }

	/* Incremental elements */

	/* By default, visible */
	.incremental > * { opacity: 1; }

	/* The current item */
	.incremental > *[aria-selected] { color: red; opacity: 1; }

	/* The items to-be-selected */
	.incremental > [aria-selected] ~ { opacity: 0.2; }
	</style>
	<script src="https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
	</head>
	<body>
	<section>
	<h1 class="title">Writing beautiful and reproducible slides quickly</h1>
	<h2 class="author">Yihui Xie</h2>
	<h3 class="date">2012/04/30</h3>
	</section>
	<section class="slide level1" id="why">
	<h1 id="why">Why</h1>
	<ul class="incremental">
	<li>after you finished typing <code>\documentclass{beamer}</code> and <code>\title{}</code>, I have finished my first slide with markdown</li>
	<li>much less commands to remember, e.g. to write bullet points, just begin with a dash “<code>-</code>” instead of <code>\begin{itemize}</code> and <code>\item</code>; how things can be simpler?</li>
	<li>I know you want math to show you are a statistician, e.g. \(f(k)={n \choose k}p^{k}(1-p)^{n-k}\)</li>
	<li>you do not need to maintain output – only maintain a source file</li>
	<li>HTML5/CSS3 is much more fun than LaTeX</li>
	</ul>
	</section>
	<section class="slide level1" id="a-bit-r-code">
	<h1 id="a-bit-r-code">A bit R code</h1>
	<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">head</span>(cars)</code></pre>
	<pre><code>## speed dist
	## 1 4 2
	## 2 4 10
	## 3 7 4
	## 4 7 22
	## 5 8 16
	## 6 9 10</code></pre>
	<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">cor</span>(cars)</code></pre>
	<pre><code>## speed dist
	## speed 1.0000 0.8069
	## dist 0.8069 1.0000</code></pre>
	</section>
	<section class="slide level1" id="graphics-too">
	<h1 id="graphics-too">Graphics too</h1>
	<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(ggplot2)
	<span class="kw">qplot</span>(speed, dist, <span class="dt">data =</span> cars) + <span class="kw">geom_smooth</span>()</code></pre>
	<figure>
	<img src="http://i.imgur.com/Vwn9A.png" alt="A scatterplot of cars"><figcaption>A scatterplot of <code>cars</code></figcaption>
	</figure>
	</section>
	<section class="slide level1" id="how">
	<h1 id="how">How</h1>
	<ul class="incremental">
	<li>source editor: <a href="http://www.rstudio.org/">RStudio</a> (perfect integration with <a href="http://yihui.name/knitr/"><strong>knitr</strong></a>; one-click compilation); currently you have to use the <a href="http://www.rstudio.org/download/preview">preview version</a> (>= 0.96.109)</li>
	<li>HTML5 slides converter: <a href="http://johnmacfarlane.net/pandoc/">pandoc</a>; this document was generated by: <code>pandoc -s -S -i -t dzslides --mathjax knitr-slides.md -o knitr-slides.html</code></li>
	<li>the file <a href="https://github.com/yihui/knitr/blob/master/inst/examples/knitr-slides.md"><code>knitr-slides.md</code></a> is the markdown output from its <a href="https://github.com/yihui/knitr/blob/master/inst/examples/knitr-slides.Rmd">source</a>: <code>library(knitr); knitr('knitr-slides.Rmd')</code></li>
	<li>or simple click the button <code>Knit HTML</code> in RStudio</li>
	</ul>
	</section>
	<section class="slide level1" id="for-ninjas">
	<h1 id="for-ninjas">For ninjas</h1>
	<ul class="incremental">
	<li>you should tweak the default style; why not try some <a href="http://www.google.com/webfonts">Google web fonts</a>? (think how painful it is to wrestle with fonts in LaTeX)</li>
	<li>pandoc provides 3 types of HTML5 slides (dzslides is one of them)</li>
	<li>you can tweak the default template to get better appearances</li>
	<li>if you have come up with a better dzslides template, please let me know or contribute to pandoc directly (e.g. <code>pre</code> blocks should have <code>max-width</code> and <code>max-height</code>)</li>
	</ul>
	</section>
	<section class="slide level1" id="for-beamer-lovers">
	<h1 id="for-beamer-lovers">For beamer lovers</h1>
	<ul class="incremental">
	<li>pandoc supports conversion to beamer as well. period.</li>
	</ul>
	</section>
	<section class="slide level1" id="for-powerpoint-lovers">
	<h1 id="for-powerpoint-lovers">For Powerpoint lovers</h1>
	<ul class="incremental">
	<li>…</li>
	</ul>
	</section>
	<section class="slide level1" id="reproducible-research">
	<h1 id="reproducible-research">Reproducible research</h1>
	<p>It is good to include the session info, e.g. this document is produced with <strong>knitr</strong> version <code>0.5.1</code>. Here is my session info:</p>
	<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">print</span>(<span class="kw">sessionInfo</span>(), <span class="dt">locale =</span> <span class="ot">FALSE</span>)</code></pre>
	<pre><code>## R version 2.15.0 (2012-03-30)
	## Platform: x86_64-pc-linux-gnu (64-bit)
	##
	## attached base packages:
	## [1] stats graphics grDevices utils datasets methods base
	##
	## other attached packages:
	## [1] ggplot2_0.9.0 knitr_0.5.1
	##
	## loaded via a namespace (and not attached):
	## [1] codetools_0.2-8 colorspace_1.1-1 dichromat_1.2-4
	## [4] digest_0.5.2 evaluate_0.4.2 formatR_0.4.1
	## [7] grid_2.15.0 highlight_0.3.1 MASS_7.3-17
	## [10] memoise_0.1 munsell_0.3 parser_0.0-14
	## [13] plyr_1.7.1 proto_0.3-9.2 RColorBrewer_1.0-5
	## [16] Rcpp_0.9.10 RCurl_1.91-1 reshape2_1.2.1
	## [19] scales_0.2.0 stringr_0.6 tools_2.15.0
	## [22] XML_3.6-2 </code></pre>
	</section>
	<section class="slide level1" id="life-is-short">
	<h1 id="life-is-short">Life is short</h1>
	<ul class="incremental">
	<li><p>so keep your audience awake!</p>
	<figure>
	<img src="http://i.imgur.com/qBO9K.jpg"><figcaption></figcaption>
	</figure></li>
	</ul>
	</section>
	<!-- {{{{ dzslides core
	#
	#
	# __ __ __ . __ ___ __
	# \| \ / /__` \| \| \| \ \|__ /__`
	# \|__/ /_ .__/ \|___ \| \|__/ \|___ .__/ core :€
	#
	#
	# The following block of code is not supposed to be edited.
	# But if you want to change the behavior of these slides,
	# feel free to hack it!
	#
	-->

	<!-- Default Style -->
	<style>
	* { margin: 0; padding: 0; }
	details { display: none; }
	body {
	width: 800px; height: 600px;
	margin-left: -400px; margin-top: -300px;
	position: absolute; top: 50%; left: 50%;
	overflow: hidden;
	}
	section {
	position: absolute;
	pointer-events: none;
	width: 100%; height: 100%;
	}
	section[aria-selected] { pointer-events: auto; }
	html { overflow: hidden; }
	body { display: none; }
	body.loaded { display: block; }
	.incremental {visibility: hidden; }
	.incremental[active] {visibility: visible; }
	</style>

	<script>
	var Dz = {
	remoteWindows: [],
	idx: -1,
	step: 0,
	slides: null,
	params: {
	autoplay: "1"
	}
	};

	Dz.init = function() {
	document.body.className = "loaded";
	this.slides = $$("body > section");
	this.setupParams();
	this.onhashchange();
	this.setupTouchEvents();
	this.onresize();
	}

	Dz.setupParams = function() {
	var p = window.location.search.substr(1).split('&');
	p.forEach(function(e, i, a) {
	var keyVal = e.split('=');
	Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
	});
	}

	Dz.onkeydown = function(aEvent) {
	// Don't intercept keyboard shortcuts
	if (aEvent.altKey
	\|\| aEvent.ctrlKey
	\|\| aEvent.metaKey
	\|\| aEvent.shiftKey) {
	return;
	}
	if ( aEvent.keyCode == 37 // left arrow
	\|\| aEvent.keyCode == 38 // up arrow
	\|\| aEvent.keyCode == 33 // page up
	) {
	aEvent.preventDefault();
	this.back();
	}
	if ( aEvent.keyCode == 39 // right arrow
	\|\| aEvent.keyCode == 40 // down arrow
	\|\| aEvent.keyCode == 34 // page down
	) {
	aEvent.preventDefault();
	this.forward();
	}
	if (aEvent.keyCode == 35) { // end
	aEvent.preventDefault();
	this.goEnd();
	}
	if (aEvent.keyCode == 36) { // home
	aEvent.preventDefault();
	this.goStart();
	}
	if (aEvent.keyCode == 32) { // space
	aEvent.preventDefault();
	this.toggleContent();
	}
	}

	/* Touch Events */

	Dz.setupTouchEvents = function() {
	var orgX, newX;
	var tracking = false;

	var db = document.body;
	db.addEventListener("touchstart", start.bind(this), false);
	db.addEventListener("touchmove", move.bind(this), false);

	function start(aEvent) {
	aEvent.preventDefault();
	tracking = true;
	orgX = aEvent.changedTouches[0].pageX;
	}

	function move(aEvent) {
	if (!tracking) return;
	newX = aEvent.changedTouches[0].pageX;
	if (orgX - newX > 100) {
	tracking = false;
	this.forward();
	} else {
	if (orgX - newX < -100) {
	tracking = false;
	this.back();
	}
	}
	}
	}

	/* Adapt the size of the slides to the window */

	Dz.onresize = function() {
	var db = document.body;
	var sx = db.clientWidth / window.innerWidth;
	var sy = db.clientHeight / window.innerHeight;
	var transform = "scale(" + (1/Math.max(sx, sy)) + ")";

	db.style.MozTransform = transform;
	db.style.WebkitTransform = transform;
	db.style.OTransform = transform;
	db.style.msTransform = transform;
	db.style.transform = transform;
	}


	Dz.getDetails = function(aIdx) {
	var s = $("section:nth-of-type(" + aIdx + ")");
	var d = s.$("details");
	return d ? d.innerHTML : "";
	}

	Dz.onmessage = function(aEvent) {
	var argv = aEvent.data.split(" "), argc = argv.length;
	argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
	var win = aEvent.source;
	if (argv[0] === "REGISTER" && argc === 1) {
	this.remoteWindows.push(win);
	this.postMsg(win, "REGISTERED", document.title, this.slides.length);
	this.postMsg(win, "CURSOR", this.idx + "." + this.step);
	return;
	}
	if (argv[0] === "BACK" && argc === 1)
	this.back();
	if (argv[0] === "FORWARD" && argc === 1)
	this.forward();
	if (argv[0] === "START" && argc === 1)
	this.goStart();
	if (argv[0] === "END" && argc === 1)
	this.goEnd();
	if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
	this.toggleContent();
	if (argv[0] === "SET_CURSOR" && argc === 2)
	window.location.hash = "#" + argv[1];
	if (argv[0] === "GET_CURSOR" && argc === 1)
	this.postMsg(win, "CURSOR", this.idx + "." + this.step);
	if (argv[0] === "GET_NOTES" && argc === 1)
	this.postMsg(win, "NOTES", this.getDetails(this.idx));
	}

	Dz.toggleContent = function() {
	// If a Video is present in this new slide, play it.
	// If a Video is present in the previous slide, stop it.
	var s = $("section[aria-selected]");
	if (s) {
	var video = s.$("video");
	if (video) {
	if (video.ended \|\| video.paused) {
	video.play();
	} else {
	video.pause();
	}
	}
	}
	}

	Dz.setCursor = function(aIdx, aStep) {
	// If the user change the slide number in the URL bar, jump
	// to this slide.
	aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
	window.location.hash = "#" + aIdx + aStep;
	}

	Dz.onhashchange = function() {
	var cursor = window.location.hash.split("#"),
	newidx = 1,
	newstep = 0;
	if (cursor.length == 2) {
	newidx = ~~cursor[1].split(".")[0];
	newstep = ~~cursor[1].split(".")[1];
	if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {
	newstep = 0;
	newidx++;
	}
	}
	if (newidx != this.idx) {
	this.setSlide(newidx);
	}
	if (newstep != this.step) {
	this.setIncremental(newstep);
	}
	for (var i = 0; i < this.remoteWindows.length; i++) {
	this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
	}
	}

	Dz.back = function() {
	if (this.idx == 1 && this.step == 0) {
	return;
	}
	if (this.step == 0) {
	this.setCursor(this.idx - 1,
	this.slides[this.idx - 2].$$('.incremental > *').length);
	} else {
	this.setCursor(this.idx, this.step - 1);
	}
	}

	Dz.forward = function() {
	if (this.idx >= this.slides.length &&
	this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
	return;
	}
	if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
	this.setCursor(this.idx + 1, 0);
	} else {
	this.setCursor(this.idx, this.step + 1);
	}
	}

	Dz.goStart = function() {
	this.setCursor(1, 0);
	}

	Dz.goEnd = function() {
	var lastIdx = this.slides.length;
	var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
	this.setCursor(lastIdx, lastStep);
	}

	Dz.setSlide = function(aIdx) {
	this.idx = aIdx;
	var old = $("section[aria-selected]");
	var next = $("section:nth-of-type("+ this.idx +")");
	if (old) {
	old.removeAttribute("aria-selected");
	var video = old.$("video");
	if (video) {
	video.pause();
	}
	}
	if (next) {
	next.setAttribute("aria-selected", "true");
	var video = next.$("video");
	if (video && !!+this.params.autoplay) {
	video.play();
	}
	} else {
	// That should not happen
	this.idx = -1;
	// console.warn("Slide doesn't exist.");
	}
	}

	Dz.setIncremental = function(aStep) {
	this.step = aStep;
	var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
	if (old) {
	old.removeAttribute('aria-selected');
	}
	var incrementals = this.slides[this.idx - 1].$$('.incremental');
	if (this.step <= 0) {
	incrementals.forEach(function(aNode) {
	aNode.removeAttribute('active');
	});
	return;
	}
	var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
	if (next) {
	next.setAttribute('aria-selected', true);
	next.parentNode.setAttribute('active', true);
	var found = false;
	incrementals.forEach(function(aNode) {
	if (aNode != next.parentNode)
	if (found)
	aNode.removeAttribute('active');
	else
	aNode.setAttribute('active', true);
	else
	found = true;
	});
	} else {
	setCursor(this.idx, 0);
	}
	return next;
	}

	Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
	aMsg = [aMsg];
	for (var i = 2; i < arguments.length; i++)
	aMsg.push(encodeURIComponent(arguments[i]));
	aWin.postMessage(aMsg.join(" "), "*");
	}

	window.onload = Dz.init.bind(Dz);
	window.onkeydown = Dz.onkeydown.bind(Dz);
	window.onresize = Dz.onresize.bind(Dz);
	window.onhashchange = Dz.onhashchange.bind(Dz);
	window.onmessage = Dz.onmessage.bind(Dz);
	</script>


	<script> // Helpers
	if (!Function.prototype.bind) {
	Function.prototype.bind = function (oThis) {

	// closest thing possible to the ECMAScript 5 internal IsCallable
	// function
	if (typeof this !== "function")
	throw new TypeError(
	"Function.prototype.bind - what is trying to be fBound is not callable"
	);

	var aArgs = Array.prototype.slice.call(arguments, 1),
	fToBind = this,
	fNOP = function () {},
	fBound = function () {
	return fToBind.apply( this instanceof fNOP ? this : oThis \|\| window,
	aArgs.concat(Array.prototype.slice.call(arguments)));
	};

	fNOP.prototype = this.prototype;
	fBound.prototype = new fNOP();

	return fBound;
	};
	}

	var $ = (HTMLElement.prototype.$ = function(aQuery) {
	return this.querySelector(aQuery);
	}).bind(document);

	var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
	return this.querySelectorAll(aQuery);
	}).bind(document);

	NodeList.prototype.forEach = function(fun) {
	if (typeof fun !== "function") throw new TypeError();
	for (var i = 0; i < this.length; i++) {
	fun.call(this, this[i]);
	}
	}

	</script>
	<!-- vim: set fdm=marker: }}} -->
	</body>
	</html>