class: center, middle, inverse, title-slide .title[ #
Presentation Ninja Basics
] .subtitle[ ##
] .author[ ###
Cheng Peng
] .institute[ ###
West Chester University of Pennsylvania
] .date[ ###
Prepared for
STA553: Data Visualization
Slides available at:
https://your-RPubs-url
AND
https://your-GitHub-url
] --- class:inverse4, top <h1 align="center"> Table of Contents</h1> <BR> .pull-left[ - What is **xaringan** presentation? - Demos of **xaringanthemer** presentation - Installation and configurations - CSS and modifications - Basic syntax and formatting - Markup languages - Highlighting and formatting - List types - Coloring and color matching - Text coloring - Slide background coloring - RGB and HEX color mixing - Matching R plot and slide background - Customizing background color - choosing appropriate colors for plots ] .pull-right[ - Aesthetics of plots and tables - Managing graphical features - Sizes of title - sizes of labels and tick marks - dimension of plot through chunk option - Static text tables - Interactive data tables - Interactive plots - Embedding web pages and PDF files - Opened interactive apps - Opened PDF file - including regular webpages - Embedding images - static and animated images - controlling size of images ] --- <h1 align = "center">What is <font color="orange">xaringanthemer</font>?</h1> <BR> ![xaringan-demo](img/xaringanThemeR.gif) --- name: xaringanthemer <h1 align="center"> Getting Started with <font color="orange">xaringanthemer</font></h1> <br> .pull-left[ #### Install *xaringanthemer* <li> Place the following code to the setup code chunk of any RMD, or <li> install the package manually. ```{} if (!require("xaringanthemer")) { install.packages("xaringanthemer") library(xaringanthemer) } ``` <li> Open a new RMD document. <li> Select `from Template` (see the figure on the right panel). <li> select or created a folder to store related files automatically generated from *xaringanthemer*. ] .pull-right[ #### Open Default **xaringanthemer** <img src="img/xanganthemr-template.jpg" width=450 height=400> ] --- name: configurations <h1 align="center"> Some Configurations of <font color="orange">xaringanthemer</font></h1> <br><br> <center> <img src="img/xaringan-config.gif" width=1000 height=300> </center> --- name:css <h1 align="center"> A Key Component of <font color="orange">xaringanthemer</font>: CSS</h1> <br> <center>Default CSS gengerated from 'xaringanthemer'</center> <center><div class='wrap'> <iframe src="https://pengdsci.github.io/ninja/xaringan-themer.css" height="400" width="800" title="Iframe Example"></iframe> </div></center> --- name:css1 <h1 align="center"> A Key Component of <font color="orange">xaringanthemer</font>: CSS</h1> <br> <center><font color = "darkred"> Modified CSS from the 'xaringanthemer' generated style file</font></center> <center><div class='wrap'> <iframe src="https://pengdsci.github.io/ninja/xaringan-themer01.css" height="400" width="800" title="Iframe Example"></iframe> </div></center> --- ### Markup Languages - **HTML** (Hypertext markup language): the front-end markup language for web page development. - **CSS** (Cascading style sheets): a markup language describing the layout of web page (HTML). - **Markdown**: a markup language for formatting documents. - **RMarkdown**: an R implementation of Markdown. - **LaTex**: a markup language for preparing documents. ### Highlighting & Decorating | Effect | Markdown | HTML | LaTex | |:----------:|:------------:|:-------------------:|:--------------------:| | **bold** | `**bold**` | `<b>bold</b>` | `\textbf{bold}` | | _italic_ | `_italic_` | `<i>italic</i>` | `\textit{italic}` | |~~strikethrough~~| `~~strikethrough~~`| `<s>strikethrough</s>` | `\cancel{strikethrough}`| --- name: two-col # Two Column Layout .pull-left[ #### Unordered list: **Inputs** `* Item foo`<br> `* Item bar`<br> `* Item baz`<br> `* Item zip` **Outputs** * Item foo * Item bar * Item baz * Item zip ] .pull-right[ #### Ordered list: **Inputs** `1. Item one`<br> `1. Item two`<br> `1. Item three`<br> `1. Item four` **Outputs** 1. Item one 1. Item two 1. Item three 1. Item four ] --- name:order-list # Nested Ordered and Un-ordered Lists .pull-left[ **Input** ``` - 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) ``` ] .pull-right[ **Output** - 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) ] --- name: colors-headers ### Formatting `---`: starting a new slide. `name: name-of-the-slide`: must be placed immediately underneath the slide separator "`---`". `[link text](slide-name)`: referencing a specific slide in the deck. `#, ##, ###`: representing level 1, 2, and 3 headers respectively. `<h1></h1>, <h2></h2>, <h3></h3>`: HTML version of header levels (equivalent to `#, ##, ###`). ### Coloring Coloring text through HTML tag or CSS style. | colored text | HTML tag | CSS style | |:-----------------:|:------------------:|:---------------------:| | <font color="red">red</font> |`<font color="red">red</font>`| `<font style="color:red">red</font>`| | <font color="#800080">purple</font> |`<font color="#800080">purple</font>`| `<font style="color:#800080">purple</font>`| --- name: colors <h1 align="center"> Making Custom Colors</font></h1> <center><div class='wrap'> <iframe src="https://colordesigner.io/color-mixer" height="500px" width="100%" style="border:1px solid black;"></iframe> </div></center> --- class: inverse center middle # Colored Background in R Plot --- class: inverse1 center middle ## Matching Plot Background Color <img src="NinjaSlideTherm_files/figure-html/unnamed-chunk-1-1.png" width="600px" style="display: block; margin: auto;" /> --- class: inverse2 center middle ## Matching Plot Background Color <img src="NinjaSlideTherm_files/figure-html/unnamed-chunk-2-1.png" width="550px" style="display: block; margin: auto;" /> --- class: inverse1 center top <h1 align="center"> Mathematical Formulas</h1> <h3 align="left"> Normal density function</h3> $$ f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x-\mu)^2}{2\sigma^2}} $$ <h3 align = "left">Logistic Model</h3> $$ P(x|Y=1) = \frac{\exp(\beta_0+\beta_1x_1+\cdots+\beta_kx_k)}{1+\exp(\beta_0+\beta_1x_1+\cdots+\beta_kx_k)} $$ <h3 align="left"> Inline equations</h3> An example of inline equation `\(y=\beta_0+\beta_1x_1+\cdots+\beta_kx_k+\epsilon\)`, where `\(\epsilon \sim N(0, \sigma^2)\)`. --- class: inverse1 center middle # Text Format Data Table ``` # A tibble: 32 × 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 # ℹ 22 more rows ``` --- class: inverse3 center middle # Interactive Data Table
--- name: rplot # R Generated Plot ```r library(ggplot2) (g <- ggplot(mpg) + aes(hwy, cty, color = class) + geom_point()) ``` <img src="NinjaSlideTherm_files/figure-html/unnamed-chunk-5-1.png" width="40%" height="40%" /> --- name:interactive-plot <h1 align = "center">Interactive and Animated Graphs</h1> .pull-left[ ``` # define three densities sepal.len.setosa <- iris[which(iris$Species == "setosa"),] setosa <- density(sepal.len.setosa$Sepal.Length) sepal.len.versicolor <- iris[which(iris$Species == "versicolor"),] versicolor <- density(sepal.len.versicolor$Sepal.Length) sepal.len.virginica <- iris[which(iris$Species == "virginica"),] virginica <- density(sepal.len.virginica$Sepal.Length) # plot density curves fig <- plot_ly(x = ~virginica$x, y = ~virginica$y, type = 'scatter', mode = 'lines', name = 'virginica', fill = 'tozeroy') %>% # adding more density curves add_trace(x = ~versicolor$x, y = ~versicolor$y, name = 'versicolor', fill = 'tozeroy') %>% add_trace(x = ~setosa$x, y = ~setosa$y, name = 'setosa', fill = 'tozeroy') %>% layout(xaxis = list(title = 'Sepal Length'), yaxis = list(title = 'Density')) fig ``` ] .pull-right[ <BR><BR><BR>
] --- name:animated-image <h1 align="center">Including Animated Graphs </h1> <BR><BR> .pull-left[ <center> <img src="img/impossible-parking.gif" width=300 height=200> </center> ] .pull-right[ <center> <img src="img/perfect-parking.gif" width=400 height=200> </center> ] --- name:embeddingPDF <h1 align="center">Embedding Opened PDF Files</h1> <center><div class='wrap'> <object data="https://pengdsci.github.io/sta553/w03-Ethics.pdf" type="application/pdf" width="80%" height="500px"> <p>Unable to display PDF file. <a href="https://pengdsci.github.io/sta553/w03-Ethics.pdf">Download</a> instead.</p> </object> </div></center> --- name:embedding <h1 align="center">Embedding Opened Interactive Apps</h1> <center><div class='wrap'> <iframe src="https://wcu-peng.shinyapps.io/NormalCI4MeanProp/" height="500" width="1110" title="Iframe Example"></iframe> </div></center> --- 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).