class: center, middle, inverse, title-slide # An Introduction to Xaringan ## University of Toronto Theme & Template ###
Kuan Liu, PhD(c)
Dalla Lana School of Public Health
University of Toronto ###
May 7, 2021 --- class: ut-pantone_babyblue # **Some Background** <!-- # **.white[white colour font if you prefer]** --> --- ## What is Xarigan? .pull-left[ - **Xaringan** is a R package created by [Yihui Xie](https://github.com/yihui/xaringan) to generate presentation slides in R with Rmarkdown. - Just like Rmarkdown, you can type latex and display R code and output in your slides + It enables the use of .red[interactive plots] and .red[html widgets], + i.e., plotly, shiny apps and maps with leaflet - You can also code in html and css! + Simple embedding of online audio, videos, Google map etc + modify the theme and style of your slides ] .pull-right[ - **Xaringan** was derived from Sharingan, a dōjutsu (eye technique) in the Japanese anime Naruto + that can .blue[hypnotize] and show .blue[insights] of your "enemies" (audience) 😮  ] --- class: ut-pantone_red # .white[**Showcase Cool Stuffs**] --- ## Embeding Google Map > Instruction: go to google map, search for location, select share and click on **Embed a map** and copy the iframe code <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2886.468727620375!2d-79.39483388413716!3d43.6592205791212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34c78d6c73e5%3A0x95936ca377bfc3e9!2sThe%20Dalla%20Lana%20School%20of%20Public%20Health!5e0!3m2!1sen!2sca!4v1620399822627!5m2!1sen!2sca" width= 100% height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe> --- ## Embeding Online Videos .pull-left[ ### From online MP4 files <!-- You can change controls to autoplay to adds video controls, like play, pause, and volume. --> <video width="560" height="315" controls> <source src="https://insulin100.utoronto.ca/wp-content/uploads/2020/11/banting_film-loop-lab-620x420-02.mp4" type="video/mp4"> </video> ] .pull-right[ ### From Youtube <iframe width="560" height="315" src="https://www.youtube.com/embed/SYd-jjrUvug" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- ## Embeding Dashboard Apps (yes shinyapps!) <iframe src="https://art-bd.shinyapps.io/covid19canada/" style="width: 100%; height: 500px; border-style:none"></iframe> --- class: ut-pantone_yellow # **Getting started!** --- ## Installing <svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg"> <title></title> <path d="M336,176h40a40,40,0,0,1,40,40V424a40,40,0,0,1-40,40H136a40,40,0,0,1-40-40V216a40,40,0,0,1,40-40h40" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path> <polyline points="176 272 256 352 336 272" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline> <line x1="256" y1="48" x2="256" y2="336" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg> - Install the **xaringan** package from [Github](https://github.com/yihui/xaringan): ```r devtools::install_github("yihui/xaringan") ``` .pull-left[ - You will also need two other CSS files for the custom University of Toronto styling: - `utoronto-fonts.css` - `utoronto.css` ] .pull-right[ - If you want the University Logo to show up on the title slide, you'll also need - `UT-Logo.svg` ] - These are available in the assets folder of the GitHub repository [<svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg"> <title></title> <path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path></svg> `Kuan-Liu/xaringan_utoronto`](https://github.com/Kuan-Liu/xaringan_utoronto/assets) - You can download or fork the entire repo to start coding your own presentation! 🥂 --- ## RStudio Infinite Moon Reader - Auto Render to html ```r xaringan::inf_mr() #auto render whenever you save your .rmd file; ``` - More information see, https://yihui.org/en/2019/02/ultimate-inf-mr/ - Presentation slides allow interactive nevigation features - Try typing .red[**h**] or .red[**?**] - this will show you a list of presentation shortcuts --- ## Create a new slide - Delimit slides **using three hyphens (`---`)**, eg: ```md --- # This is the title of the slide The body of the slide is in **markdown**. You can use markdown for: ## Subheadings (eg this h2) ### Subsubheadings (eg this h3) #### Subsubsubheading (eg this h4) ``` *** For more information on markdown see [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/) or this tutorial or [Literate Programming in R](https://annakrystalli.me/literate-programming/) --- ## Title of the slide The body of the slide is in **markdown**. You can use markdown for: ## Subheadings (eg this h2) ### Subsubheadings (eg this h3) #### Subsubsubheading (eg this h4) You can use it for lists: - _list item_ - _another list item_ And of course [hyperlink (to my personal website)](https://http://www.kuan-liu.com/) --- ## Background images **Background images can be set via the `background-image` property**. The image can be either a local file or an online image. The **path should be put inside `url()`**, which is the CSS syntax. You can also **set the background image size and position**, e.g., ```yaml --- background-image: url("https://arthistory.utoronto.ca/sites/arthistory.utoronto.ca/files/styles/slider_large_img/public/front_carousel/HH01.jpg?itok=ukdDyPF0") background-position: center background-size: contain --- ``` --- background-image: url("https://arthistory.utoronto.ca/sites/arthistory.utoronto.ca/files/styles/slider_large_img/public/front_carousel/HH01.jpg?itok=ukdDyPF0") background-position: center background-size: contain --- ## Two-column layout `.pull-left[ ]` and `.pull-right[ ]` provide a two-column layout, and the two columns are of the same width. ```markdown .pull-left[ - something something. - something something something something. ] .pull-right[  ] ``` --- ## Two-column layout looks like this .pull-left[ - something something. - something something something something. ] .pull-right[  ] --- # Incremental slide content The easiest way to **define incremental splits is by using `--`** -- ```md - Incremental point 1 -- - Incremental point 2 ``` *** -- - Incremental point 1 -- - Incremental point 2 -- *** For more options see [this presentation](https://slides.yihui.name/xaringan/incremental.html). --- class: center, middle # Fancy Incremental with Text It is also possible to change the .blue[color] of any text by using `.color[text here]` -- For example `.grey[grey]` will make text .grey[grey]. -- We can do this with .black[black], .red[red], .blue[blue], .green[green], .yellow[yellow], .orange[orange], .purple[purple], .grey[grey]. -- To make text stand out we can use standard markdown `**text**` like **this** or `.bold[this]` .bold[this]. Or italics using `_italic_` _italic_. You can string together these formats, e.g. `.blue[.bold[...]]` to get .blue[.bold[blue and bold text]]. -- .left[.footnote[ ``` The text on this slide is centered and in the middle of the slide because the slide began with: class: centre, middle ``` ]] --- ## Math Expressions - You can write LaTeX math expressions inside dollar signs - use the display style with double dollar signs ``` $$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$ .small[$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$ ``` `$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$` .footnotesize[$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$] - For inline math you can use single dollar signs - for example, `\bar{X}` gives us `\(\bar{X}\)` --- ## Equation and Align - For multi-line equations you can use <span>`\`</span>`begin{align} ... `</span>`\`</span>`end{align}` `\begin{align} \bar{X} & = X_1 + X_2 + \ldots + X_n \nonumber \\ & = \frac{1}{n}\sum_{i=1}^nX_i \label{good-eq} \end{align}` - Reference equations using <span>`\`</span>`eqref{label}`, \eqref{good-eq}, or <span>`\`</span>`ref{label}`, \ref{good-eq}. - Make sure to include **mathjax-equation-numbers.html** in the top setting ``` output: xaringan::moon_reader: includes: * in_header: "assets/mathjax-equation-numbers.html" ``` --- class: ut-pantone_lime # **Working with R** --- ## R code and highlighting .pull-left[ An example using a leading `*`: ```r if (TRUE) { ** message("Very important!") } ``` Output: ```r 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 tidy=FALSE, message=FALSE} if (TRUE) { *{{ message("Very important!") }} } ``` Output: ```r if (TRUE) { * message("Very important!") } ``` It is valid R code so you can run it. ] --- ## R output - Print the results of statistical tests ``` # Estimate Std. Error t value Pr(>|t|) # (Intercept) -17.579095 6.7584402 -2.601058 1.231882e-02 # speed 3.932409 0.4155128 9.463990 1.489836e-12 ``` - Use pre-defined `.scroll-output[]` class to enable scrolling R output .scroll-box-8[ ```r step(lm(Fertility~.,data = swiss)) ``` ``` ## Start: AIC=190.69 ## Fertility ~ Agriculture + Examination + Education + Catholic + ## Infant.Mortality ## ## Df Sum of Sq RSS AIC ## - Examination 1 53.03 2158.1 189.86 ## <none> 2105.0 190.69 ## - Agriculture 1 307.72 2412.8 195.10 ## - Infant.Mortality 1 408.75 2513.8 197.03 ## - Catholic 1 447.71 2552.8 197.75 ## - Education 1 1162.56 3267.6 209.36 ## ## Step: AIC=189.86 ## Fertility ~ Agriculture + Education + Catholic + Infant.Mortality ## ## Df Sum of Sq RSS AIC ## <none> 2158.1 189.86 ## - Agriculture 1 264.18 2422.2 193.29 ## - Infant.Mortality 1 409.81 2567.9 196.03 ## - Catholic 1 956.57 3114.6 205.10 ## - Education 1 2249.97 4408.0 221.43 ``` ``` ## ## Call: ## lm(formula = Fertility ~ Agriculture + Education + Catholic + ## Infant.Mortality, data = swiss) ## ## Coefficients: ## (Intercept) Agriculture Education Catholic ## 62.1013 -0.1546 -0.9803 0.1247 ## Infant.Mortality ## 1.0784 ``` ] --- ## Plot output ```r library("tidyverse") cars %>% ggplot(aes(x = dist, y = speed)) + geom_point() + * geom_smooth(method = 'lm', # highlighted using {{... formula = y ~ poly(x, 2))}} + theme_bw(base_size = 24) + labs(y = "Speed (mph)", x = "Stopping distance (ft)") ``` <img src="index_files/figure-html/unnamed-chunk-6-1.png" width="864" style="display: block; margin: auto;" /> --- # R Table with kable ```r knitr::kable(iris[1:10, 1:5], format = "html") ``` .small[ <table> <thead> <tr> <th style="text-align:right;"> Sepal Length </th> <th style="text-align:right;"> Sepal Width </th> <th style="text-align:right;"> Petal Length </th> <th style="text-align:right;"> Petal Width </th> <th style="text-align:left;"> Species </th> </tr> </thead> <tbody> <tr> <td style="text-align:right;"> 5.1 </td> <td style="text-align:right;"> 3.5 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;"> 3.0 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.7 </td> <td style="text-align:right;"> 3.2 </td> <td style="text-align:right;"> 1.3 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.6 </td> <td style="text-align:right;"> 3.1 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.0 </td> <td style="text-align:right;"> 3.6 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.4 </td> <td style="text-align:right;"> 3.9 </td> <td style="text-align:right;"> 1.7 </td> <td style="text-align:right;"> 0.4 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.6 </td> <td style="text-align:right;"> 3.4 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.3 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.0 </td> <td style="text-align:right;"> 3.4 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.4 </td> <td style="text-align:right;"> 2.9 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;"> 3.1 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.1 </td> <td style="text-align:left;"> setosa </td> </tr> </tbody> </table> ] --- # Leaflet maps ```r library(leaflet) leaflet() %>% addTiles() %>% # Add default OpenStreetMap map tiles addMarkers(lat=43.66, lng=-79.39, popup="University of Toronto") ```
--- # Interactive data tables .small[ ```r DT::datatable( head(gapminder::gapminder, 9), fillContainer = FALSE, options = list(pageLength = 6) ) ```
] --- ## Interactive R plots ```r p <- ggplot(gapminder::gapminder, aes(gdpPercap, lifeExp, color = continent)) + geom_point(alpha = 0.5) + geom_smooth() + scale_x_log10() + theme_bw() plotly::ggplotly(p) ```
--- class: title-slide # **Supporting slides** --- class: ut-pantone_babyblue ## Title for ut-pantone_babyblue class ### .white[Subtitle for ut-pantone_babyblue class] body text here .footnote[ ``` class: ut-pantone_babyblue ``` ] --- class: ut-pantone_red ## .white[Title for ut-pantone-red class] ### .white[Subtitle for ut-pantone_red class] body text here we have to use .white[my headers] to set the header colour to white with this background .footnote[ ``` class: ut-pantone_red ``` ] --- class: ut-pantone_yellow ## Title for ut-pantone_yellow class ### Subtitle for ut-pantone_yellow class body text here .footnote[ ``` class: ut-pantone_yellow ``` ] --- class: ut-pantone_lime ## Title for ut-pantone_lime class ### Subtitle for ut-pantone_lime class body text here .footnote[ ``` class: ut-pantone_lime ``` ] --- class: ut-pantone_pink ## Title for ut-pantone_pink class ### Subtitle for ut-pantone_pink class body text here .footnote[ ``` class: ut-pantone_pink ``` ] --- ## Font sizes .pull-left[ - .font90[.font90] - .font100[normal size .font100] - .font110[.font110] - .font120[.font120] - .font130[.font130] - .font140[.font140] - .font150[.font150] ] .pull-right[ - .code90[`.code90[]`] - .code100[`normal size .code100[]`] - .code110[`.code110[]`] - .code120[`.code120[]`] - .code130[`.code130[]`] - .code140[`.code140[]`] - .code150[`.code150[]`] ] --- ## Font sizes This is normal sized and coloured text. With a normal size code and output: ```r rnorm(2) ``` ``` ## [1] -0.04312582 -0.28321078 ``` .blue[.small[This blue text is in a `.blue[.small[...]]` chunk. Everything is shrunk to 90% including the `inline code` as well as code chunks and their output: ```r rnorm(2) ``` ``` ## [1] -0.02271085 -0.46042765 ``` ]] --- ## Lists, increments and footnotes .pull-left[ - Unordered lists<sup>1</sup> - can be created using "-" - and they can be nested using 2 or 4 space.fn[2] - deep nested - original nesting level ] .pull-right[ - Ordered list 1. one 2. two 3. three ] .footnote[ [1] Footnotes are not automatic. In the text use `<sup>1</sup>` or `.fn[1]` [2] At the end of the slide `.footnote[[1] Text associated with footnote 1.]` ] --- ## Icons and emoji - Install the following packages in R to enable the use of emoji and icons ``` devtools::install_github("hadley/emo") remotes::install_github("mitchelloharawild/icons") ``` - For more info see https://github.com/mitchelloharawild/icons and https://github.com/hadley/emo for more info --- ## Highlight boxes - You can highlights words using content boxes 1. .content-box-a1[`.content-box-a1[]`] 2. .content-box-a3[`.content-box-a3[]`] 3. .content-box-a2[`.content-box-a2[]`] 4. .content-box-a4[`.content-box-a4[]`] - The UT theme included four content boxes created using the official accent colours --- ## Quotes .small[ We can include **block quotes** using<br> `<blockquote>Quote goes here</blockquote>` or<br> `> Quote goes here` or `.blockquote[Quote here]` ] .pull-left[ <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ] .pull-right[.small[ ``` <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ``` ]] --- # About Me - **Kuan Liu, PhD(c)**, _University of Toronto_ + Twitter [@KuanLiu2](https://twitter.com/KuanLiu2) + GitHub [@Kuan-Liu](https://github.com/Kuan-Liu) + Email **kuan.liu[at]mail.utoronto.ca** + Personal website **https://www.kuan-liu.com/** - You can find this template at **https://github.com/Kuan-Liu/xaringan_utoronto** - and a "permanent link" to the slides at https://ut-xaringan.kuan-liu.com/#1 - Credit: This template and tutorial is created based on [Garth Tarr](https://github.com/garthtarr/sydney_xaringan/blob/master/index.Rmd) and [Anna Krystalli](https://annakrystalli.me/talks/xaringan/xaringan.html#1)'s work. --- background-image: url(https://brand.utoronto.ca/wp-content/uploads/virtual-meeting-background-thumb1.jpg) background-position: 50% 75% background-size: 80% 75% ## Have fun with Xaringan!