Generating a parallax scroll document in R

This example will walk you through on how to generate a parallax scroll document in R, using the package parallaxr.

You may find random GIFs on this example, but you can be assured that you can replace these with more sensible options of your own choice when you come to use the package.

Visit the GitHub repo for the code. This is built as an R package, which allows you to easily reproduce the scroll document.

Created by Martin Chan.

Image credits to GIPHY and Unsplash.

Why create a parallax scroll document?

A parallax scroll document allows you to show visualizations, GIFs, and images alongside text. This is great for creating professional, sleek-looking static pages for you to present an essay, an argument, a concept, or even some lyrics or poems that you've written.

This isn't necessarily a ground breaking invention, but generating a document like this with Markdown files and R is just very cool, and easy to implement.

This is page 3.

The purpose of this page is to demonstrate three features:

  1. That you can change whether the content shows up on the left or on the right
  2. That you can change the image (phew)
  3. That you can add any formatting that you can add to Markdown, including code formatting

The main workhorse function in parallaxr is parse_md(), which does the following:

Parses a Markdown document with YAML headers and returns a data frame for generating a scroll document

The Markdown document to pass through must have two keys in the YAML header. For instance, the YAML header for this particular page is:

---
position: left
imgurl: https://media.giphy.com/media/gVE7nURcnD9bW/giphy.gif
---

Embed more than content - you can also embed HTML widgets

This is a simple trick that uses iframes, but remember when I said that you can display anything that you can display in a Markdown document? The possibilities are quite endless.

Here is a map of district council constituencies in Hong Kong, and a plug for our open-source project team Hong Kong Districts Info. This map is built using the leaflet package in R.

Enough with the tease, how do I get started?

You can install the package with the following line of code. Make sure you have devtools installed first, of course:

devtools::install_github("martinctc/parallaxr")

On the the GitHub repo, look inside the examples folder. You will find the script and the Markdown documents that were used to produce this page. Here is a snippet of the starter code, but please visit the repo for the latest version:

## Load packages
library(parallaxr)

## Character vector of all MD files
all_md_str <- list.files(path = "examples/Markdown", full.names = TRUE)


## Loop through each MD file, parse, and return a single tibble
md_tibble <-
  all_md_str %>%
  purrr::map_dfr(parse_md) # Return a tibble with row-binding

## Output HTML file

generate_scroll_doc(path = "examples/parallaxr-examples-output.html",
                    inputs = md_tibble)

More documentation is available for the individual functions, e.g. 

?generate_scroll_doc

If you have any questions, bugs, or suggestions for enhancements, please log an issue with https://github.com/martinctc/parallaxr/issues. This is an open-source project, so any contribution is very welcome! Pull requests are welcome.