class: left, bottom background-image: url("images/contour.png") background-position: right background-size: auto # Markdown & Notebooks ### Merging Data, Verbiage, Analyses, & Results <p> </p> <p> </p> <img src="images/logo1.svg" width="400px"> --- class: sectionTitle # But WHY? --- background-image: url("https://live.staticflickr.com/65535/50880814503_4efb8e1b8e_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- background-image: url("https://live.staticflickr.com/65535/50881637532_84832f6ab5_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- background-image: url("https://live.staticflickr.com/65535/50881533096_6773eb1ffc_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- background-image: url("https://live.staticflickr.com/65535/50881532926_6a4b11ef29_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- background-image: url("https://live.staticflickr.com/65535/50881637242_2679ab5371_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- background-image: url("https://live.staticflickr.com/65535/50881674822_fa6bcb2acd_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- background-image: url("https://live.staticflickr.com/65535/50881658837_8729965515_o_d.png") background-position: left background-size: auto # How do we communicate about our data? --- # Reproducible Research One of the prime goals for us as scientists is to produce quality, *reproducible* research. One of the easiest ways to do this is to put the data, analyses, and interpretation as close to each other as possible. --  --- background-image: url("https://live.staticflickr.com/65535/50881870486_ce99a1f7b2_o_d.png) background-position: right background-size: auto # One Document to Rule them All .pull-left[ Easily move from R Markdown to a wide range of output styles, both static and dynamic.  ] --- background-image: url("https://live.staticflickr.com/65535/50881919942_aa77880202_w_d.jpg") background-position: right background-size: contain # Markdown & Ohter Formats Pandoc - Universal "Rosetta Stone" - Converts Between Types - Built into RStudio --- # Creating A Markdown Document .pull-left[ File `\(\to\)` New File `\(\to\)` R Markdown (.red[OR] R Notebook) - Built-in Templates - Documents, applications, and presentations ] .pull-right[  ] --- # Notebooks vs Markdown Two different types of markdown documents. *Markdown Document* - A Document that can be turned into HTML, Word, PDF, Powerpoint, etc. *Markdown Notebook* - A markdown document that contains the underlying RMD file itself. ## Demo Time!! --- class: sectionTitle # Markdown --- # Textual Representations > Text is text, nothing more, nothing less. -- .pull-left[ ### Markdown `This is text` ] .pull-right[ ### Shows As This is text ] -- .pull-left[ `*Homo sapien*` ] .pull-right[ *Homo sapien* ] -- .pull-left[ `**Stuff**` ] .pull-right[ **Stuff** ] -- .pull-left[ `> To be, or not to be...` ] .pull-right[ > To be, or not to be... ] --- # Textual Representations - Headers .pull-left[ ### Markdown `# Primary Heading` ] .pull-right[ ### Shows As # Primary Heading ] -- .pull-left[ `## Secondary Heading` ] .pull-right[ ## Secondary Heading ] -- .pull-left[ `### Tertiary Heading` ] .pull-right[ ### Tertiary Heading ] --- # Lists Representations > Just type them out -- .pull-left[ ### Markdown <pre> - Thing - Other Thing </pre> ] .pull-right[ ### Shows As - Thing - Other Thing ] .pull-left[ <pre> 1. First thing in ordered list 2. Next thing </pre> ] .pull-right[ 1. First thing in ordered list 2. Next thing ] --- # Links & URL's RMarkdown is smart enough to make a raw link into a clickable link. See https://rmarkdown.rstudio.com for more information on how markdown is implemented in RStudio. -- .pull-left[ ### Markdown `This is [my website](https://dyerlab.org)` ] .pull-right[ ### Shows As This is [my website](https://dyerlab.org) ] -- .pull-left[ `` ] .pull-right[  ] --- # Tables Tables can be statically written in markdown by defining the columns using the pipe character and the header by dashes. .pull-left[ ### Raw Text ``` Source | df | SS -------|----|----- Model | 1 | 23.23 Error | 41 | 232.32 Total | 42 | 255.55 ``` ] -- .pull-right[ ### Becomes Source | df | SS -------|----|----- Model | 1 | 23.23 Error | 41 | 232.32 Total | 42 | 255.55 ] -- .red[Important:] The end of each row in a table needs 2 spaces. --- # HTML Encodings ([characters](https://www.w3schools.com/html/html_charset.asp) & [emoji](https://www.w3schools.com/charsets/ref_emoji.asp)) You can embed content as raw HTML into R Markdown and it will convert it. ### `©` `\(\to\)` © ### `β` `\(\to\)` β ### `💩` `\(\to\)` 💩 ### `🍺` `\(\to\)` 🍺 --- # Embedding Videos You can use iframes to embed videos .pull-left[ `<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>` ] .pull-right[ <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- # Embedding Live Pages You can use iframes to embed other web pages (like this presentation with an embed of itself). .pull-left[ `<iframe width="560" height="315" src="https://dyerlab.github.io/ENVS-Lectures/markdown/r_markdown/slides.html"></iframe>` ] .pull-right[ <iframe width="560" height="315" src="https://dyerlab.github.io/ENVS-Lectures/markdown/r_markdown/slides.html"></iframe> ] --- class: sectionTitle # Code & Markdown --- # Code Chunks A set of code can be inserted as a single chunk. (Keyboard Shortcut: CMD+OPT+i)  becomes ```r library( sf ) ``` ``` ## Linking to GEOS 3.9.1, GDAL 3.4.0, PROJ 8.1.1; sf_use_s2() is TRUE ``` ```r nc <- st_read(system.file("shape/nc.shp", package="sf")) ``` ``` ## Reading layer `nc' from data source ## `/Library/Frameworks/R.framework/Versions/4.1/Resources/library/sf/shape/nc.shp' ## using driver `ESRI Shapefile' ## Simple feature collection with 100 features and 14 fields ## Geometry type: MULTIPOLYGON ## Dimension: XY ## Bounding box: xmin: -84.32385 ymin: 33.88199 xmax: -75.45698 ymax: 36.58965 ## Geodetic CRS: NAD27 ``` --- # Code Chunks Several options exist to modify the characteristics of a chunk. - Visibility/Invisibility - Code is executed or not - Output options (figure size, DPI, etc.) - Warning & Error message suppression - Global or Local options. --- # Inline Code You can insert code into text and have it evaluated by surrounding it with single backticks, the first of which is postpended by the letter `r`. <pre>The *nc* data set has a longitudinal boundary of `r st_bbox(nc)[1]`. </pre> -- Is rendered as: The *nc* data set has a longitudinal boundary of -84.324. Which is .red[very] helpful when writing manuscripts and integrating components of your analyses into the text. --- # Figures .pull-left[ <pre> ```{r echo=FALSE} plot( nc["SID79"], axes=TRUE ) ``` </pre> ] .pull-right[ <!-- --> ] --- # Table .pull-left[ The `knitr` library has built-in formatting for making tables that can be inserted into the document. The following code produces table on the right. <font size="-1"> <pre> ```{r echo=FALSE} library(tidyverse) library(knitr) library(kableExtra) link <- "https://haozhu233.github.io/kableExtra/" caption <- "Table X: Data from the first eight cars in the `mtcars` data set that is included in the base `R` install." mtcars[1:8, 1:8] %>% kable( caption = caption ) %>% kable_paper(full_width = F) %>% column_spec(2, color = spec_color(mtcars$mpg[1:8]), link = link) %>% column_spec(6, color = "white", background = spec_color( mtcars$drat[1:8], end = 0.7), popover = paste("am:", mtcars$am[1:8])) ``` </pre> </font> ] .pull-right[ <table class=" lightable-paper" style='font-family: "Arial Narrow", arial, helvetica, sans-serif; width: auto !important; margin-left: auto; margin-right: auto;'> <caption>Table X: Data from the first eight cars in the `mtcars` data set that is included in the base `R` install.</caption> <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> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> Mazda RX4 </td> <td style="text-align:right;color: rgba(52, 182, 121, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(52, 182, 121, 1) !important;"> 21.0 </a> </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160.0 </td> <td style="text-align:right;"> 110 </td> <td style="text-align:right;color: white !important;background-color: rgba(67, 191, 113, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 1"> 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> </tr> <tr> <td style="text-align:left;"> Mazda RX4 Wag </td> <td style="text-align:right;color: rgba(52, 182, 121, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(52, 182, 121, 1) !important;"> 21.0 </a> </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160.0 </td> <td style="text-align:right;"> 110 </td> <td style="text-align:right;color: white !important;background-color: rgba(67, 191, 113, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 1"> 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> </tr> <tr> <td style="text-align:left;"> Datsun 710 </td> <td style="text-align:right;color: rgba(149, 216, 64, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(149, 216, 64, 1) !important;"> 22.8 </a> </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 108.0 </td> <td style="text-align:right;"> 93 </td> <td style="text-align:right;color: white !important;background-color: rgba(55, 184, 120, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 1"> 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> </tr> <tr> <td style="text-align:left;"> Hornet 4 Drive </td> <td style="text-align:right;color: rgba(68, 191, 112, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(68, 191, 112, 1) !important;"> 21.4 </a> </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 258.0 </td> <td style="text-align:right;"> 110 </td> <td style="text-align:right;color: white !important;background-color: rgba(65, 67, 135, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 0"> 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> </tr> <tr> <td style="text-align:left;"> Hornet Sportabout </td> <td style="text-align:right;color: rgba(38, 129, 142, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(38, 129, 142, 1) !important;"> 18.7 </a> </td> <td style="text-align:right;"> 8 </td> <td style="text-align:right;"> 360.0 </td> <td style="text-align:right;"> 175 </td> <td style="text-align:right;color: white !important;background-color: rgba(60, 79, 138, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 0"> 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> </tr> <tr> <td style="text-align:left;"> Valiant </td> <td style="text-align:right;color: rgba(44, 114, 142, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(44, 114, 142, 1) !important;"> 18.1 </a> </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 225.0 </td> <td style="text-align:right;"> 105 </td> <td style="text-align:right;color: white !important;background-color: rgba(68, 1, 84, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 0"> 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> </tr> <tr> <td style="text-align:left;"> Duster 360 </td> <td style="text-align:right;color: rgba(68, 1, 84, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(68, 1, 84, 1) !important;"> 14.3 </a> </td> <td style="text-align:right;"> 8 </td> <td style="text-align:right;"> 360.0 </td> <td style="text-align:right;"> 245 </td> <td style="text-align:right;color: white !important;background-color: rgba(55, 90, 140, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 0"> 3.21 </td> <td style="text-align:right;"> 3.570 </td> <td style="text-align:right;"> 15.84 </td> <td style="text-align:right;"> 0 </td> </tr> <tr> <td style="text-align:left;"> Merc 240D </td> <td style="text-align:right;color: rgba(253, 231, 37, 1) !important;"> <a href="https://haozhu233.github.io/kableExtra/" style="color: rgba(253, 231, 37, 1) !important;"> 24.4 </a> </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 146.7 </td> <td style="text-align:right;"> 62 </td> <td style="text-align:right;color: white !important;background-color: rgba(31, 161, 135, 1) !important;" data-toggle="popover" data-container="body" data-trigger="hover" data-placement="right" data-content="am: 0"> 3.69 </td> <td style="text-align:right;"> 3.190 </td> <td style="text-align:right;"> 20.00 </td> <td style="text-align:right;"> 1 </td> </tr> </tbody> </table> ] --- ## Final Activity - Make a Quick Report Let's create a **different** kind of document this time. Create a new RMarkdown document (use the HTML template for simplicity) and save it as `field_data_report.Rmd` in the same directory as the project. In this document craft a quick narrative about the data from `Field_Data.csv` and `GIS_Data.csv`. Use this document as if you were creating a report based uopn the data you have here. Make sure to provide an example of at least one each of the following items: 1. Some Graphical Output 2. A Table of results. 3. In-text interpretation of R output (e.g., inline R code) 4. A variety of appropriate typesetting elements (Headings, bold, italic, etc.). --- class: middle background-image: url("images/contour.png") background-position: right background-size: auto .center[  ]