index.qmd

---
title: "Your title here<h1>🧬🔬</h1>"
subtitle: "Daniel Fürth <br> 
<font size='5'>Fürth lab, Uppsala University</font>
<br><img src='images/logos-01.svg'>"
# format:
#   pptx:
#     reference-doc: template.pptx #uncomment and comment format: revealjs: block to make powerpoint
# format: pdf
format:
  revealjs: 
    slide-number: true
    chalkboard: 
      buttons: false
    preview-links: auto
    css: styles.css
    footer: "<i class='fa fa-calendar' aria-hidden='true'></i> May 9, 15:15 - 16:00 | 
    <i class='fa fa-map-marker' aria-hidden='true'></i> Location, Institution, City | 
 <i class='fa fa-user'></i> name of conference/lab meeting"
highlight-style: vscode.theme
---

```{r load_packages, message=FALSE, warning=FALSE, include=FALSE} 
if(!require(fontawesome)){
  install.packages('fontawesome')
  library(fontawesome)
}
if(!require(rsvg)){
  install.packages('rsvg')
  library(rsvg)
}
```

## This is a standard slide.

Here you can add some text. Next slide starts with the hash symbol (`## Title`) to mark its title.


```{r echo=FALSE}
var <- rnorm(100) #code not shown but executed
```

```{r echo=FALSE}
plot(var)  #code executed but not shown
```

```{python echo=TRUE}
import numpy as np #works with python as well
numbers = [10, 20, 30, 40, 50]
arr = np.array(numbers)
mean = np.mean(arr)
print("Mean:", mean)
```

## Columns

:::: {.columns}
::: {.column width="30%"}
- Topic 2
   - Level 1
   - Level 2
   - Level 3
:::
::: {.column width="30%"}
- Topic 3
   - Level 1
      - Sublevel 4
   - Level 2
   - Level 3
:::
::: {.column width="30%"}
- Topic 4
   - Level 1
   - Level 2
   - Level 3
:::
::::

## 🗣 Content

This is what will be discussed today.

Always good to explain the agenda so audience can have clear expectations. 

::: {.fragment .fade}
<h3>Therse are animated bullet points:</h3>

- &nbsp;&nbsp;   📜 Point one
- &nbsp;&nbsp;   🧫 Point two
- &nbsp;&nbsp;   🚀 Point three
::: 

::: {.fragment .fade}
...You can use [Font Awesome](https://fontawesome.com/) symbols as well `r fa("font-awesome", fill = "steelblue")`.
::: 


## Slide with a table

Using Markdown you can also write tables

| Reagent                   | Volume      | Final Concentration |
|---------------------------|-------------|---------------------|
| Sterile water or NF-water | 840 µl      |                     |
| 10xPBS                    | 100 µl      | 1x                  |
| 10% Tween-20              | 10 µl       | 0.1% Tween-20       |
| 10% BSA                   | 50 µl       | 1% BSA              |
| **TOTAL:**                | **1000 µl** |                     |

I recommend the online Markdown table generator:
[https://www.tablesgenerator.com/markdown_tables](https://www.tablesgenerator.com/markdown_tables)


# Links

I recommend the online Markdown table generator:
[https://www.tablesgenerator.com/markdown_tables](https://www.tablesgenerator.com/markdown_tables)

Links like this 👆 are written by this code:
```
[text to display](https://www.google.com/)
```
[text to display](https://www.google.com/)


# Code blocks

Here is some code for a plot in R:

```r
# Sample data
x <- c(1, 2, 3, 4, 5)
y <- c(2, 4, 6, 8, 10)

# Create a scatter plot using Base R plot function
plot(x, y, 
     type = "p",          # 'p' for points
     col = "blue",        # Point color
     pch = 16,            # Point shape (16 for filled circles)
     cex = 2,             # Point size
     xlab = "X-axis Label",  # X-axis label
     ylab = "Y-axis Label",  # Y-axis label
     main = "Scatter Plot Example"  # Main title
)
```

# Code blocks

Here is some R code executed:

```{r echo=TRUE}
# Sample data
x <- c(1, 2, 3, 4, 5)
y <- c(2, 4, 6, 8, 10)
# Create a scatter plot using Base R plot function
plot(x, y,  type = "p", col = "blue", pch = 16, cex = 2, xlab = "X-axis Label",  ylab = "Y-axis Label",  main = "Scatter Plot Example" )
```


# Code blocks

Here is some R code executed without `echo=TRUE`:

```{r}
# Sample data
x <- c(1, 2, 3, 4, 5)
y <- c(2, 4, 6, 8, 10)
# Create a scatter plot using Base R plot function
plot(x, y,  type = "p", col = "blue", pch = 16, cex = 2, xlab = "X-axis Label",  ylab = "Y-axis Label",  main = "Scatter Plot Example" )
```


# Statistics in text

:::: {.columns}

::: {.column width="40%"}
I have some R code:
```{r echo=TRUE}
data <- rnorm(100, 50, 15)
hist(data)
```
:::

::: {.column width="60%"}
The mean is:

- `r mean(data)` 

The standard deviation is:

- `r sd(data)`

And if I use `round()`:

- `r round(mean(data), 2)` 
- `r round(sd(data), 2)`

:::

::::


## <span style="top: 50%;      -webkit-transform: translate(0, -50%);      position: absolute;">📜 You can also have a slide with a website embedded</span>

::: footer
:::

---

## {background-iframe="http://www.wikipedia.com" background-interactive="true" background-size="contain"}

::: footer
:::

## <span style="top: 50%;      -webkit-transform: translate(0, -50%);      position: absolute;">📜 Just a title slide</span>

::: footer
:::

---

## 📜 Two-column image/text slide

::: {.container}
:::: {.col}
This is a two column container when you want text next to an image.

<center>
<figure>
    <img src="https://www.bioc.cam.ac.uk/sites/www.bioc.cam.ac.uk/files/styles/leading/public/7_frederick_sanger.jpg" style="border-radius: 10px; height: 25%;">
    <figcaption>Caption: Fred Sanger having a drink</figcaption>
</figure>
</center>



::::
:::: {.col}
<img src="images/sequence_autorad_85.jpeg" style="height: 600px; margin-top: -20px;"></img>
::::
:::

::: footer
`r fa("book", fill = "steelblue")` [Sanger et al. 1977 _PNAS_](https://doi.org/10.1073/pnas.74.12.5463)
:::


## Citations

Add your references by specifying the footer like this:

```
::: footer
r fa("book", fill = "steelblue") [Sanger et al. 1977 _PNAS_](https://doi.org/10.1073/pnas.74.12.5463)
:::
```
Then a link will display the citation in the footer next to the book icon `r fa("book", fill = "steelblue")`.

In this case a paper from Fred Sanger published in _PNAS_ 1977.

::: footer
`r fa("book", fill = "steelblue")` [Sanger et al. 1977 _PNAS_](https://doi.org/10.1073/pnas.74.12.5463)
:::

## Fragments

Incremental text display and animation with fragments:

<br/>

::: {.fragment .fade-in}
Fade in
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

::: {.fragment .fade-left}
Slide left while fading in
:::

::: {.fragment .fade-in-then-semi-out}
Fade in then semi out
:::

. . .

::: {.fragment .strike}
Strike
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: footer
Learn more: [Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments)
:::

## Chalkboard {chalkboard-buttons="true"}

::: {style="margin-bottom: 0.9em;"}
Free form drawing and slide annotations
:::

::: {layout="[1, 20]"}
![](images/presentation-chalkboard.png){width="41"}

Use the chalkboard button at the bottom left of the slide to toggle the chalkboard.
:::

::: {layout="[1, 20]"}
![](images/presentation-notes-canvas.png){width="41"}

Use the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.
:::

You can also press `b` to toggle the chalkboard or `c` to toggle the notes canvas.

::: footer
Learn more: [Chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)
:::



## Slide Backgrounds {background="#43464B"}

Set the `background` attribute on a slide to change the background color (all CSS color formats are supported).

Different background transitions are available via the `background-transition` option.

::: footer
Learn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds)
:::

## Media Backgrounds {background="#43464B" background-image="images/milky-way.jpeg"}

You can also use the following as a slide background:

-   An image: `background-image`

-   A video: `background-video`

-   An iframe: `background-iframe`

::: footer
Learn more: [Media Backgrounds](https://quarto.org/docs/presentations/revealjs/#image-backgrounds)
:::

## Absolute Position

Position images or other elements at precise locations

![](./images/kitten-450-250.jpeg){.absolute .fragment top="150" right="80" width="450"} 

![](./images/kitten-300-200.jpeg){.absolute .fragment bottom="110" left="120" width="300"}

::: footer
Learn more: [Absolute Position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)
:::

## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"}

Automatically animate matching elements across slides with Auto-Animate.

::: r-hstack
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::

::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::

::: footer
Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
:::

## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"}

Automatically animate matching elements across slides with Auto-Animate.

::: r-stack
::: {data-id="box1" style="background: orange; width: 350px; height: 350px; border-radius: 200px;"}
:::

::: {data-id="box2" style="background: #3fb618; width: 250px; height: 250px; border-radius: 200px;"}
:::

::: {data-id="box3" style="background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;"}
:::
:::

::: footer
Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
:::