Creating Presentation Slides Directly Inside Exploratory

Once you find useful insights you want to share them and communicate with others. You can create Notes to create stories based on the insights inside Exploratory and send them to others. But more often than not, you also need to present such stories to your audience in front of you in real time, like meetings, conferences, etc. And for these occasions, Presentation Slides are the de-facto format that everyone goes to.

With Exploratory v4.1, you can now create such Presentation Slides with Markdown directly inside Exploratory. We have integrated with xaringan, which is a R package that uses Remark.js to generate interactive Presentation Slides that work in web browsers.

How to Start?

You can create a new Presentation Slides by clicking ‘+’ button next to “Documents” and selecting ‘Presentation Slides’ from the menu.

Enter the title and click “Create”.

It brings up the Presentation Slide editor. It is pretty much the same as the one for the Note.

Formatting

Because Presentation Slides is also based on the RMarkdown technology, creating them is pretty much the same way for creating Notes. You use Markdown syntax to format the text. You can use the toolbar menu to quickly format if you’re not familiar with the syntax.

Preview

You can click on ‘Refresh’ button to generate the output.

And you can select ‘Open in Browser’ from the ‘Export’ menu to open the output in your web browser. This is convenient to check how it looks if you open it in the browser.

Choose Slide Size

There are two very common slide sizes supported, 4:3 ratio and 16:9 ratio.

Preview in 4:3 view.

Preview in 16:9 view.

Create a Cover Slide

Here are a couple of techniques you can use to create a nice cover slide. Note that you can use those in any slides.

Set Horizontal/Vertical Alignment

You can set horizontal/vertical alignments at the top of the slides. You can set either “left”, “center” or “right” for horizontal alignment, and either “top”, “middle” and “bottom” for vertical alignment.

class: center, middle

Use Dark Background

You can set to use white text color and black background by setting ‘inverse’ class like below at the top of the slides.

class: inverse

Set Background Color

You can set the background color by setting ‘background-color’.

background-color: #006600

Set Background Image

You can set background image by the local file path or remote URL at the top of each slide.

background-image: url(/Users/kei/Downloads/airplane.jpg)
background-size: cover;

Add Slides

You can use three dashes like below for the slide separator. The contents under the separator will be on a new slide.

Add Visualization Charts

You can insert any of the visualizations (e.g. charts, maps, pivot table, etc.) you have created into the Presentation Slides.

You can simply click on the chart icon in the toolbar to open Chart selection dialog.

Select a chart you want to embed inside the Presentation Slide.

Once you select and click ok, it inserts the Exploratory chart syntax into the slide. You can click “Refresh” button to see the preview. 

Set Height for Exploratory Charts

You can set the height in ‘%’ format to Exploratory Charts. The default height is set to “70%”. For the width, the chart always uses the full available width.


```{exploratory height="90%"}
/airline_delay_2016_09/viz/Flights-by-States-flight_Oct_2013_4
```

Add Analytics Charts

You can also add charts from your Analytics view. You can click the light bulb icon, and you can add in the same way as regular Charts above.

Add R Code Blocks

You can embed R codes inside R Code Blocks in order to run the R code on the fly and show the output in the Presentation Slides. For example, here, I’m using ‘ggplot2’ package to show a density chart for one of the data frames called ‘airline_delay_2016_09’ in the same project.

```{r}
library(ggplot2)
flight_delay %>% ggplot(aes(FL_NUM, color = name)) +
  geom_density()
```

This will produce an output like below.

Change Code Block Style

You can choose the code block style from the “Code Block Style”.

Hide R Code in the Output

By default, each R code block shows its command itself. You can set “echo=FALSE” to disable it.

```{r echo=FALSE}
library(ggplot2)
flight_delay %>% ggplot(aes(FL_NUM, color = name)) +
  geom_density()
```

Hide Warning Messages from R Code Block

Sometimes R commands throw warning messages along with the output. By default, R code block shows those warning messages if any. You can set “warning=FALSE” to not show it.


```{r echo=FALSE,warning=FALSE}
library(ggplot2)
flight_delay %>% ggplot(aes(FL_NUM, color = name)) +
  geom_density()
```

Set Size for Graphical Outputs (Charts)

You can set the graph output size by setting “fig.width” and “fig.height”. The unit is inch. You can also set how to fit the generated graph in the screen by setting “out.width” and “out.height”. The unit is px for those.

Also, if you see a blurred output, you can specify the “dpi” parameter to get a crisp output. You can try with “dpi=300” first, then adjust it.


```{r echo=FALSE, warning=FALSE, out.width=1200, out.height=600, fig.width=12, fig.height=6, dpi=300}
library(ggplot2)
flight_delay %>% ggplot(aes(FL_NUM, color = name)) +
  geom_density()
```

Add Images

You can add images to the slide by clicking the image icon, or simply copy/capture the image and paste (Command+v or Control+v) it into the text.

Change the image size

You can adjust the image size by using HTML IMG tag. You need to convert the markdown image expression to HTML IMG tag first. For example, if you have an image expression like this.

![]("/Users/kei/my_image.png")

Then, you can convert it to the HTML IMG tag like this. It shows the same image in the same style.

<img src="/Users/kei/my_image.png"/>

Then, you can add width and height styles to change the image size.

<img src="/Users/kei/my_image.png" style="width: 600px; height:400px" />

Set Font for Text

You can choose from 3 font face, 3 font size and 2 font weight.

Use Two Column Layout

You can define a two column layout by using “.pull-left” and “.pull-right”. You can put the content for each column inside the square brackets.


.pull-left[
### Flights by Day and Hour

```{exploratory}
/flight_delay/viz/Flights-by-Day-and-Hour-flight_Oct_2013_1
```

]

.pull-right[
### Flight Number by States

```{exploratory}
/flight_delay/viz/Flights-by-States-flight_Oct_2013_4
```
]

Add Presenter’s Note

You can add a Presenter’s Note followed by a line with “???” at the end of each slide. The note below the “???” doesn’t show up on the slide, but it shows up in the presenter section of the Presenter Mode. See below for more detail about the Presenter Mode.

???
Ask the audience what they would notice here.

The flights are concentrated at the morning commuting time.

An example of the Presenter Mode. The note shows up in the presenter section which only the presenter can see it.

Custom Styles using CSS

You can set your custom styles by importing your CSS file using link tag.

<link rel="stylesheet" type="text/css" href="mystyle.css">

Here is a sample CSS code.

.remark-slide-content{
  background-color: #009966;
  color: #ddffdd;
}

Show Contents Incrementally

Sometimes you want each bullet point to show up incrementally by hitting ‘Next’ key buttons like ‘Right Arrow’. You can use two dashes to load the contents incrementally.

# Suggestion

* You should take **Morning Flights** if possible.

--

* You should avoid **Friday** to fly.

--

* Some airlines don't apply these rules.

Publish and Present

Once your slides are done, there are two ways to present them. One is to publish to exploratory.io and present from there. Another is to export and present from your PC’s local file system. Let’s take a look at how you can publish to exploratory.io and present first.

You can open the Publish dialog by clicking ‘Publish’ button. In the Publish dialog, you can set the title and other information for the slides. You can also set whether you want to publish it as Public or Private mode. If you choose Private mode, then you can invite others by emails to see the slides. Once you publish your slides, you can click ‘Open in Browser’ link to open it on your web browser.

On your web browser, you can hit ‘Open in a New Window’ button at the right hand side top.

It will open the slides with its own window.

Full-Screen Mode

If you want to start presenting it you can go to Full-Screen mode by hitting f key. When you are done, you can hit ESC key to get out of the Full-Screen mode.

Also, if you want to show your slides without the header from the beginning, you can select “Open in New Window” from the menu. Then it opens up a new browser window without the header part.

Presenter Mode

If you present with an external screen or monitor, you might want to try using Presenter Mode, which will show you both the current and the next slide along with presenter notes. You can get into this mode by hitting p key.

Typically, you want to also hit c key to create a clone window, which is exactly the same as the original window and follows the page navigation done in the other window, and use that as the one shown at the external display or monitor.

Keyboard Shortcuts

There are other keyboard shortcuts than the ones introduced above. Here is a list of the shortcuts to make your presentation experience better.

  • h or ?: Toggle the help window
  • j: Jump to next slide
  • k: Jump to previous slide
  • b: Toggle blackout mode
  • m: Toggle mirrored mode.
  • c: Create a clone presentation on a new window
  • p: Toggle Presenter Mode
  • f: Toggle Fullscreen
  • t: Reset presentation timer
  • 1–9: Jump to slide #

If you can’t remember all of them, just remember ‘h’ shortcut for Help, which would show all the shortcut keys!

Export and Present

You can also export the Slides onto your local file system by clicking on Export button and choosig ‘Export as HTML’.

This will generate a zip file that contains all the necessary files to present the slides in an offline environment. You can double click on ‘slide.html’ to start the presentation.

You can use the same shortcut keys we saw at Publish and Present section above.

Reproducibility

You constantly need to update the slides for a variety of reasons. For example, you might need to change the data wrangling steps to produce the data used in the slides. Or, you might need to adjust the charts or analytics that are presented in the slides. In such cases, all you need to do with this Presentation Slides is to ‘re-run’ the slides simply by clicking ‘Refresh’ button. No need of re-exporting the chart images or re-taking the screenshots!

Has your data at the data source been updated? Then you can simply click on ‘Re-Import Data’ button at the top.

This will re-import the data from the related data sources for all the charts and analytics used in the slides. Once the ‘re-import’ is done, then you can generate the output by clicking on ‘Refresh’ button again.

This reproducibility of the slides alone is why we’d recommend you use this Presentation Slides feature to create your slides directly inside Exploratory.

Conclusion

With this new Presentation Slides support in Exploratory, you can quickly build stories around the insights directly inside Exploratory and present them to others effectively and, most importantly, in a reproducible way. Since both Notes and Presentation Slides use the same markdown syntax to produce the outputs, you can switch between the two types of notes easily. Meaning, you can copy existing Note contents and paste them to start creating Presentation Slides.

Happy Markdown Presentation Slides!


If you don’t have Exploratory Desktop yet, you can sign up from here for free. If you are currently a student or teacher, then it’s free!


R Packages / JS Libraries Referenced in this post