class: center, middle, inverse, title-slide # xaringan template for Duke University ## Combined CSS Styles ### John Little ### 2018-05-17 --- class: center, middle # xaringan -- dukeslides ### /ʃæ.'riŋ.ɡæn/ .justify-left[ This [`dukeslides`](https://johnlittle.info/dukeslides/) example slide deck extends the excellent collaborative work of the xaringan and Remark.js slide tools. With this template, slide authors can compose xaringan slides via [R Markdown](https://rmarkdown.rstudio.com/) and present with [Duke University branding](https://styleguide.duke.edu/color-palette/). [Yihui Xie](https://yihui.name/) provides wonderful [technical documentation](https://slides.yihui.name/xaringan/) and a [wiki](https://github.com/yihui/xaringan/wiki) for the [xaringan package](https://github.com/yihui/xaringan). Some of his documentation is repeated here. **My goal** is to present **example slides** with example **R Markdown** and xaringan **syntax** to demonstrate presentation styles. ] --- class: middle # NOTE Many of the *cheat sheet* examples are displayed in the slide itself. Some of the example code will be found in the presenter notes. Access **presenter notes** by pressing the keyboard shortcut .red[**`p`**]. (Or, `?` for other shortcuts) Full detailed R Markdown can always be displayed by opening the rendered HTML slides in your **web browser via `View Source`**. --- ## CSS styles The CSS style used in this example are - xaringan default ([`default`](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/default.css)) - xaringan default font ([`default-fonts`](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/default-fonts.css)) - [Duke Unversity color palette](https://styleguide.duke.edu/color-palette/) ([`duke-blue`](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/duke-blue.css)) - Duke color palette overlaid on [Hygge CSS](http://biostatistics.dk/presentations/xaringan/ghoul.html), ([`hygge-duke`](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/hygge-duke.css)) - [Creative Commons](https://creativecommons.org/) licensing [fonts](https://stackoverflow.com/a/5215916) (CC BY-NC, etc.) (`cc-fonts.css`) - figure captions (`figures.css`) You can find these style sheets declared in the `yaml` header inside the R Markdown file. --- background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Duke_University_logo.svg/640px-Duke_University_logo.svg.png) ``` css # Display background image with background-image: url() # background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Duke_University_logo.svg/640px-Duke_University_logo.svg.png) ``` ??? Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Duke_University_logo.svg) --- class: inverse, center, middle # Get Started .justify-left[ ``` r --- class: inverse, center, middle # Get Started ``` ] --- # Hello World Install the **dukeslides**¹ package from [Github](https://github.com/libjohn/dukeslides) ```r # monospace font is displayed when code is written # inside of an Rmarkdown code chunk devtools::install_github("libjohn/dukeslides") ``` .content-box-grey[ - **Create a new R Markdown document** from the menu `File -> New File -> R Markdown -> From Template -> Slide template for Duke University` ] .content-box-grey[ - Click the **`Knit`** button **to compile** the slide into rendered HTML] .footnote[ [1] [dukeslides](https://github.com/libjohn/dukeslides/) is a [Duke University branded](https://styleguide.duke.edu/color-palette/) version of [xaringan presentation slides](https://slides.yihui.name/xaringan/). ] --- # Making Bullets - List items (bullets) are invoked with a leading, left-justified dash, just like any Rmarkdown¹ document ``` r - List items (bullets) are invoked with a leading, left-justified dash, just like any Rmarkdown<sup>1</sup> document ``` .footnote[ [1] [Getting Started with R Markdown](https://rmarkdown.rstudio.com/lesson-1.html) ] -- ``` r -- ``` - Two left-justified dashes creates a pause to reveal the slide in increments. `arrow` keys and number keys advance from slide to slide. [See more documentation on incrementing](https://slides.yihui.name/xaringan/incremental.html#11) --- # Knit As previously mentioned, .content-box-grey[ - Click the **`Knit`** button **to compile** the slide into rendered HTML ] Or, use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/) "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. --- background-image: url(https://c2.staticflickr.com/6/5729/30943501632_eb0b200eed_b.jpg) class: center, top # Rock Cairn Hiking .justify-left[ ``` r --- background-image: url(https://c2.staticflickr.com/6/5729/30943501632_eb0b200eed_b.jpg) class: center, top # Rock Cairn Hiking .footer-note[.tiny[.green[Image Credit: ][Brandon Rasmussen](https://www.flickr.com/photos/137029081@N02/30943501632/in/photostream/)]] ``` ] .footer-note[.tiny[.green[Image Credit: ][Brandon Rasmussen](https://www.flickr.com/photos/137029081@N02/30943501632/in/photostream/)]] ??? ``` r --- background-image: url(https://c2.staticflickr.com/6/5729/30943501632_eb0b200eed_b.jpg) class: center, top, inverse # Rock Cairn Hiking .footer-note[.tiny[.green[Image Credit: ][Brandon Rasmussen](https://www.flickr.com/photos/137029081@N02/30943501632/in/photostream/)]] ``` --- ## Two Column .pull-left[ - You can generate a left column - by wrapping the left-hand text in `.pull-left[` foo `]` - TAGS ¹ - Splunk ] .pull-right[ - You can generate a right column - by wrapping the right-hand text in `.pull-right[` foo `]` - foo - foo ² ] ``` r # superscript is wrapped in HTML TAGS <sup>1</sup> ``` .footnote[ [1] example foonote 1 -- footnote text wrapped in `.footnote[foo]` [2] example footnote 2 ] --- class: inverse ## inverse ### h3 Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." ``` r --- class: inverse ## inverse ### h3 Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." ``` --- class: duke-softblue ## duke-softblue ``` r --- class: duke-softblue ``` Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." - one - [Google](http://google.com) - three --- class: duke-orange ## duke-orange ``` r --- class: duke-orange ``` Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." - one - [Google](http://google.com) - three --- class: duke-green ## duke-green ``` r --- class: duke-green ``` "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." - one - [Green website inspirations](https://webdesignledger.com/50-green-web-designs-to-inspire-you/) - three --- background-image: url(http://www.publicdomainpictures.net/pictures/170000/velka/hand-holding-old-keys-1462981136Ul1.jpg) background-size: contain ## hygge-duke Two Column .content-box-grey[ qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... ] .pull-left[ &nbsp; &nbsp; &nbsp; ``` r .pull-left[ nabisco crackers snackum attackum ... ] ``` ] &nbsp; .pull-right[.full-width[.rotate-left[.content-box-blue[ - Wrap the right-hand text in \.pull-right\[ \.content-box-blue\] &nbsp; &nbsp; &nbsp; ``` r .pull-right[.full-width[ .rotate-left[ .content-box-blue[snackum nabiskum] ]]] ``` ]]]] <!-- Image credit: http://www.publicdomainpictures.net/view-image.php?image=167489 --> &nbsp; .footnote[.scriptsize[ - `background-size: contain` - `View Source` to see all of the R Markdown for this slide ]] ??? Image credit: http://www.publicdomainpictures.net/view-image.php?image=167489 --- # Modifying text .pull-left[ ## Font sizes This is normal size ( `\(\LaTeX\)`-friendly terms) .Large[Large] .large[large] .small[small] .footnotesize[footnotesize] .scriptsize[scriptsize] .tiny[tiny] ] .pull-right[ ## Text color .black[black] .red[red] .blue[blue] .green[green], .yellow[yellow], .orange[orange], .purple[purple], .gray[gray or grey] You can also use `.bold[]` or `.bolder[]` to emphasize text This is .bold[bold], this is .bolder[bolder] and this is regular markdown **double-star bold** (visible differences depend on the font) ] .content-box-green[.scriptsize[.justify-center[ [Hegge CSS](http://biostatistics.dk/presentations/xaringan/ghoul.html) + [Duke Color Palette](https://styleguide.duke.edu/color-palette/) = hegge-duke.css] ]]] --- ## Coloured content boxes Use `.content-box-blue` (or gray/grey, duke-green, green, purple, red, or yellow) to produce a box with coloured background. Size depends on content. `.content-box-blue[I feel blue]` yields .content-box-blue[I feel blue] Wrap in `.full-width` to expand the width .full-width[.content-box-red[I feel wide and red]] If you have content in columns then you get .pull-left[.full-width[.content-box-yellow[**WARNING** Look out for minons or bananas]]] .pull-right[.full-width[.content-box-yellow[The box to the left was created using `.pull-left[.full-width[.content-box-yellow[]]]`]]] --- ## Coloured content boxes Use `.content-box-blue` to produce a box with blue background. Size depends on content. color has the following options: `.content-box-color` where color is blue | gray | grey | neutral | duke-green | green | purple | red | yellow &nbsp; .content-box-blue[blue] .content-box-gray[gray] .content-box-grey[grey] .content-box-neutral[neutral] &nbsp; .content-box-duke-green[duke-green] .content-box-green[green] .content-box-purple[purple] &nbsp; .content-box-red[red] .content-box-yellow[yellow] --- # CSS CSS is the key to managing the style of your slides. The cascading style sheets (CSS) are declared in the yaml header. ```yaml output: xaringan::moon_reader: css: ["default", "ubuntu-mono.css"] ``` .footnote[.content-box-green[- Slide #4 documents the styles used in this presentation - The next slide provides some information on customizing or accessing available themes] ] --- # CSS User-Contributed Themes User-contributed themes. A theme typically consists of two CSS files `foo.css` and `foo-fonts.css`, where `foo` is the theme name. Below are some existing themes: ```r names(xaringan:::list_css()) ``` ``` ## [1] "default-fonts" "default" "duke-blue" ## [4] "hygge-duke" "hygge" "metropolis-fonts" ## [7] "metropolis" "rladies-fonts" "rladies" ## [10] "robot-fonts" "robot" "rutgers-fonts" ## [13] "rutgers" "tamu-fonts" "tamu" ## [16] "uo-fonts" "uo" ``` To use a theme, you can specify the `css` option as an array of CSS filenames (without the `.css` extensions), e.g., ```yaml output: xaringan::moon_reader: css: [default, metropolis, metropolis-fonts] ``` If you want to contribute a theme to **xaringan**, please read [this blog post](https://yihui.name/en/2017/10/xaringan-themes). --- class: duke-orange # Figure Captions <figure> <img src="https://c1.staticflickr.com/5/4095/4735322270_29f2a170bb_n.jpg"> <figcaption> Image Credit: <a href="https://www.flickr.com/photos/wordridden/4735322270/in/photolist-8drLkq-646eKc-nG7uhG-quFpgc-4ucjnx-fe82eN-dYBniL-dYvFA4-9Cf4eR-6EGeNs-6HTKQj-65AZMK-fWBnJR-7xRE6a-6hXAvM-piV5xr-89EMot-6Ea5Ks-dPGTJM-dxKznu-6PLmRW-3YRkU8-5iq1tD-fmHnyr-iiLdJL-e5r9bR-5fAPht-8arifu-oBFJHP-fHytwE-7m3YaS-vKsn9-cMyqho-cNg979-gMG6Ng-6ox1FA-2MHsz8-c9LomS-bq7wvo-nt5ipG-rZ5GFD-duEHPx-pgTp2N-8mzmRJ-67XBkZ-ewrn88-b39pr2-6vRoKp-6mZfyi-6DxVuk">Salad Onions</a> by Jessica Spengler </figcaption> </figure> .justify-left[ ``` html <figure> <img src="foo.png"> <figcaption> Image Credit: foo text here </figcaption> </figure> # Must declare figure-captions in the YAML header # Must use HTML instead of RMarkdown ``` ] --- exclude: false class: center, middle background-image: url(https://blogs.library.duke.edu/magazine/files/2010/12/duke-university-libraries-logo.jpg) <!-- https://commons.wikimedia.org/wiki/File:Duke_University_logo.svg --> <!-- https://blogs.library.duke.edu/magazine/files/2010/12/duke-university-libraries-logo.jpg --> <!-- http://library.duke.edu/data/sites/default/files/datagis/images/data_gis_logo.png --> <!-- HTML comment can go here --> ??? Presenter Notes go here use 'p' to toggle the presenter mode or '?' or 'h' to toggle the help / key-shortcut options Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Duke_University_logo.svg) --- class: inverse, middle, center # More xaringan Documentation --- # 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. ```yaml --- 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. --- # using **xaringan** .pull-right[ 1. Start with an R Markdown document; 1. R Markdown (can embed R/other code chunks); 1. Provide an option `autoplay`; 1. MathJax just works;^* 1. Highlight code with `{{}}`; 1. The RStudio addin "Infinite Moon Reader" automatically refreshes slides on changes; ] .footnote[[*] Not really. See next page.] --- # Math Expressions You can write LaTeX math expressions inside a pair of dollar signs, e.g. &#36;\alpha+\beta$ renders `\(\alpha+\beta\)`. You can use the display style with double dollar signs: ``` $$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$ ``` `$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$` Limitations: 1. The source code of a LaTeX math expression must be in one line, unless it is inside a pair of double dollar signs, in which case the starting `$$` must appear in the very beginning of a line, followed immediately by a non-space character, and the ending `$$` must be at the end of a line, led by a non-space character; 1. There should not be spaces after the opening `$` or before the closing `$`. 1. Math does not work on the title slide (see [#61](https://github.com/yihui/xaringan/issues/61) for a workaround). --- # R Plots ```r # visualizations are cool, duh. par(mar = c(4, 4, 1, .1)) plot(cars, pch = 19, col = 'darkgray', las = 1) abline(fit, lwd = 2) ``` <!-- --> --- # Tables If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g., ```r knitr::kable(head(iris), format = 'html') ``` <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> </tbody> </table> --- ### more HTML (kable) table <table class="table table-striped table-hover" style="width: auto !important; margin-left: auto; margin-right: auto;"> <thead> <tr> <th style="text-align:left;"> Items </th> <th style="text-align:left;"> Features </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;font-weight: bold;border-right:1px solid;color: black;background-color: white;"> Item 1 </td> <td style="text-align:left;width: 30em; background-color: yellow;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tempor ex. Morbi malesuada sagittis turpis, at venenatis nisl luctus a. </td> </tr> <tr> <td style="text-align:left;font-weight: bold;border-right:1px solid;color: black;background-color: white;"> Item 2 </td> <td style="text-align:left;width: 30em; background-color: yellow;"> In eu urna at magna luctus rhoncus quis in nisl. Fusce in velit varius, posuere risus et, cursus augue. Duis eleifend aliquam ante, a aliquet ex tincidunt in. </td> </tr> <tr> <td style="text-align:left;font-weight: bold;border-right:1px solid;font-weight: bold;color: white;background-color: #D7261E;color: black;background-color: white;"> Item 3 </td> <td style="text-align:left;width: 30em; background-color: yellow;font-weight: bold;color: white;background-color: #D7261E;"> Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis. </td> </tr> </tbody> </table> ### Kable HTML Documentation [Documentation](https://cran.r-project.org/web/packages/kableExtra/vignettes/awesome_table_in_html.html) for HTML (kable) tables via the `library(kableExtra)` package --- # HTML Widgets ```r library(leaflet) leaflet() %>% addTiles() %>% setView(-93.65, 42.0285, zoom = 17) ``` <div id="htmlwidget-d9d322ca0c268fca4264" style="width:100%;height:432px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-d9d322ca0c268fca4264">{"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":[[42.0285,-93.65],17,[]]},"evals":[],"jsHooks":[]}</script> --- ```r DT::datatable( head(iris, 10), fillContainer = FALSE, options = list(pageLength = 8) ) ``` <div id="htmlwidget-daa02eaefafa6bdd1de8" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-daa02eaefafa6bdd1de8">{"x":{"filter":"none","fillContainer":false,"data":[["1","2","3","4","5","6","7","8","9","10"],[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>Sepal.Length<\/th>\n <th>Sepal.Width<\/th>\n <th>Petal.Length<\/th>\n <th>Petal.Width<\/th>\n <th>Species<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":8,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[8,10,25,50,100]}},"evals":[],"jsHooks":[]}</script> --- # Highlight Code - 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. --- # Highlight Code with * or `{{}}` .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} if (TRUE) { *{{ message("Very important!") }} } ``` Output: ```r if (TRUE) { * message("Very important!") } ``` ``` ## Very important! ``` It is valid R code so you can run it. Note that `{{}}` can wrap an R expression of multiple lines. ] --- # Highlight with trailing `#<<` An example of using the trailing comment `#<<` to highlight lines: ``` r library(ggplot2) ggplot(mtcars) + aes(mpg, disp) + geom_point() + #<< geom_smooth() #<< ``` Output: ```r library(ggplot2) ggplot(mtcars) + aes(mpg, disp) + * geom_point() + * geom_smooth() ``` --- # Selected xaringan documentation links 1. [xaringan documentation](https://slides.yihui.name/xaringan/) - [xarigan wiki](https://github.com/yihui/xaringan/wiki) 1. [hegge CSS](http://biostatistics.dk/presentations/xaringan/ghoul.html) 1. [incrementing slides, layouts, template, place holders](https://slides.yihui.name/xaringan/incremental.html) 1. [remark.js documentation](https://remarkjs.com) library; --- # John Little &nbsp; .pull-left[.full-width[.content-box-green[ ### Data Analytics Librarian - https://johnlittle.info/ - https://github.com/libjohn ]] ### Rfun host... You can make **Rfun** with our resources for R and data science analytics. See the [R we having fun yet‽](https://rfun.library.duke.edu/) resource pages. ] .pull-right[.content-box-grey[ ### Duke University **Data & Visualization Services** - https://library.duke.edu/data/ - askData@Duke.edu - The /Edge, Bostock (1st Floor) - [Past Workshops](https://library.duke.edu/data/news/past-workshops) - [Guides & Tutorials](https://library.duke.edu/data/tutorials) ]] --- class: center, middle ## Shareable Data, presentation, and handouts <span class="cc"> <!-- Key: a: SA, b: BY, c: CC Circle, d: ND, n: NC, m: Sampling, s: Share, r: Remix, C: CC Full Logo --> C bn </span> [CC BY-NC license](https://creativecommons.org/licenses/by-nc/4.0/)