Search code examples
zoomingreveal.jsquarto

How to zoom on graph in slide revealjs Quarto?

I would like to zoom on the graph when I click on this slide. I should be like an animation. Here is some reproducible code:

---
title: "Zoom on graph in slide"
format: revealjs
---

## Start

- I would like to zoom to the graph clicking on this slide

```{r}
#| echo: false
library(ggplot2)
ggplot(mtcars, aes(x = cyl, y = mpg)) +
  geom_point()
```

Output:

enter image description here

I would like that the graph becomes an animation so it zooms to the graph. I found the zoom option in the link above, but I am not sure how to use it as an animation. So I was wondering if anyone knows how to do a zoom animation in revealjs Quarto?

Solution

  • You might be interested in exploring an alternative way:

    ---
title: "Zoom on graph in slide"
format: revealjs
---

## Start

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
    // onClick function for all plots (img's)
    $('img:not(.zoomImg)').click(function() {
      $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
    });
  });
</script>

- I would like to zoom to the graph clicking on this slide

```{r}
#| echo: false
library(ggplot2)
ggplot(mtcars, aes(x = cyl, y = mpg)) +
  geom_point()
```

## Next Slide

- Zoom in and zoom out on Plots & Images in one click

:::: {.columns}

::: {.column width="60%"}
```{r}
#| label: fig-plot-01
#| fig-cap: Plot 1
#| fig-alt: Plot showing the variation...
#| fig-width: 12
#| fig-height: 5
#| fig-align: 'center'
#| echo: false
plot(mtcars$cyl)
``` 
:::

::: {.column width="40%"}
```{r}
#| label: fig-plot-02
#| fig-cap: Plot 2
#| fig-alt: Plot showing the variation...
#| fig-width: 3
#| fig-height: 3
#| fig-align: 'center'
#| echo: false
plot(mtcars$mpg)
``` 
:::

::::

    Just place <script>...</script> in your first/any/last slide, or after YAML for R Markdown & Quarto (see here for more info).

    UPDATE: We can include raw content in the YAML header:

    ---
title: "Zoom on graph in slide"
format:
  revealjs:
    include-in-header:
      - text: |
          <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js""></script>
          <script type="text/javascript">
            $(document).ready(function() {
              $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
              // onClick function for all plots (img's)
              $('img:not(.zoomImg)').click(function() {
                $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
                $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
              });
              // onClick function for zoomImg
              $('img.zoomImg').click(function() {
                $('.zoomDiv').css({opacity: '0', width: '0%'}); 
              });
            });
          </script>
---

    Or, we can provide a file, ex: zoom-in-out.html, where we have previously placed our script:

    ---
title: "Zoom on graph in slide"
format:
  revealjs:
    include-in-header:
      - file: zoom-in-out.html
---