# My Title ## Header 2 ### Header 3 #### Subheader
**[Author Name](mailto:a.name@esciencecenter.nl)** | **eScience Center**
# File Structure --- ## New File, New Column - A presentation consists of columns (chapters) of vertically stacked slides - Press ESC to see an overview of the arrangement - Use arrow keys to navigate - Press ESC again to zoom back into the presentation - A new file (like this one) creates a new column. --- ## New Slide, Same Column - Three dashes `---` surrounded by newlines separate one slide from the next. - Three equal signs `===` surrounded by newlines create a new column within one file. === ## New Slide, New Column

HTML and Markdown

Mix and Match

  • Slides can be Markdown
    • Use .md file ending
    • Markdown slides can contain HTML snippets
  • Slides can also be purely HTML
    • Use .html file ending then
    • But there is no Markdown within HTML

## this is no header - this is no list - because we are within HTML
# Backgrounds --- ## Image Backgrounds - Define full screen image backgrounds in the slide header. --- ## Video Backgrounds - Videos work too! - Make sure to include the `loop` and `muted` tags
# Overlays ---

blue_overlay

some background images have more contrast than others ... ---

blue_overlay 4

... so you can change any overlay opacity from 0 (0%) to 10 (100%) to match background, default 8 (80%) ---

purple_overlay

---

white_overlay

text color changes automatically ---

black_overlay

# Decorations --- ## logo logo color changes according to overlay ---

purple_half_circle_top

logo color changes according to decorations ---

purple_half_circle_bottom

with logo ---

purple_strip_bottom

---

yellow_half_strip

---

purple_blob

(right_e_top)

---

right_e_top

---

right_e_bottom

---

yellow_strip

---

yellow_flag

---

footer line

Cool paper [1] --- ## or any combination of these
# Slide Presets --- ## standard ---

two_pane

slide content

  • side section
  • box scales with height
  • content
  • content content content content content content
---

“Empowering researchers across all disciplines through innovative research software”

about

Contact Person
Kit McKitterson
kit@esciencecenter.nl
Kat McKatterson
kat@esciencecenter.nl
(supply square image, get rounded profile image)
---

touch

language esciencecenter.nl
mail_outline info@esciencecenter.nl
phone +31 (0)20 460 4770
# Layout --- ## Fragments - out - of - order - fade out - highlight red - fade in, then out - fade up

use as class in HTML

See full list of options at revealjs.com/fragments/

--- ## Stack
--- ## Fit Text ## Fit one or more line

horizontally

without worrying about font-size

## In HTML or Markdown --- ## Stretch fill all remaining space vertically

Eye Candy

Code Highlighting


    

      

        Avocados
        $2
        4
      

      

        Apples
        $1
        7
      

      

        Oranges
        $2
        18
      

      

        Kiwi
        $3
        1

Animated Code


t planets = [
{ name: 'mars', diameter: 6779 },

Animated Code


t planets = [
{ name: 'mars', diameter: 6779 },
{ name: 'earth', diameter: 12742 },
{ name: 'jupiter', diameter: 139820 }

Animated Code


t circumferenceReducer = ( c, planet ) => {
return c + planet.diameter * Math.PI;


t planets = [
{ name: 'mars', diameter: 6779 },
{ name: 'earth', diameter: 12742 },
{ name: 'jupiter', diameter: 139820 }


t c = planets.reduce( circumferenceReducer, 0 )

Beautiful LaTeX

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}\]
# Interaction ---

Embed websites

  • They have to allow it though...
  • A "clear_background" removes all overlays and allows for interaction with the website
  • Any elements you put on top (like this text frame) lie on top, so click on the website behind to interact with it
  • Once you interact with the website (clicking, etc.) the focus for navigation is gone
    • This means you need to click on the arrows on the bottom right to proceed
---

Embed Jupyter Notebooks

Show your own work when sharing your screen...

... or let everybody in the audience code in their browser and play with data


(static image as an example, you have to host it somewhere yourself)

--- ## Embed Interactive Visualizations 1

Embed D3 visualizations into slides, and keep the original interactivity.

(click on the globe and drag it to explore the different paths!)

Visualization:
Eclipses path by Philippe Riviere and friends

--- ## Embed Interactive Visualizations 2 - Advance slides to trigger visualization transitions - Use mouse to interact with the visualization - Adapted from [Collision detection](https://bl.ocks.org/mbostock/3231298) by Mike Bostock --- ## Multi-visualizations

Gooey effect - Hexagon by Nadieh Bremer

Modular Multiplication Circle by Megan O'Leary

--- ## Independent Transitions
Rainbow worm by Mike Bostock
transition on 1 and 3

Simple bar graph
transition on 2 and 3

--- ## Other Libraries - Also works with other libraries - Use mouse-over to learn more about the shown data
Chord diagram
# Menu - Click at the bottom left ↙️ to open the slide menu - Navigate between slides - Entries are arranged by chapters