class: center, middle, inverse, title-slide # Presentations ## And working with xaringan and xaringanthemer ### June 17th, 2022 --- ## Begin with background and motivation Every presentation has a __story__: - What is the motivation? Why should people care about your work? - You want to build up want your work is trying to address -- Example [nflWAR talk from 2017](https://www.youtube.com/watch?v=djD-yL3vWNQ): - Do __NOT__ begin with: "We're introducing WAR for NFL!" - Instead begin with current state of NFL analytics and need for better, reproducible player level-metrics -- Do __NOT__ include an outline slide! - Your presentation should flow naturally --- ## Describing the data You want to provide a general overview of your dataset: - What are your observations? i.e., what does each row of your dataset represent? -- - What are the relevant variables / features? i.e., what are the columns of interest? - Be careful though with many variables - avoid just listing everything! - Simplify by describing groups of variables together -- __Use examples__ - makes your data explicit and concrete for the audience - But Do __NOT__ print out raw `R` console output! - Use text or a clean formatted table (via `knitr`, [`DT`](https://rstudio.github.io/DT/), [`gt`](https://gt.rstudio.com/)) --- ## Introducing and describing methods - Prior to presenting results, you want to clearly state any transformations and methods used in the analysis - Your presentation should provide the general steps for someone to replicate your work - e.g., Used complete-linkage hierarchical clustering with [INSERT VARIABLES], determined `\(K\)` number of clusters by [INSERT REASON] - e.g., Modeled [INSERT RESPONSE VARIABLE] as a function of [INSERT EXPLANATORY VARIABLES] -- - For more complicated methods, you'll want to provide a brief review of the methodology - If introducing new methodology: __walk through the steps clearly__ -- - __Always justify your choice of methodology__ - Why you used a flexible tree-based model over linear regression --- ## Presenting results - Use the __assertion-evidence__ model - __Assertion__: title of the slide should be the key takeaway in brief sentence form - Indicates the point of the visualization or whatever means used to display the results - __Evidence__: the body of the slide containing the results - Display of the results in some format that is simple to explain and understand -- - Limit the amount of text in your __Evidence__ portion - brief statements with important context - Treat the __Assertion__ as the title of your __Evidence__ - Plot titles are then redundant and not necessary with an effective assertion --- ## Assertion .center[__Evidence__] --- ### MLB strikeout rates have been increasing throughout MLB's history <img src="08-Presentations_files/figure-html/lahman-example-1.png" width="100%" style="display: block; margin: auto;" /> -- (Explain the `aes` of your graph - what is each axis, color, shape, etc referring to? And what is the unit scale?) --- ## Discussion (and ending a presentation) - Conclude with a recap of the main points of your work -- - Then __point out limitations__ and indicate a __direction for the next steps__ -- - Either end with the __Discussion__ slide (or __Acknowledgements__ but this is sometimes placed at the beginning) - Never end a presentation with lone _Thank you_ slide! - Want the audience to focus on the final points in your __Discussion__ slide -- - Include back-up __Appendix__ slides with additional info, ready for questions -- - Slides for __References__ should not be displayed during your talk - Their purpose is just for sharing with others - Alternative option: include references directly on slides either in text or via footnotes¹ .footnote[ [1] Like this... ] --- ## Additional tips and reminders __Use pauses effectively__ to highlight points and explain steps -- - Showing all of your text at once can overwhelm your audience -- But -- don't -- be -- ridiculous -- Remember: __memory overload is real!__ - Do __NOT__ introduce too much notation at once - __Repetitive language and usage of words are useful and reminders for the audience__ - Use consistent language and terminology throughout the talk -- __Know your audience!__ .center[] --- class: inverse center middle # How do we make presentations? --- ## Use [`xaringan`](https://slides.yihui.org/xaringan) and [`xaringanthemer`](https://pkg.garrickadenbuie.com/xaringanthemer/articles/xaringanthemer.html) - Install both packages: [`xaringan`](https://slides.yihui.org/xaringan) and [`xaringanthemer`](https://pkg.garrickadenbuie.com/xaringanthemer/articles/xaringanthemer.html) - Create a new presentation using a template - View in-progress slides with the __Infinite Moon Reader__ addin for RStudio - More options with [xaringanExtra](https://pkg.garrickadenbuie.com/xaringanExtra/#/README?id=xaringanextra)! -- Check out public resources: - Check out [Alison Hill](https://alison.rbind.io/)'s [Meet xaringan](http://arm.rbind.io/slides/xaringan.html#1) presentation - [Chapter 7](https://bookdown.org/yihui/rmarkdown/xaringan.html) of free online `rmarkdown` book by its author [Yihui Xie](https://yihui.org/) - The rest of these slides are taken from the [`xaringanthemer`](https://pkg.garrickadenbuie.com/xaringanthemer/articles/xaringanthemer.html) template in RStudio - And google for more [examples](https://slides.earo.me/rladiesakl20/#1) --- ## Typography Text can be **bold**, _italic_, ~~strikethrough~~, or `inline code`. [Link to another slide](#colors). ### Lorem Ipsum Dolor imperdiet nostra sapien scelerisque praesent curae metus facilisis dignissim tortor. Lacinia neque mollis nascetur neque urna velit bibendum. Himenaeos suspendisse leo varius mus risus sagittis aliquet venenatis duis nec. - Dolor cubilia nostra nunc sodales - Consectetur aliquet mauris blandit - Ipsum dis nec porttitor urna sed --- name: colors ## Colors - <span style="color: var(--text-color)">Text Color</span> - <span style="color: var(--header-color); font-family: var(--header-font-family);">Header Color</span> - <span style="color: var(--link-color)">Link Color</span> - <span style="color: var(--text-bold-color); font-weight: bold;">Bold Color</span> - `inline code color` --- # Big Topic or Inverse Slides `#` ## Slide Headings `##` ### Sub-slide Headings `###` #### Bold Call-Out `####` This is a normal paragraph text. Only use header levels 1-4. ##### Possible, but not recommended `#####` ###### Definitely don't use h6 `######` --- class: inverse center middle # Topic Changing Interstitial -- ``` class: inverse center middle ``` --- layout: true ## Blocks --- ### Blockquote > This is a blockquote following a header. > > When something is important enough, you do it even if the odds are not in your favor. --- ### Code Blocks #### R Code ```r ggplot(gapminder) + aes(x = gdpPercap, y = lifeExp, size = pop, color = country) + geom_point() + facet_wrap(~year) ``` #### JavaScript ```js var fun = function lang(l) { dateformat.i18n = require('./lang/' + l) return true; } ``` --- ### More R Code ```r dplyr::starwars %>% dplyr::slice_sample(n = 4) ``` --- ```r cli::cli_alert_success("It worked!") ``` ``` ## ✓ It worked! ``` -- ```r message("Just a friendly message") ``` ``` ## Just a friendly message ``` -- ```r warning("This could be bad...") ``` ``` ## Warning: This could be bad... ``` -- ```r stop("I hope you're sitting down for this") ``` ``` ## Error in eval(expr, envir, enclos): I hope you're sitting down for this ``` --- layout: true ## Tables --- ```r tibble::as_tibble(mtcars) ``` ``` ## # A tibble: 32 x 11 ## mpg cyl disp hp drat wt qsec vs am gear carb ## <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> ## 1 21 6 160 110 3.9 2.62 16.5 0 1 4 4 ## 2 21 6 160 110 3.9 2.88 17.0 0 1 4 4 ## 3 22.8 4 108 93 3.85 2.32 18.6 1 1 4 1 ## 4 21.4 6 258 110 3.08 3.22 19.4 1 0 3 1 ## 5 18.7 8 360 175 3.15 3.44 17.0 0 0 3 2 ## 6 18.1 6 225 105 2.76 3.46 20.2 1 0 3 1 ## 7 14.3 8 360 245 3.21 3.57 15.8 0 0 3 4 ## 8 24.4 4 147. 62 3.69 3.19 20 1 0 4 2 ## 9 22.8 4 141. 95 3.92 3.15 22.9 1 0 4 2 ## 10 19.2 6 168. 123 3.92 3.44 18.3 1 0 4 4 ## # … with 22 more rows ``` --- ```r knitr::kable(head(mtcars), 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> <th style="text-align:right;"> drat </th> <th style="text-align:right;"> wt </th> <th style="text-align:right;"> qsec </th> <th style="text-align:right;"> vs </th> <th style="text-align:right;"> am </th> <th style="text-align:right;"> gear </th> <th style="text-align:right;"> carb </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> <td style="text-align:right;"> 3.90 </td> <td style="text-align:right;"> 2.620 </td> <td style="text-align:right;"> 16.46 </td> <td style="text-align:right;"> 0 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 4 </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> <td style="text-align:right;"> 3.90 </td> <td style="text-align:right;"> 2.875 </td> <td style="text-align:right;"> 17.02 </td> <td style="text-align:right;"> 0 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 4 </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> <td style="text-align:right;"> 3.85 </td> <td style="text-align:right;"> 2.320 </td> <td style="text-align:right;"> 18.61 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 1 </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> <td style="text-align:right;"> 3.08 </td> <td style="text-align:right;"> 3.215 </td> <td style="text-align:right;"> 19.44 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 0 </td> <td style="text-align:right;"> 3 </td> <td style="text-align:right;"> 1 </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> <td style="text-align:right;"> 3.15 </td> <td style="text-align:right;"> 3.440 </td> <td style="text-align:right;"> 17.02 </td> <td style="text-align:right;"> 0 </td> <td style="text-align:right;"> 0 </td> <td style="text-align:right;"> 3 </td> <td style="text-align:right;"> 2 </td> </tr> <tr> <td style="text-align:left;"> Valiant </td> <td style="text-align:right;"> 18.1 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 225 </td> <td style="text-align:right;"> 105 </td> <td style="text-align:right;"> 2.76 </td> <td style="text-align:right;"> 3.460 </td> <td style="text-align:right;"> 20.22 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 0 </td> <td style="text-align:right;"> 3 </td> <td style="text-align:right;"> 1 </td> </tr> </tbody> </table> --- ```r DT::datatable(head(mtcars), fillContainer = FALSE, options = list(pageLength = 4)) ``` <div id="htmlwidget-281bf8f0c84b4e91780c" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-281bf8f0c84b4e91780c">{"x":{"filter":"none","fillContainer":false,"data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant"],[21,21,22.8,21.4,18.7,18.1],[6,6,4,6,8,6],[160,160,108,258,360,225],[110,110,93,110,175,105],[3.9,3.9,3.85,3.08,3.15,2.76],[2.62,2.875,2.32,3.215,3.44,3.46],[16.46,17.02,18.61,19.44,17.02,20.22],[0,0,1,1,0,1],[1,1,1,0,0,0],[4,4,4,3,3,3],[4,4,1,1,2,1]],"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> --- layout: true ## Lists --- .pull-left[ #### Here is an unordered list: * Item foo * Item bar * Item baz * Item zip ] .pull-right[ #### And an ordered list: 1. Item one 1. Item two 1. Item three 1. Item four ] --- ### And a nested list: - level 1 item - level 2 item - level 2 item - level 3 item - level 3 item - level 1 item - level 2 item - level 2 item - level 2 item - level 1 item - level 2 item - level 2 item - level 1 item --- ### Nesting an ol in ul in an ol - level 1 item (ul) 1. level 2 item (ol) 1. level 2 item (ol) - level 3 item (ul) - level 3 item (ul) - level 1 item (ul) 1. level 2 item (ol) 1. level 2 item (ol) - level 3 item (ul) - level 3 item (ul) 1. level 4 item (ol) 1. level 4 item (ol) - level 3 item (ul) - level 3 item (ul) - level 1 item (ul) --- layout: true ## Plots --- ```r library(ggplot2) (g <- ggplot(mpg) + aes(hwy, cty, color = class) + geom_point()) ``` <img src="08-Presentations_files/figure-html/plot-example-1.png" width="100%" /> --- ```r g + xaringanthemer::theme_xaringan(text_font_size = 16, title_font_size = 18) + ggtitle("A Plot About Cars") ``` <img src="08-Presentations_files/figure-html/plot-example-themed-1.png" width="100%" /> --- layout: false ## Square image <center><img src="https://octodex.github.com/images/labtocat.png" height="400px" /></center> .footnote[GitHub Octocat] --- ### Wide image  .footnote[Wide images scale to 100% slide width] --- ## Two images .pull-left[  ] .pull-right[  ] --- ## Alternatively `include_graphics` <img src="http://images6.fanpop.com/image/photos/42900000/Thor-Ragnarok-2017-Loki-and-Thor-mood-compilation-thor-ragnarok-42998758-268-200.gif" width="60%" style="display: block; margin: auto;" /> --- ### Definition lists can be used with HTML syntax. <dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl> --- class: center, middle # Thanks! Slides created via the R packages: [**xaringan**](https://github.com/yihui/xaringan)<br> [gadenbuie/xaringanthemer](https://github.com/gadenbuie/xaringanthemer) The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), and [R Markdown](https://rmarkdown.rstudio.com).