class: center, middle, inverse, title-slide # Title ## Subtitle ### <large>Author Name</large> --- class: center, middle # With this template, it is very easy to build good looking slides ## and you can centre everything for title/section/other slides --- class: middle, inverse, iheid-red ## You can colour the background and add images using straightforward markdown syntax .center[ .polaroid[] James Hollway (Instructor) ] --- ## You can also pull images (or text) to the left or right to build columns .pull-left[ .polaroid[] James Hollway (Instructor) ] .pull-right[ I can add paragraphs of extra information... or a bullet list... - one - two - three or a numbered list... 1. one 1. two 4. three ] --- class: split-four, center # Present your team by slicing the slide up with ninjutsu! .column[.pull-down[ *Prof. Smith* Principal Investigator ]] .column[.pull-down[ *Dr. Jones* Doctoral Research Assistant ]] .column[.pull-down[ *Ms. Dupont* Research Assistant ]] .column[.pull-down[ *Mr. Dupond* Research Assistant ]] --- ## You can build a step-by-step reveal -- By using double dashes `--` to separate lines of text or code, we can build a slide up gradually. -- For example here is some more text... -- Or here is an example of some math... $$ X = \sum_i^n x_i $$ -- Or here is a quick plot built (and cached) when the Rmarkdown document is run: ```r plot(iris) ``` <img src="02-slides_files/figure-html/unnamed-chunk-1-1.png" width="504" /> --- class: highlight-last-item ## Add progressive lists Adding the class `highlight-last-item` allows you to highlight the last element of a progressive list. - First item -- - Second item -- - For more options, see the `iheid-xaringan-style.css` file and search for "progressive slides". This feature was based on [this great article](https://www.garrickadenbuie.com/blog/better-progressive-xaringan/?panelset2=r-markdown3&panelset=r-markdown&panelset1=slides2). --- class: show-only-last-code-result ## Progressive code Adding the class `show-only-last-code-result` allows you to render only the last code result. ```r runif(5) ``` ``` ## [1] 0.3309911 0.0629267 0.9818636 0.6678840 0.7814797 ``` -- ```r rnorm(5) ``` ``` ## [1] -1.52496611 0.06993266 -1.29372485 0.00552295 -0.44708406 ``` -- ```r rbinom(5, 1, 0.5) ``` ``` ## [1] 1 0 1 1 0 ``` -- ```r rcauchy(5) ``` ``` ## [1] 2.207553 2.094960 3.352931 7.440851 -1.169294 ``` --- class: center, middle ## Or you can highlight which section of your presentation you are up to... .pull-1[.circleoff[]] .pull-1[.circleon[]] .pull-1[.circleoff[]] --- class: left, middle .blockquote[You can add unquotable quotes ~ Some person] --- class: with-logo logo-iheid ## Add a logo to your presentation .pull-left[Adding a nice looking logo to your presentation is easy. Simply define the `with-logo` class alongside the class of the logo itself (`logo-iheid` in this case) on every slide you want the logo to appear. See [the presentation vignette](https://github.com/jhollway/iheiddown) for a list of the included logos.] --- ## Add Maps ```r library(leaflet) leaflet() %>% addTiles() %>% setView(6.1435, 46.2210, zoom = 17) ``` <div id="htmlwidget-ca191aa3b8ce2a9d7983" style="width:720px;height:288px;" class="leaflet html-widget"></div> <script type="application/json" data-for="htmlwidget-ca191aa3b8ce2a9d7983">{"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":[[46.221,6.1435],17,[]]},"evals":[],"jsHooks":[]}</script> --- ## Add some tables ! With the addition of the excellent [`{xaringan_columns}`](https://github.com/emilyriederer/xaringan_columns) macros by Emily Riederer, you can create nice looking multicolumn tables using clean markdown code. ![:col_header Header 1, Header 2, Header 3, Header 4, Header 5] ![:col_list You can add rows with bulletted lists, item2, item3, hello, more content] ![:col_list item4, item5, Or normal chunks of text (see below), la la la, tra la la] ![:col_row More text, More text, ., More text, More text ] --- ## More tables; kable and kableExtra packages .pull-left[Kable: great features for displaying simple tables! ```r knitr::kable(head(mtcars[1:4], 5), format = 'html') ``` <table> <thead> <tr> <th style="text-align:left;"> </th> <th style="text-align:right;"> mpg </th> <th style="text-align:right;"> cyl </th> <th style="text-align:right;"> disp </th> <th style="text-align:right;"> hp </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> Mazda RX4 </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;"> 110 </td> </tr> <tr> <td style="text-align:left;"> Mazda RX4 Wag </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;"> 110 </td> </tr> <tr> <td style="text-align:left;"> Datsun 710 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 108 </td> <td style="text-align:right;"> 93 </td> </tr> <tr> <td style="text-align:left;"> Hornet 4 Drive </td> <td style="text-align:right;"> 21.4 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 258 </td> <td style="text-align:right;"> 110 </td> </tr> <tr> <td style="text-align:left;"> Hornet Sportabout </td> <td style="text-align:right;"> 18.7 </td> <td style="text-align:right;"> 8 </td> <td style="text-align:right;"> 360 </td> <td style="text-align:right;"> 175 </td> </tr> </tbody> </table> See [the knitr documentation](https://bookdown.org/yihui/rmarkdown-cookbook/kable.html) for additional options. ] .pull-right[Want to get fancier? Use kableExtra! ```r head(mtcars[1:4], 3) %>% kableExtra::kbl()%>% kableExtra::kable_material(c("hover", "striped", "condensed"), full_width = F) ``` <table class=" lightable-material lightable-striped lightable-hover" style='font-family: "Source Sans Pro", helvetica, sans-serif; width: auto !important; margin-left: auto; margin-right: auto;'> <thead> <tr> <th style="text-align:left;"> </th> <th style="text-align:right;"> mpg </th> <th style="text-align:right;"> cyl </th> <th style="text-align:right;"> disp </th> <th style="text-align:right;"> hp </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> Mazda RX4 </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;"> 110 </td> </tr> <tr> <td style="text-align:left;"> Mazda RX4 Wag </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;"> 110 </td> </tr> <tr> <td style="text-align:left;"> Datsun 710 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 108 </td> <td style="text-align:right;"> 93 </td> </tr> </tbody> </table> See [the kableExtra documentation](https://cran.r-project.org/web/packages/kableExtra/vignettes/awesome_table_in_html.html) for additional options. ] --- ## Interactive tables; DT package ```r library(DT) DT::datatable(head(mtcars, 10), fillContainer = FALSE, options = list(pageLength = 4)) ``` <div id="htmlwidget-8bdb28e1e1ea1081b9f0" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-8bdb28e1e1ea1081b9f0">{"x":{"filter":"none","vertical":false,"fillContainer":false,"data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280"],[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2],[6,6,4,6,8,6,8,4,4,6],[160,160,108,258,360,225,360,146.7,140.8,167.6],[110,110,93,110,175,105,245,62,95,123],[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92],[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44],[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3],[0,0,1,1,0,1,0,1,1,1],[1,1,1,0,0,0,0,0,0,0],[4,4,4,3,3,3,3,4,4,4],[4,4,1,1,2,1,4,2,2,4]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>mpg<\/th>\n <th>cyl<\/th>\n <th>disp<\/th>\n <th>hp<\/th>\n <th>drat<\/th>\n <th>wt<\/th>\n <th>qsec<\/th>\n <th>vs<\/th>\n <th>am<\/th>\n <th>gear<\/th>\n <th>carb<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":4,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4,5,6,7,8,9,10,11]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[4,10,25,50,100]}},"evals":[],"jsHooks":[]}</script> See the [DT package documentation](https://rstudio.github.io/DT/) for the additional options. --- class: animate__animated, animate__slideInRight ## Add slide transitions to your slides Simply add the class `animate__animated` and the class corresponding to the desired animation such as `animate__slideInRight`, et voilà! For a complete list of the available animations and further options, visit [animate.style](https://animate.style/). .center[] --- background-image: url(https://media1.giphy.com/media/xT0BKiK5sOCVdBUhiM/giphy.gif) background-size: contain # And finally, you can add gifs! --- class: inverse iheid-red center middle with-logo logo-iheid_BW Made with `{iheiddown}`, the R-package for IHEID publications (Hollway, 2021). --- # References Hollway, J. (2021). _iheiddown: A package for writing IHEID documents in RMarkdown_. R package version 0.8.0. URL: [https://github.com/jhollway/iheiddown](https://github.com/jhollway/iheiddown).