Using Slidify to teach with interactive content

I frequently come across criticisms of PowerPoint as a presentation tool, which is interesting to me given the ubiquity of its use across industries. When I worked as a data analyst prior to coming to TCU, I frequently prepared PowerPoints using a company template for my boss’s presentations or for talks of my own. In academia, we have considerable freedom in how we can communicate information; however, PowerPoint is still widely used in the classroom and is everywhere at professional conferences.

The best-known criticisms of PowerPoint are from Edward Tufte; other notable examples include Rebecca Schuman’s critique of slideshows in higher education, and Jeff Bezos’ banishing of PowerPoint presentations from Amazon. I personally don’t believe that slideshows are inherently bad; however, they can exacerbate bad presentation habits. For example, slideshows with lots of text can serve as crutches for under-prepared presenters, who end up simply reading large quantities of bulleted text from their slides. In the classroom, students respond to these types of slides by scrambling to copy down every last word from the slide (even if the slides will be provided to them afterward) instead of listening closely to what the instructor is saying.

I try to avoid putting too much text (or any at all) on my lecture slides for this reason. However, I am hesitant to get rid of slideshows entirely, as some have suggested. My field, geography, is intensely visual; in turn, images and data visualizations are often necessary to contextualize geographical concepts for students. For example, I can discuss the development of informal settlements in African and Asian megacities – but without photographs, this discussion would remain abstract, as few of my students have ever been to these places in person. Similarly, it is one thing to tell students that there are disparities in life expectancy between European and African countries; however, an interactive map (click the link for an example) can provide a direct reference for students, and allows us to explore the data in class.

I find slideshows useful for organizing this visual content. However, it took me some time to figure out the best way to present interactive web-based visualizations to students. When I started experimenting with interactive visualization last year, I would include a link in my PowerPoint to where the visualization was located on the web; however, this was less than ideal, as it would often interrupt the flow of our discussion. This led me to seek out a purely web-based solution for my slides. I came across Slidify, an R package by Ramnath Vaidyanathan. With Slidify, I can write all of my slides in RStudio with R Markdown, and embed interactive content in my slides, like any other graphic. I now use Slidify to produce all of my lecture slides, and all of my presentation slides when possible. Some sample content from my class on Japan is below; click within the slideshow, then use the arrow keys to move through the slides. Please note: this is best viewed on a desktop computer rather than a mobile device. If you’d prefer to view the full-size slideshow, click here.

In my opinion, embedding interactive content directly in the slide deck is a significant improvement over linking out to these graphics from a PowerPoint presentation, or having to navigate back and forth between a slideshow and a web browser. For example, we spend a significant amount of time discussing aging and projected population decline in Japan. I can show students how Japan’s population is projected to decline by over 40 million by the end of the century with the interactive Plotly chart of population change over time, then put this in context with the population pyramid immediately afterward. I then highlight using the pyramid’s interactivity that Japan is projected to be home to 1.3 million people aged 100 and up in 2050, then go right back to the Plotly graph and use its interactivity to show that this would make centenarians over one percent of Japan’s population. I follow with an embedded YouTube video from Journeyman Pictures about demographic issues in Japan, and ask students to complete an in-class writeup in which they identify how the issues explored in the video help explain the demographic trends we’ve observed in the charts. Rather than bouncing around from PowerPoint to YouTube to Plotly, I can do all of this in a much smoother way with Slidify.

Granted, HTML slides are not immune to the poor presentation behaviors that are often associated with PowerPoint; you can fill up these slides with lots of text as well if you so choose. Additionally, a caveat is that internet access is required to leverage the full interactivity of this slide deck, which can be an issue in a professional setting. For example, the last conference I attended did not have internet access; another presentation I gave a year ago had to be uploaded to a special presentation management system, and thus required PowerPoint. However, I have been very pleased with Slidify thus far and will continue to use it in my teaching.

If you’d like to read onward, I’ve included some of the technical details of using interactive content in Slidify presentations below.

Embedding interactive content in a Slidify presentation

Slidify allows users to produce HTML slides from Markdown for several different frameworks. If you aren’t familiar with Markdown, I encourage you to get acquainted with it; it allows you to convert a basic text formatting syntax to HTML, and is really useful. You can read more about Markdown here. My favorite frameworks are Landslide and Reveal.JS. The above presentation is created with Landslide, and uses some custom CSS I’ve specified for the styling.

I’m not going to go into extensive detail on how to create a Slidify presentation; instead, I’m going to refer you to Zev Ross’s excellent tutorial, which is linked here and goes over the ins-and-outs of setting up Slidify. The R Markdown code that generated the slides is also available in its GitHub repository. Instead, I’d like to discuss how to embed visuals in a Slidify presentation, such as static imagery, interactive visualizations, and video clips.

While Slidify allows you to avoid writing HTML/CSS/JavaScript for the most part, it is helpful to know a little bit of each to achieve its full functionality. For me, Slidify has been a great way to learn about how webpages work. Slide 3, which is a picture of Tokyo, is a picture I’ve found from a Google image search. Standard Markdown syntax allows you to reference images; however, if you want more control over the size of your image, you’ll want to turn to regular HTML. The code for the slide is below:

## Tokyo

<img src=assets/img/tokyo.jpg style="width: 750px">

<span class="footnote">Source: [maxisciences.com](http://img1.mxstatic.com/wallpapers/313ec7a690d40c8381ddff3cbf781e16_large.jpeg)</span>

I’ve chosen to save the image in my assets/img folder that is generated by Slidify; you could also reference it directly from the web. To cite the image source in Slidify, you also can use HTML; put your text inside of <span></span> tags with the class footnote. However, I can use Markdown syntax within the HTML tags to reference a hyperlink, as I’ve done above. In Markdown, links can be specified with brackets and parentheses like this: [Name of link here](website of link)

The slides that follow include embedded interactive content. Slide 4 shows a tree map of Japan’s exports by type from the excellent Observatory of Economic Complexity. Slides 5 and 6 contain embedded charts that I’ve created; one is a Plotly chart that shows past and projected future population change in Japan (see how to make charts like these here), and the other is an interactive population pyramid for Japan’s projected population structure in 2050 (read more on how to create these here). In each instance, these interactive graphics are embedded in my slideshow with HTML <iframe></iframe> tags. An example of what this looks like for the Plotly chart is below.

## Demography of Japan

<iframe src="http://plot.ly/~walkerke/57" width="800" height="500" scrolling="no" frameBorder="0"></iframe>

<span class="footnote">Data source: United Nations</span>

Both Plotly and the Observatory of Economic Complexity provide the HTML code for you to embed their hosted visualizations in your web page. Other visualizations you’ve created yourself, like the population pyramid, will need to be hosted somewhere if they are not produced with a service like Plotly; GitHub Pages is an excellent free option.

The last slide is an embedded clip from YouTube. I’m a big advocate of showing short video clips in class to contextualize course content; embedding those clips within the slideshow allows for a smoother transition between class discussion and the video. YouTube, and many other online video services, will provide you with the embed codes for the video.

The full R Markdown that generates the sample slideshow is available from this link.

Thanks to:

• Ramnath Vaidyanathan for authoring the Slidify and rCharts packages;
• Adam Zapletal, the creator of the Landslide presentation framework;
• Alexander Simoes (author of the Observatory of Economic Complexity), the Plotly team, and Journeyman Pictures.