29/11/2021

R Markdown

This document runs through some different examples relating to the creation of ioslides slides in R Markdown.

HTML slide options

There are four main different HTML slide options available. Most of the key differences relate to cosmetic appearance. The ioslides option seems to offer the most functionality.

The options are:

  • ioslides - used here
  • slidy
  • reveal.js (requires additional package)
  • xaringen (requires additional package and slides need a webserver to run)

The main downside for ioslides is the lack of themes - themes need to be changed via modifying the css file. Please see the slidy file for details about slidy themes.

Slide composition

Slides are segmented by using ## for each new slide,

e.g.: ## Slide composition.

You can also use the code --- to make a new slide, without a title.

Knitting Options

This R Markdown document has the setting output: ioslides_presentation.

To change the output to a PowerPoint presentation, simply comment out the output: ioslides_presentation line in the YAML, and uncomment the line

#output: powerpoint_presentation.

The option always_allow_html: true is included so that the HTML only options are ignored when rendering as a PowerPoint (if not included, knitting will fail).

Differences between HTML and PowerPoint

While it is easy enough to switch between HTML slides and PowerPoint slides, the change is not entirely painless - some problems arise, namely:

  • Tables produced in R that work in HTML may not work in PowerPoint - they won’t scale and will overlap the slide edges - this also happens just for general text (I guess this can be mitigated to a certain extent when designing slides by not including too much content per slide).
  • Pictures and tables in PowerPoint seem to be placed on separate pages.

Animated icons and text don’t work, although animated graphs still work - you just have to click the play button, unlike the HTML version that autoplays.

Highlighting and colouring words and code (HTML only)

You can make sections of text bold using the <b> command - e.g.: x <- 10 vs x <- 10

You can highlight words using the background-color options within the span HTML environment

Words can be coloured using the ‘class’ option within the ‘div’ HTMLS environment.

# You can change the background colour of a code chunk 
# by specifying  a custom css class 
# (please see css chunk at start of file)
# compared to the default background colour

Aligning images

If images are produced as part of R output, then by including the fig.align = options in the R preamble line (not sure what you call this) - {r fig.align = …} we can align them to the “left”, “right” or “center” (default). You can also add labels to such figures, e.g. {r figurelabel, fig.align = ‘left’}.

As you can see from the following two slides, sometimes the alignment change is not very noticeable. Also please note that these alignments don’t work in PowerPoint.

Simple plot - Right-align

Simple plot - left-align

Plot and text (HTML only)

  • You can split a slide into columns,
  • So that images and text can be displayed together.
  • But you will need to play around with the image dimensions to ensure overlaps don’t occur.
  • You need to leave an empty line between the code for the different columns.
  • If you try to fit too much in to a column, the formatting will fail.

Animated graphs

To make animated graphs, it looks like you need to use either plotly or ggplot, along with the gganimate package.

The following two slides provide an example of a static graph produced with ggplot which has then been animated via the animate function from the gganimate package.

The main additional argument that needs to be added to the base ggplot object (named penguins here) is transition_time() where you just input whatever variable you want to switch between (I’ve used years).

Static graph with potential to be animated

Animated version of graph

Animated text - please press right arrow key

I’m not entirely sure

if this is what you are looking for regarding animated text,

but you can include

sections of text that appear sequentially on a slide (like slides 4-11 of Emi Tanaka’s Beyond Beamer presentation),

using the “.build” attribute next to the slide name - e.g. ” ## slide name {.build} ”

each step needs to be separated by a line

Please note this only works with the ioslides version of HTML slides. For slidy, use class = incremental.

Animated Icons and Better Animated Text with anicon

<i class="fas fa-leaf faa-flash animated "></i><i class="fas fa-leaf fa-2x faa-flash animated " style=" color:green; background:MistyRose;"></i>

<i class="fas fa-thumbs-up faa-vertical animated "></i> For HTML animations we can use Emi Tanaka’s anicon package. (https://github.com/emitanaka/anicon)

At least, we should be able to, but as you can see, the icons aren’t loading. I’ve tried checking for missing dependencies and using different functions, but no luck so far. Maybe it is my PC? From all accounts on the GitHub page it should be very straightforward to use.

anicon animated text

For animated text we use the nia() function from the anicon package

This is an example

anicon::nia("This is an example", animate = "pulse")

I think the easiest way to check the animations possible is to run ?nia, and take a look at the arguments - also check slide 11 here (https://anicon.netlify.app/#11)

anicon animated icons

Icons from the Font Awesome list can be inserted using the faa() function from the anicon package - see the list here for the names to use (https://fontawesome.com/v5/cheatsheet).

Note: You will need devtools installed in order to download this package from GitHub.

devtools::install_github('emitanaka/anicon')

You may need this package loaded too - it’s unclear. Even with it loaded I can’t get the icons to work.

library(fontawesome)