layout: true <!-- this adds the link footer to all slides, depends on footer-small class in css--> <div class="footer-small"><span>https://github.com/jhelvy/lexis</span></div> --- name: title-slide class: title-slide, center, middle, inverse # λέξις #.fancy[a xaringan theme] <br> .large[by John Paul Helveston] Written: 五月 04 2020 Updated: 三月 16 2023 .footer-large[.right[.fira[ <br><br><br><br><br>[What does "λέξις" mean](https://jhelvy.github.io/lexis/index.html#what-does-%CE%BB%CE%AD%CE%BE%CE%B9%CF%82-mean) ]]] --- # .center[Text styling] .leftcol[ # Header level 1 ## Header level 2 ### Header level 3 #### Header level 4 ##### Header level 5 ###### Header level 6 ] .rightcol[ Regular _Italics_ **Bold** ***Bold italics*** ~~Strikethrough~~ .fancy[Fancy text] [external link](https://github.com/jhelvy/lexis)<br> `Inline code` ] --- class: inverse # .center[Inverse text styling] .leftcol[ # Header level 1 ## Header level 2 ### Header level 3 #### Header level 4 ##### Header level 5 ###### Header level 6 ] .rightcol[ Regular _Italics_ **Bold** ***Bold italics*** ~~Strikethrough~~ .fancy[Fancy text] [external link](https://github.com/jhelvy/lexis)<br> `Inline code` ] --- # .center[Colors!] .leftcol30[ Use this... - `.red[text]` - `.orange[text]` - `.yellow[text]` - `.green[text]` - `.darkgreen[text]` - `.blue[text]` - `.darkblue[text]` - `.purple[text]` - `.black[text]` ] .rightcol70[ ...to get this - **.red[text]** - **.orange[text]** - **.yellow[text]** - **.green[text]** - **.darkgreen[text]** - **.blue[text]** - **.darkblue[text]** - **.purple[text]** - **.black[text]** ] --- # Tables ```r knitr::kable(head(mpg)) ``` <table> <thead> <tr> <th style="text-align:left;"> manufacturer </th> <th style="text-align:left;"> model </th> <th style="text-align:right;"> displ </th> <th style="text-align:right;"> year </th> <th style="text-align:right;"> cyl </th> <th style="text-align:left;"> trans </th> <th style="text-align:left;"> drv </th> <th style="text-align:right;"> cty </th> <th style="text-align:right;"> hwy </th> <th style="text-align:left;"> fl </th> <th style="text-align:left;"> class </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> audi </td> <td style="text-align:left;"> a4 </td> <td style="text-align:right;"> 1.8 </td> <td style="text-align:right;"> 1999 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:left;"> auto(l5) </td> <td style="text-align:left;"> f </td> <td style="text-align:right;"> 18 </td> <td style="text-align:right;"> 29 </td> <td style="text-align:left;"> p </td> <td style="text-align:left;"> compact </td> </tr> <tr> <td style="text-align:left;"> audi </td> <td style="text-align:left;"> a4 </td> <td style="text-align:right;"> 1.8 </td> <td style="text-align:right;"> 1999 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:left;"> manual(m5) </td> <td style="text-align:left;"> f </td> <td style="text-align:right;"> 21 </td> <td style="text-align:right;"> 29 </td> <td style="text-align:left;"> p </td> <td style="text-align:left;"> compact </td> </tr> <tr> <td style="text-align:left;"> audi </td> <td style="text-align:left;"> a4 </td> <td style="text-align:right;"> 2.0 </td> <td style="text-align:right;"> 2008 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:left;"> manual(m6) </td> <td style="text-align:left;"> f </td> <td style="text-align:right;"> 20 </td> <td style="text-align:right;"> 31 </td> <td style="text-align:left;"> p </td> <td style="text-align:left;"> compact </td> </tr> <tr> <td style="text-align:left;"> audi </td> <td style="text-align:left;"> a4 </td> <td style="text-align:right;"> 2.0 </td> <td style="text-align:right;"> 2008 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:left;"> auto(av) </td> <td style="text-align:left;"> f </td> <td style="text-align:right;"> 21 </td> <td style="text-align:right;"> 30 </td> <td style="text-align:left;"> p </td> <td style="text-align:left;"> compact </td> </tr> <tr> <td style="text-align:left;"> audi </td> <td style="text-align:left;"> a4 </td> <td style="text-align:right;"> 2.8 </td> <td style="text-align:right;"> 1999 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:left;"> auto(l5) </td> <td style="text-align:left;"> f </td> <td style="text-align:right;"> 16 </td> <td style="text-align:right;"> 26 </td> <td style="text-align:left;"> p </td> <td style="text-align:left;"> compact </td> </tr> <tr> <td style="text-align:left;"> audi </td> <td style="text-align:left;"> a4 </td> <td style="text-align:right;"> 2.8 </td> <td style="text-align:right;"> 1999 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:left;"> manual(m5) </td> <td style="text-align:left;"> f </td> <td style="text-align:right;"> 18 </td> <td style="text-align:right;"> 26 </td> <td style="text-align:left;"> p </td> <td style="text-align:left;"> compact </td> </tr> </tbody> </table> --- # Block quotes Use the `>` to make block quotes: ```r > This is what a block quote looks like. ``` > This is what a block quote looks like. --- # .center[Github code chunk highlighting] .leftcol80[ ```r # function args are keywords c; function names are keywords d foo <- function(arg1 = 100, arg2 = "character string") { if (TRUE) { x = NULL # if, function, NULL are keywords a for (i in 1:10) x = c(x, mean(3 * rnorm(100) + 1)) } } 1 + "a" # error ``` ``` #> Error in 1 + "a": non-numeric argument to binary operator ``` ] --- # Line highlighting An example of using the trailing comment `#<<` to highlight lines: .leftcol[ ### Code ````markdown ```{r} library(ggplot2) ggplot(mtcars) + aes(mpg, disp) + geom_point() + #<< geom_smooth() #<< ``` ```` ] .rightcol[ ### Output ```r library(ggplot2) ggplot(mtcars) + aes(mpg, disp) + * geom_point() + * geom_smooth() ``` ] --- class: inverse, middle, center # Layouts! --- # Fancy panels! .panelset[ .panel[.panel-name[R Code] ```r ggplot(mtcars, aes(x = mpg, y = hp)) + geom_point() + theme_bw() + labs(color = 'Cylinders') ``` ] .panel[.panel-name[Plot] <img src="figs-chunk/unnamed-chunk-4-1.png" width="288" style="display: block; margin: auto;" /> ] ] --- ## .center[Three equal columns] .cols3[ `.cols3[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] .cols3[ `.cols3[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] .cols3[ `.cols3[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] --- ## .center[Two equal columns] .leftcol[ `.leftcol[]` or `.pull-left[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] .rightcol[ `.rightcol[]` or `.pull-right[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] --- ## .center[Two columns: 60-40 split] .leftcol60[ `.leftcol60[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] .rightcol40[ `.rightcol40[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] --- ## .center[Two columns: 70-30 split] .leftcol70[ `.leftcol70[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] .rightcol30[ `.rightcol30[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] --- ## .center[Two columns: 80-20 split] .leftcol80[ `.leftcol80[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] .rightcol20[ `.rightcol20[]` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ] --- ## .center[...other two-column split options] .leftcol[ 50-50: `.leftcol[] .rightcol[]` 55-45: `.leftcol55[] .rightcol45[]` 60-40: `.leftcol60[] .rightcol40[]` 65-35: `.leftcol65[] .rightcol35[]` 70-30: `.leftcol70[] .rightcol30[]` 75-25: `.leftcol75[] .rightcol25[]` 80-20: `.leftcol80[] .rightcol20[]` ] .rightcol[ <br> 45-55: `.leftcol45[] .rightcol55[]` 40-60: `.leftcol40[] .rightcol60[]` 35-65: `.leftcol35[] .rightcol65[]` 30-70: `.leftcol30[] .rightcol70[]` 25-75: `.leftcol25[] .rightcol75[]` 20-80: `.leftcol20[] .rightcol80[]` ] --- class: center background-image: url("pic/blue_ridge_mountains.jpg") # .fancy[Full image background] <br><br> .leftcol70[.left[ ```r background-image: url("pic/blue_ridge_mountains.jpg") ``` ]] --- class: center background-color: #909099 # .fancy[.white[Full background color]] <br><br><br> .leftcol40[.left[ ```r background-color: #909099 ``` ]] --- class: inverse, middle, center # Images! --- # Images have no border by default .leftcol60[ This code produces the image on the right: ```r <img src="pic/blue_ridge_sunset.jpg"> ``` ] .rightcol40[ <img src="pic/blue_ridge_sunset.jpg"> ] --- # Add a thin border with `.border[]` .leftcol60[ This code produces the image on the right: ```r .border[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.border[ <img src="pic/blue_ridge_sunset.jpg"> ]] --- ## Or modify the border: `.borderthick[]` .leftcol60[ This code produces the image on the right: ```r .borderthick[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.borderthick[ <img src="pic/blue_ridge_sunset.jpg"> ]] --- class: inverse ## Or modify the border: `.whiteborder[]` .leftcol60[ This code produces the image on the right: ```r .whiteborder[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.whiteborder[ <img src="pic/blue_ridge_sunset.jpg"> ]] --- class: inverse ## Or modify the border: `.whiteborderthick[]` .leftcol60[ This code produces the image on the right: ```r .whiteborderthick[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.whiteborderthick[ <img src="pic/blue_ridge_sunset.jpg"> ]] --- # Make a polaroid image: `.polaroid[]` .leftcol60[ This code produces the image on the right: ```r .polaroid[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.polaroid[ <img src="pic/blue_ridge_sunset.jpg" width="400"> ]] --- # Make a circle image: `.circle[]` .leftcol60[ This code produces the image on the right: ```r .circle[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.circle[ <img src="pic/blue_ridge_sunset.jpg" width="400"> ]] --- # Make a thumbnail image: `.thumbnail[]` .leftcol60[ This code produces the image on the right: ```r .thumbnail[ <img src="pic/blue_ridge_sunset.jpg"> ] ``` ] .rightcol40[.thumbnail[ <br><br><br><br> <center> <img src="pic/blue_ridge_sunset.jpg"> </center> ]] --- # Image classes work on rendered charts too .leftcol[ ````markdown .border[ ```{r} ggplot(mtcars, aes(x = mpg, y = hp)) + geom_point() + theme_bw() + labs(color = 'Cylinders') ``` ] ```` .border[ <img src="figs-chunk/unnamed-chunk-15-1.png" width="288" style="display: block; margin: auto;" /> ]] .rightcol[ ````markdown .circle[ ```{r} ggplot(mtcars, aes(x = mpg, y = hp)) + geom_point() + theme_bw() + labs(color = 'Cylinders') ``` ] ```` .circle[ <img src="figs-chunk/unnamed-chunk-16-1.png" width="288" style="display: block; margin: auto;" /> ]] --- class: center, middle, inverse, no-slide-number # Thanks! .footer-large[ .right[ [@johnhelveston
](http://twitter.com/johnhelveston)<br> [@jhelvy
](http://github.com/jhelvy)<br> [@jhelvy
](http://www.box.jhelvy.com/docs/jhelvy.png)<br> [jhelvy.com
](https://www.jhelvy.com)<br> [jph@gwu.edu
](mailto:jph@gwu.edu) ]]