class: center, middle, inverse, title-slide # Xaringan shenanigans ### Claus Thorn Ekstrøm<br>UCPH Biostatistics<br>.small[<a href="mailto:ekstrom@sund.ku.dk" class="email">ekstrom@sund.ku.dk</a>]<br><svg style="height:0.8em;top:.04em;position:relative;fill:steelblue;" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> <span class="citation">@ClausEkstrom</span> ### Copenhagen R users<br>September 26th, 2019<br>.small[Slides @ <a href="https://www.biostatistics.dk/talks/">biostatistics.dk/talks/</a>] --- ## Simple, elegant, Rmarkdown presentations `xaringan` provides access to `remark.js` - an HTML5 markdown presentation framework. ```r devtools::install_github('yihui/xaringan') ``` .pull-left[Latest version is 0.12.1] .pull-right[ <img src="pics/xaringan.png" width="50%" /> ] --- # Overview * Quick tutorial * Distribution * Advanced stuff * Tweak --- class: inverse, middle, center # Quick tutorial --- ## Your first presentation .right-column[ <img src="pics/xaringantemplate.png" width="100%" /> ] .left-column[ .footnotesize[ New R markdown -> "`presentation ninja`" template. Click `Knit` to compile it; Also serves as a user manual! ] ] --- ## Useful keys Knit the presentation from RStudio: .button[cmd]+.button[shift]+.button[k] In presentation .pull-left[ * .button[H] - help * .button[M] - mirrored ( .button[C] clone) * .button[F] - full screen ] .pull-right[ * .button[B] - blank presentation * .button[P] - presentation mode * .button[T] - restart timer ] --- ## Writing slides Write everything in [R Markdown](https://github.com/rstudio/cheatsheets/raw/master/rmarkdown-2.0.pdf) * Use triple dashes `---` for new slides * Use double dashes `--` for incremental content * Use `???` for presentation notes *All* should start in first column. And *no* spaces after! Output is HTML so can always add standard HTML codes directly (though usually not necessary). ??? Here are my presentation notes --- ## Math Expressions Write LaTeX math expressions inside a pair of dollar signs, e.g. &#36;\alpha+\beta$ renders `\(\alpha+\beta\)`. Display style with double dollars (`\begin{equation}` ... `\end{equation}`): ``` $$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$ ``` `$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$` * The source code of a LaTeX math expression should be in one line; * There **should not** be spaces after the opening `$` or before the closing `$`. --- # R code - R markdown Wrap R code in triple backticks: ` ```{r} ... ``` ` Highlight *code lines* with comment `#<<` (normal comments *before* `#<<`) Highlight *output lines* with chunk argument `highlight.output = c(3)` ```r fit <- lm(dist ~ speed, data = cars) # Not cars again *coef(summary(fit)) # Here we extract summary table ``` ``` ## 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 ``` --- # R Plots - just "work" ```r plot(cars, pch = 19, col = 'darkgray', las = 1) abline(fit, lwd = 3, col="red") ``` <!-- --> Use chunk arguments to change `fig.height` and `fig.width`. --- # Tables .pull-left[ Type in tables manually ``` | Tom | Jerry | |------|--------| | 123 | 123 | | 123 | 321 | ``` | Tom | Jerry | |------|--------| | 123 | 123 | | 123 | 321 | ] .pull-right[ Or use R: .footnotesize[ ```r knitr::kable(head(trees), format='markdown') ``` | Girth| Height| Volume| |-----:|------:|------:| | 8.3| 70| 10.3| | 8.6| 65| 10.3| | 8.8| 63| 10.2| | 10.5| 72| 16.4| | 10.7| 81| 18.8| | 10.8| 83| 19.7| ] ] --- # Include graphics ```r knitr::include_graphics("pics/horoscopes.jpeg") ``` <!-- --> --- class: inverse, middle, center # Distribution --- # Distribute HTML Copy full directory online ``` 17302 Sep 19 10:18 xaringan.html 288 Sep 19 10:18 libs 20937 Sep 19 10:18 xaringan.Rmd 480 Sep 19 09:31 pics 34 Sep 11 12:05 kutheme.R 7123 Sep 11 00:38 ku.css 96 Sep 7 11:50 xaringan_files 52789 Aug 12 22:50 animate.min.css 101312 Dec 3 2016 kulogowhiteq.png ``` Or add `self_contained: true` to YAML (more later). Slow! --- # Converting to pdf If Google Chrome/Chromium is installed then you can 1. print to pdf from chrome 2. Use the `pagedown::chrome_print()` function from `pagedown`. ```r # Either use the raw Rmd-file or resulting HTML pagedown::chrome_print("path/to/slides.Rmd") pagedown::chrome_print("path/to/slides.html") ``` Alternative: use [`decktape`](https://github.com/astefanutti/decktape): (check also `?xaringan::decktape`) ```r system("`npm bin`/decktape remark slides.html slides.pdf") # decktape v2.5.0 ``` --- class: inverse, middle, center # Advanced stuff --- ## The YAML .scriptsize[ ```yaml --- title: "A Cool Presentation" # The title author: "Donald Duck" date: "Today is yesterday's tomorrow" output: xaringan::moon_reader: # wrapper for remark.js output format lib_dir: libs # Directory to store extra libs css: ['default', 'default-fonts', 'hygge'] # Vector of css paths. Order matters! self_contained: false # Produce self-contained html seal: true # Automatic title slide from YAML nature: # Configurations passed to remark.js autoplay: 30000 # Autoplay slides. 30 seconds ratio: '16:9' # Display ratio (default 4:3) slideNumberFormat: '%current%' # Slide numbering highlightStyle: ir-black # highlight.js style highlightLines: true # Highlight code lines, ie allow #<< countIncrementalSlides: false # Incremental slides add pages --- ``` ] See the help page `?xaringan::moon_reader` for all possible options. --- ## Content classes Super powerful feature: a dotted CSS class name `.foo[text]` (translated to `<span class="foo">text</span>`, or `<div>...`. .pull-left[ * `.center` Center text * `.pull-left` Two column (left) * `.pull-right` Right col. With `hygge` added to the css list there are more options: ] .pull-right[ * `.Large`, `.large`, `.small`, `.footnotesize`, `.scriptsize`, `.tiny`: .Large[Large], .large[large], .small[small], .footnotesize[footnotesize], .scriptsize[scriptsize], .tiny[tiny] * Colours: `.black` and .red[red], .blue[blue], .green[green], .yellow[yellow], .orange[orange], .purple[purple], .gray[gray or grey] ] --- ## Content classes The `class` list can add a class to the entire slide (really a CSS class). Use `class: option1, option2, ...` as the .yellow[first content] of a slide! * `center` - center page horizontally * `middle` - center page vertically * `bottom` - move text to bottom * `inverse` - alternative format (red background for default) * `animate` - slide transition animations (add `animate.min.css` to css list!) --- background-image: url(https://eyesofodysseus.files.wordpress.com/2013/04/wpid-840237139.jpg?w=700&zoom=2) background-size: 100% # Full background image ``` background-image: url(pics/background.jpg) background-size: 100% ``` was used for this slide. --- class: animated, lightSpeedIn # Animations * Add `animate.min.css` (or similar) to YAML * Add `class: animated, animationtype` as content classes. For example `class: animated, lightSpeedIn` Possibilities can be found at [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/) [Not sure why you'd want to do this, but ...] --- class: animated, fadeIn # HTML widgets / Shiny Some HTML widgets might work. Shiny won't. .footnotesize[ ```r DT::datatable(trees, fillContainer = FALSE, options = list(pageLength = 4)) %>% formatStyle('Girth', color = 'red', backgroundColor = 'orange', fontWeight = 'bold') ``` <div id="htmlwidget-2f1e00ea0ade580676d0" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-2f1e00ea0ade580676d0">{"x":{"filter":"none","fillContainer":false,"data":[["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"],[8.3,8.6,8.8,10.5,10.7,10.8,11,11,11.1,11.2,11.3,11.4,11.4,11.7,12,12.9,12.9,13.3,13.7,13.8,14,14.2,14.5,16,16.3,17.3,17.5,17.9,18,18,20.6],[70,65,63,72,81,83,66,75,80,75,79,76,76,69,75,74,85,86,71,64,78,80,74,72,77,81,82,80,80,80,87],[10.3,10.3,10.2,16.4,18.8,19.7,15.6,18.2,22.6,19.9,24.2,21,21.4,21.3,19.1,22.2,33.8,27.4,25.7,24.9,34.5,31.7,36.3,38.3,42.6,55.4,55.7,58.3,51.5,51,77]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>Girth<\/th>\n <th>Height<\/th>\n <th>Volume<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":4,"columnDefs":[{"className":"dt-right","targets":[1,2,3]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[4,10,25,50,100],"rowCallback":"function(row, data) {\nvar value=data[1]; $(this.api().cell(row, 1).node()).css({'font-weight':'bold','color':'red','background-color':'orange'});\n}"}},"evals":["options.rowCallback"],"jsHooks":[]}</script> ] --- class: animated, rotateIn ```r library(leaflet) leaflet() %>% addTiles() %>% setView(12.570443, 55.687847, zoom = 17) ``` <div id="htmlwidget-f66df763d084dbb521aa" style="width:100%;height:432px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-f66df763d084dbb521aa">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[55.687847,12.570443],17,[]]},"evals":[],"jsHooks":[]}</script> --- class: inverse, center, middle # Tweaking - custom css --- class: animated, rollIn # Customize xaringan Either use one of the xaringan themes: [https://github.com/yihui/xaringan/wiki/Themes](https://github.com/yihui/xaringan/wiki/Themes) or type CSS directly into the R markdown file: ``` <style> ... stuff here </style> ``` Or create a CSS file and add that to the YAML. --- class: animated, zoomInRight # Example: redefine the default slide ``` @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); .remark-slide-content{ background-color: #16161d; color: #fff; font-size: 220%; /* Regular text */ font-family: 'Bitter', serif; } ``` --- # Example: redefine the title slide ``` .title-slide { background-image: url(kulogowhiteq.png); background-position: 100% 100%; background-size: 30%; background-color:#16161d; color: #fff; } ```