Git, Website and Presentation in RMarkdown

class: center, middle, inverse, title-slide

# Git, Website and Presentation in RMarkdown
### Marco Fracassetti
### Developing skills in R workshop 13/11/2018

---

background-image: url(http://www.stockholmresilience.org/images/18.36c25848153d54bdba3421f1/1466170582764/su-Agneta-Hollstrom.jpg)
background-position: 50% 50%
class: center, bottom, inverse

##Given at Stockholm University!

---
##R History

- It was create in 1995 from [Robert Gentleman](https://en.wikipedia.org/wiki/Robert_Gentleman) and [Ross Ihaka](https://en.wikipedia.org/wiki/Ross_Ihaka) at the University of Auckland.

- It is a mix of [S](https://en.wikipedia.org/wiki/S_%28programming_language%29) and [Lisp](https://it.wikipedia.org/wiki/Lisp).

from [revolution](https://blog.revolutionanalytics.com/2012/06/the-influences-that-shaped-r-inferno-ish-r.html)

---

class: center, middle
#What is Git?

---
##GIT - the stupid content tracker<sup>1</sup>

"git" can mean anything, depending on your mood.
--

- random three-letter combination that is pronounceable, and not actually used by any common UNIX command.  The fact that it is a mispronounciation of "get" may or may not be relevant.

- stupid. contemptible and despicable. simple. Take your pick from the dictionary of slang.

--
- "global information tracker": you're in a good mood, and it actually works for you. Angels sing, and a light suddenly fills the room.

- "goddamn idiotic truckload of sh*t": when it breaks.

.footnote[
[1]From the original [README](https://github.com/git/git/blob/e83c5163316f89bfbde7d9ab23ca2e25604af290/README) written by [Linus Torvalds](https://it.wikipedia.org/wiki/Linus_Torvalds)  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/LinuxCon_Europe_Linus_Torvalds_03_%28cropped%29.jpg/440px-LinuxCon_Europe_Linus_Torvalds_03_%28cropped%29.jpg" alt="ppp" style="max-height:200px;"> 
]
---

from [git-tower ebook](https://www.git-tower.com/learn/git/ebook/en/desktop-gui/remote-repositories/introduction#start)

---
##Create a new repository
Enter in your [github account](https://github.com/login). Click `Repositories->New`
--

##Git commands

```bash
#the repo is copied from the remote repository
git clone https://github.com/GH_name/cloned_repo
```

```bash
#Add a file to the staging area
git add <FILENAME>
git add * #add al the file in the dir
#commit the changes to the local repository
git commit -m "first commit"
#push the changes to the remote repository
git push
```

```bash
#to update your local repo with the latest commit
git pull
```

```bash
##git information about the commit
git status
```

---
##Create a new branch

```bash
#create a new branch named "new_feature" and switch to it using
git branch new_feature
git checkout new_feature
git add mod_file.txt
git commit -m 'in new_feature'
#push the new branch to remote repository
git push origin new_feature
```

from [atlassian](https://www.atlassian.com/git/tutorials/using-branches)

---
##Merge two branch

```bash
# switch back to master
git checkout master
#merge the branch new_feature in the branch master
git merge new_feature
#now you can delete the branch new_feature
git branch -d feature_x
```

from [atlassian](https://www.atlassian.com/git/tutorials/using-branches/git-merge)

---
<img src="https://d1jnx9ba8s6j9r.cloudfront.net/blog/wp-content/uploads/2016/11/Git-Architechture-Git-Tutorial-Edureka-2-768x720.png" alt="ppp" style="max-height:550px;">

from [edureka](https://www.edureka.co/blog/git-tutorial/)

---
class: center, middle

# How to do a static website with R?

---
##RMarkdown website<sup>1</sup>

- Login in your [github account](https://github.com/login)

- Create a new repository named Your_GH_Name.github.io

- Inizialize It with a README

- Clone the repository on your notebook

- Open RStudio and create a R Project `File -> New Project` in the same directory of the cloned repository

- Create two files: **_site.yml** and **index.Rmd**

.footnote[
[1]More info [here](http://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html#r_markdown_website_basics) 
]

.pull-left-50[
Example _site.yml:

```bash
name: "my-website"
output_dir: "."
navbar:
  title: "My Website"
  left:
    - text: "Home"
      href: index.html
    - text: "Second Page"
      href: second_page.html
```
]

.pull-right-50[
Example index.Rmd:

```bash

---
title: "Bla Bla"
---

This is my RMarkdown Website.

```
]

---
##Rmarkdown website

- Close and re-open the R project.
<br />
<br />
--

- Build the website `Build -> Build all`
<br />
<br />
--

- Upload all on Github
<br />
<br />

```bash

cd Your_GH_Name.github.io
git add *
git commit -m "upload_my_website"
git push 
```
<br />
<br />
--

- The Website is ready at the URL Your_GH_Name.github.io.

---
class: center, middle

# How to do a presentation with R?

---
- Install the **xaringan** package developed by [Yihui Xie](https://yihui.name/)
<img src="https://d33wubrfki0l68.cloudfront.net/42023922872cca83b20851f15088d1fd4236d084/e41a8/images/logo.png" alt="ppp" style="max-height:300px;"><sup>1</sup>:

```r
install.packages('xaringan')
```

- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`.

- Click the `Knit` button to compile it.

- Open your presentation in the Web browser.

- or install the [RStudio Addin](https://rstudio.github.io/rstudioaddins/)<sup>2</sup> "Infinite Moon Reader" to live preview the slides in RStudio Viewer.

.footnote[
[1] From which I took a lot of material to do this presentation.

[2] See [#2](https://github.com/yihui/xaringan/issues/2) if you do not see the template or addin in RStudio.
]

---
##How it works

- The RMarkdown is processed by [knitr](https://yihui.name/knitr/)<sup>1</sup> and the slides are rendered in the web browser by the [remark.js](https://remarkjs.com) library.

##Simpler version

-It is RMarkdown code.

- Each slide is separated by `---`;

- To make a list use `-` before each item (remember the space before the first char);

- To make appear one item by one separate them by `--`;

.footnote[
[1]Also this package has been developed by  [Yihui Xie](https://yihui.name/)<img src="https://d33wubrfki0l68.cloudfront.net/42023922872cca83b20851f15088d1fd4236d084/e41a8/images/logo.png" alt="ppp" style="max-height:300px;">.
]

---

# LaTex Math Expressions

You can write LaTeX math expressions inside a pair of dollar signs, e.g. &#36;\alpha+\beta$ renders `$\alpha+\beta$`. You can use the display style with double dollar signs:

```
$$\theta_W=\frac{S}{\sum_{i=1}^{n-1}\frac{1}i}$$
```

`$$\theta_W=\frac{S}{\sum_{i=1}^{n-1}\frac{1}i}$$`

---
#R Codes and Plots

```r
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
```

```
##               Estimate Std. Error   t value     Pr(>|t|)
## (Intercept) -17.579095  6.7584402 -2.601058 1.231882e-02
## speed         3.932409  0.4155128  9.463990 1.489836e-12
```

```r
par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)
```

![](GitWebRma_files/figure-html/cars-1.svg)

---
#Not only R language
Python

```python
print "Ciao!"
```

```
## Ciao!
```

Bash

```bash
echo "Ciao!"
```

```
## Ciao!
```
---

# Tables

If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,

```r
knitr::kable(head(iris), format = 'html')
```

<table>
 <thead>
  <tr>
   <th style="text-align:right;"> Sepal.Length </th>
   <th style="text-align:right;"> Sepal.Width </th>
   <th style="text-align:right;"> Petal.Length </th>
   <th style="text-align:right;"> Petal.Width </th>
   <th style="text-align:left;"> Species </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 5.1 </td>
   <td style="text-align:right;"> 3.5 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.9 </td>
   <td style="text-align:right;"> 3.0 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.7 </td>
   <td style="text-align:right;"> 3.2 </td>
   <td style="text-align:right;"> 1.3 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.6 </td>
   <td style="text-align:right;"> 3.1 </td>
   <td style="text-align:right;"> 1.5 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.0 </td>
   <td style="text-align:right;"> 3.6 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.4 </td>
   <td style="text-align:right;"> 3.9 </td>
   <td style="text-align:right;"> 1.7 </td>
   <td style="text-align:right;"> 0.4 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
</tbody>
</table>

---
# HTML Widgets

What are them?  [http://www.htmlwidgets.org](http://www.htmlwidgets.org)

```r
DT::datatable( head(iris, 10),  fillContainer = FALSE, options = list(pageLength = 8))
```

<div id="htmlwidget-b48824d1a90371187d51" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-b48824d1a90371187d51">{"x":{"filter":"none","fillContainer":false,"data":[["1","2","3","4","5","6","7","8","9","10"],[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>Sepal.Length<\/th>\n      <th>Sepal.Width<\/th>\n      <th>Petal.Length<\/th>\n      <th>Petal.Width<\/th>\n      <th>Species<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":8,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[8,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

---

# Some Tips

- Slides can be automatically played if you set the `autoplay` option under `nature`, e.g. go to the next slide every 30 seconds in a lightning talk:

```yaml
    output:
      xaringan::moon_reader:
        nature:
          autoplay: 30000
    ```

- A countdown timer can be added to every page of the slides using the `countdown` option under `nature`, e.g. if you want to spend one minute on every page when you give the talk, you can set:

```yaml
    output:
      xaringan::moon_reader:
        nature:
          countdown: 60000
    ```

Then you will see a timer counting down from `01:00`, to `00:59`, `00:58`, ... When the time is out, the timer will continue but the time turns red.
    
---

##Themes and CSS

In the YAML section you can specify your favorite [CSS file](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) or use some pre-build themes:

```yaml
output:
  xaringan::moon_reader:
    css: [default, "my_favorite.css", metropolis-fonts]
```

List of the themes:

```r
names(xaringan:::list_css())
```

```
##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"   
##  [4] "default"          "duke-blue"        "hygge-duke"      
##  [7] "hygge"            "kunoichi"         "lucy-fonts"      
## [10] "lucy"             "metropolis-fonts" "metropolis"      
## [13] "middlebury-fonts" "middlebury"       "ninjutsu"        
## [16] "rladies-fonts"    "rladies"          "robot-fonts"     
## [19] "robot"            "rutgers-fonts"    "rutgers"         
## [22] "shinobi"          "tamu-fonts"       "tamu"            
## [25] "uo-fonts"         "uo"
```

---

#Thanks for the listening
For the exercise go to [The R Inferno](https://github.com/TheRInferno/TheRInferno.github.io) and follow the instruction.
##References

- Git:

[official website](https://git-scm.com/)
[simple guide](http://rogerdudler.github.io/git-guide/)
[HappyGitWithR](http://happygitwithr.com/)

- Some websites done with Rmarkdown:

[site1](http://www.emilyzabor.com/)
[site2](https://ankargren.github.io/)

- Xaringan presentation:

[Yihui Xie Website](https://yihui.name/)