The slides for my ECVP tutorial on classification images are available here. Try this alternative version if the equations look funny.


(image from Mineault et al. 2009)

The slides are in HTML and contain some interactive elements. They’re the result of experimenting with R Markdown, D3 and pandoc. You write the slides in R Markdown, use knitr and pandoc to produce the slides, and add interaction using D3.
I’m not completely happy with the results but it’s a pretty cool set of tools.

Being able to write slides in Pandoc is great. For example, here’s the code for one of the slides:

# What this tutorial is going to be about
* Classification images (AKA reverse correlation) is a technique for probing the visual system with a wide range of stimuli, to see what makes it tick.
* It is essentially like trying to figure out a complex machine by pushing buttons at random.
* The surprising fact is that this can work if you're clever with the analysis.

This gives you a slide with a title and a few bullet points. If you use Markdown-mode in Emacs you can get an outline view by pressing Shift-Tab, and you reorganise things by copy and paste. Including images is relatively painless, if you want tight control over appearance you can use html img elements and a bit of CSS.

<img style="width: 800px;" alt="" src="figure/kontsevich_tyler_1.png" >

Including interactive D3 examples is best done using iframes. The HTML slide stuff is enough of a hack that you really don’t want to have D3 adding another layer of complexity (except for very simple animations, perhaps).

There are some problems and glitches:

  • For some reason Mathjax doesn’t interact very well with the HTML slide frameworks. Equations can appear jumbled. MathML works better but Chrome doesn’t support it, so Firefox is the best options
  • Adding interaction in D3 is pedagogically useful, I think, but really time-consuming
  • Adding animations is complicated. Some equivalent of the LaTeX \multiinclude command would be useful