In gadenbuie/js4shiny: Companion Package for JavaScript for Shiny Users

class: title

options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(
  fig.width = 10, fig.height = 6, fig.retina = 2,
  warning = FALSE, message = FALSE
)

js4shiny::html_setup(stylize = c("fonts", "variables", "code"))

10 Simple Rules

To Be an .code[#rstats] Ninja

.rstudio-conf-logo[]

.talk-meta[ .talk-author[ Garrick Aden-Buie ] .talk-date[ rstudio::conf(2020, "js4shiny", day = 1, session = 'am') ] ]

---

class: break bg-purple center middle

.white[xaringan]

.white[/ʃæ.'riŋ.ɡæn/]

---

class: center, middle, inverse, hide-count

.f1.header.text-shadow-1[ Get Started ]

.footnote[ This is a totally custom section break page. ]

---

Hello World

Install the xaringan package from Github:

devtools::install_github("yihui/xaringan")

--

You are recommended to use the RStudio IDE, but you do not have to.

• Create a new R Markdown document from the menu File -> New File -> R Markdown -> From Template -> Ninja Presentation;¹

--

• Click the Knit button to compile it;

--

• or use the RStudio Addin² "Infinite Moon Reader" to live preview the slides (every time you update and save the Rmd document, the slides will be automatically reloaded in RStudio Viewer.

.footnote[ [1] 中文用户请看这份教程

[2] See #2 if you do not see the template or addin in RStudio. ]

---

class: center, bottom, inverse

You only live once!

---

Hello Ninja

You are a presentation ninja! Yihui

As a presentation ninja, you certainly should not be satisfied by the "Hello World" example. You need to understand more about two things:

1. The remark.js library;

2. The xaringan package;

Basically xaringan injected the chakra of R Markdown (minus Pandoc) into remark.js. The slides are rendered by remark.js in the web browser, and the Markdown source needed by remark.js is generated from R Markdown (knitr).

---

remark.js

You can see an introduction of remark.js from its homepage. You should read the remark.js Wiki at least once to know how to

• create a new slide (Markdown syntax^* and slide properties);

• format a slide (e.g. text alignment);

• configure the slideshow;

• and use the presentation (keyboard shortcuts).

It is important to be familiar with remark.js before you can understand the options in xaringan.

.footnote[[*] It is different with Pandoc's Markdown! It is limited but should be enough for presentation purposes. Come on... You do not need a slide for the Table of Contents! Well, the Markdown support in remark.js may be improved in the future.]

---

class: break break-shiny

Using Shiny is Awesome

.fixed.bottom-1.right-2[]

---

class: break break-shiny huge

Shiny

---

xaringan

Provides an R Markdown output format xaringan::moon_reader as a wrapper for remark.js, and you can use it in the YAML metadata, e.g.

title: "A Cool Presentation"
output:
  xaringan::moon_reader
    yolo: true
    nature:
      autoplay: 30000

See the help page ?xaringan::moon_reader for all possible options that you can use.

---

class: break break-javascript

Let's Do Some JavaScript

---

class: break break-javascript huge

.text-shadow-1[JavaScript]

---

JavaScript

```{js, js_live = FALSE} let x = 10 console.log(x * 20)

.footnote[
If you have `node` installed, this actually runs at compile time! 🎉
]

---

# JSON

```{json}
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

---

remark.js vs xaringan

Some differences between using remark.js (left) and using xaringan (right):

.pull-left[ 1. Start with a boilerplate HTML file;

1. Plain Markdown;

2. Write JavaScript to autoplay slides;

3. Manually configure MathJax;

4. Highlight code with *;

5. Edit Markdown source and refresh browser to see updated slides; ]

.pull-right[ 1. Start with an R Markdown document;

1. R Markdown (can embed R/other code chunks);

2. Provide an option autoplay;

3. MathJax just works;<sup>*</sup>

4. Highlight code with {{}};

5. The RStudio addin "Infinite Moon Reader" automatically refreshes slides on changes; ]

.footnote[[*] Not really. See next page.]

---

R Code

# a boring regression
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
dojutsu = c('地爆天星', '天照', '加具土命', '神威', '須佐能乎', '無限月読')
grep('天', dojutsu, value = TRUE)

---

R Plots

par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)

---

class: header_background

Tables

If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,

knitr::kable(head(iris), format = 'html')

---

Some Tips

• When you use the "Infinite Moon Reader" addin in RStudio, your R session will be blocked by default. You can click the red button on the right of the console to stop serving the slides, or use the daemonized mode so that it does not block your R session. To do the latter, you can set the option

  r options(servr.daemon = TRUE)

  in your current R session, or in ~/.Rprofile so that it is applied to all future R sessions. I do the latter by myself.

  To know more about the web server, see the servr package.

--

• Do not forget to try the yolo option of xaringan::moon_reader.

  yaml output: xaringan::moon_reader: yolo: true

---

Some Tips

• Slides can be automatically played if you set the autoplay option under nature, e.g. go to the next slide every 30 seconds in a lightning talk:

  yaml output: xaringan::moon_reader: nature: autoplay: 30000

--

• A countdown timer can be added to every page of the slides using the countdown option under nature, e.g. if you want to spend one minute on every page when you give the talk, you can set:

  yaml output: xaringan::moon_reader: nature: countdown: 60000

  Then you will see a timer counting down from 01:00, to 00:59, 00:58, ... When the time is out, the timer will continue but the time turns red.

---

Some Tips

• There are several ways to build incremental slides. See this presentation for examples.

• The option highlightLines: true of nature will highlight code lines that start with *, or are wrapped in {{ }}, or have trailing comments #<<;

  yaml output: xaringan::moon_reader: nature: highlightLines: true

  See examples on the next page.

---

Some Tips

.pull-left[ An example using a leading *:

```r
if (TRUE) {
** message("Very important!")
}
```

Output:

if (TRUE) {
* message("Very important!")
}

This is invalid R code, so it is a plain fenced code block that is not executed. ]

.pull-right[ An example using {{}}:

`r ''````r
if (TRUE) {
*{{ message("Very important!") }}
}
```

Output:

if (TRUE) {
{{ message("Very important!") }}
}

It is valid R code so you can run it. Note that {{}} can wrap an R expression of multiple lines. ]

---

Some Tips

An example of using the trailing comment #<< to highlight lines:

`r ''````r
library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
  geom_point() +   #<<
  geom_smooth()    #<<
```

Output:

library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
  geom_point() +   #<<
  geom_smooth()    #<<

---

Some Tips

• To make slides work offline, you need to download a copy of remark.js in advance, because xaringan uses the online version by default (see the help page ?xaringan::moon_reader).

• You can use xaringan::summon_remark() to download the latest or a specified version of remark.js. By default, it is downloaded to libs/remark-latest.min.js.

• Then change the chakra option in YAML to point to this file, e.g.

  yaml output: xaringan::moon_reader: chakra: libs/remark-latest.min.js

• If you used Google fonts in slides (the default theme uses Yanone Kaffeesatz, Droid Serif, and Source Code Pro), they won't work offline unless you download or install them locally. The Heroku app google-webfonts-helper can help you download fonts and generate the necessary CSS.

---

Macros

• remark.js allows users to define custom macros (JS functions) that can be applied to Markdown text using the syntax ![:macroName arg1, arg2, ...] or ![:macroName arg1, arg2, ...](this). For example, before remark.js initializes the slides, you can define a macro named scale:

  js remark.macros.scale = function (percentage) { var url = this; return '<img src="' + url + '" style="width: ' + percentage + '" />'; };

  Then the Markdown text

  markdown ![:scale 50%](image.jpg)

  will be translated to

  html <img src="image.jpg" style="width: 50%" />

---

Macros (continued)

• To insert macros in xaringan slides, you can use the option beforeInit under the option nature, e.g.,

  yaml output: xaringan::moon_reader: nature: beforeInit: "macros.js"

  You save your remark.js macros in the file macros.js.

• The beforeInit option can be used to insert arbitrary JS code before remark.create(). Inserting macros is just one of its possible applications.

gadenbuie/js4shiny documentation built on March 25, 2024, 8:16 p.m.