Share your R, with R

R4CR: Education for Clinical Researchers via Quarto

Jinhwan Kim @ Zarathu

In this talk…

✅ I’ll cover

  • How to share own R contents online without financial, technical cost
  • Things I considered before choosing Quarto
  • Key steps to build web page with simple example

❌ I’ll not cover

  • Detailed guide for R / Quarto / revealjs
  • Make own R content
  • Detailed instructions for customized functions

💡 I’ll share experiences of building web page for teaching R using Quarto.

If you have own R contents and want to share it in online, this talk will be helpful for you.

What is R4CR

  • R for Clinical Researchers. (Inspired by R4DS, R4CSR, and strongly R4SS)
  • Contents: related with R
  • Custom features: util (external service)
  • made with R and Quarto

R in Clinical Research

Clinical or Medical field is one of the most important area that R is used.

Because

  • Management of Data
  • Statistic analysis
  • Re-shape output for use by a variety of audiences, such as regulators and academics.

Both SAS and R used, but R is increasingly popular due to its flexibility and open-source nature.

  • Traditionally, Researchers focus on the design and execution of the study and leave the coding to professional statistical programmers and statisticians

  • Now, researchers are increasingly coding themselves.

  • Zarathu is a research support organisation, recently started training researchers to code to meet this demand.

Why this matter?

  • R is used extensively in various data fields including medical / academy.

  • Many R contents (slide, recording, document, report) existed in various location.

  • Need to organize and share to be used easily.

  • Also our team, Zarathu had a number of R content for medical school / pharma members

  • Used for seminars, but need to create a new repository for it each time.

Before

In Github (README.MD)

📔 Previous presentations

  • COOL PRESENTATION
  • AWESOME LECTURE NOTE
  • NICE TALK

Not bad, but information are not organized well.

  • Browse all (long) readme
  • Click each and see in new page
  • Problem if multiple contents are “connected”

Principles

Should

  • Support natively R contents

  • Can manage with in one place

  • Can custom even external service

Avoid to

  • Use “Other languages” except R

  • Spend the extra money to do this

Considered methods

🗂️ Before

Github README for link each contents

🤔 Options

  • LMS: Pay
  • Blog: not R
  • Professional webpagePay
  • Slide service: not R

✅ Final

Website on Github Pages with Quarto Blog

💡 Vercel, Netlify may works

Benefit of using Quarto

  • Build with Markdown, R

  • Support R code and Results

  • Works well with Rstudio

  • Available to customize with JavaScript

  • Website, Presentation, Dashboard, Books, and More

  • Deploy via Github without cost

💡 There are a lot of guide for learn Quarto, You should try

🗿 4 Key steps to build R4CR

Summary

graph TB;
  
  R4CR --> website
  
  subgraph website
    pres(presentation) --> embed(embed)
    navbar(navbar)
    custom(archive) --> slider(slider)
  end
  style website fill:#FFF;
  style R4CR fill:#8AC0AE,color:#FFF,stroke:none;
  style navbar fill:#2C3A8B,color:#FFF,stroke:none;
  style embed fill:#2C3A8B,color:#FFF,stroke:none;
  style slider fill:#2C3A8B,color:#FFF,stroke:none;

1. Build Quarto Website

  • Build contents as Quarto Presentation

    • PDF also fine

  • Decorate website

    2. Organize contents using navbar

    3. Embeding slide

    4. Customize slick (slider)

1. Build Quarto Website

Start from Rstudio’s New project -> Quarto website feature.

Structure

graph TD;

  subgraph R4CR
    index.qmd;
    about.qmd;
    _quarto.yml;
    styles.css;
  end
  style R4CR fill:#FFF,stroke:#8AC0AE,stroke-width:3px;;

2. Organize contents using navbar

Example code

navbar:
    right:
      - text: Home
        href: index.qmd
      - text: About
        href: about.qmd
      - text: Day 1
        menu: 
          - text: Brief
            href: day1/day1.qmd
          - text: baseR
            href: day1/baseR.qmd
          - text: ------
          - text: Tidyverse
          - text: magrittr
            href: day1/magrittr.qmd  
      - icon: github
        href: https://github.com/ID/REPO

Result

  • Not need to explore very long list of readme

3. Embeding slide

Example code

.slide-deck {
  border: 3px solid #dee2e6;
  width: 100%;
  height: 475px;
  margin-top: 1em;
  margin-bottom: 1em;
}
---
format: 
  html:
    css: ../styles.css
---

<iframe class="slide-deck" src="slide.baseR.html"></iframe>
---
format: revealjs
---

# Title

Result

Structure

graph TD;

  subgraph R4CR
    styles.css;
    day1;
  end
  
  subgraph day1
    baseR.qmd;
    slide.baseR.qmd;
  end

  style R4CR fill:#FFF,stroke:#8AC0AE,stroke-width:3px;
  style day1 fill:#FFF,stroke:#137752,stroke-width:3px;
  
  style styles.css fill:#2C3A8B,color:#FFF,stroke:none;
  style baseR.qmd fill:#2C3A8B,color:#FFF,stroke:none;
  style slide.baseR.qmd fill:#2C3A8B,color:#FFF,stroke:none;

  • modify slide container with .slide-deck in CSS
  • iframe option, see link

4. Customize (slick)

Example code

---
title: "archives"
listing:
  contents: talks
  sort: "date desc"
  type: grid
  image-height: 300px
format: html
include-in-header: talks/slider.html
---
<div class="slider">
  <img src="talks/logo/image1.png"/> 

  ...
</div>
---
image: useR.png (Thumbnail)
format: html
---

## Title

Contents
<script src="jquery-3.3.1.min.js"></script>
<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css" />
<link rel="stylesheet" href="slick-theme.css" />

<script>
  $(document).ready(function() {
    $('.slider').slick({speed: 500, ...});
  });
</script>

<style>
  .slider {
    width: 1000px;
    margin: 0px auto;
  }
</style>
  • Include slider.html in archive.qmd
  • slider.html contains JavaScript and CSS files for slick
  • Common assets are located in talks folder in talks
  • Each index.qmd separated folder
  • archive.qmd is Quarto blog to show multiple element as card with thumbnails

Result

Structure

graph TD;

  subgraph R4CR
    archive.qmd;
    talks;
  end

  subgraph talks
    logo;
    slider.html;
    2024-06-04-useR;
  end

  subgraph 2024-06-04-useR
    index.qmd;
    useR.png;
  end

  2024-06-04-useR --> index.qmd;
  2024-06-04-useR --> useR.png;
  
  style R4CR fill:#FFF,stroke:#8AC0AE,stroke-width:3px;
  style talks fill:#FFF,stroke:#137752,stroke-width:3px;
  style 2024-06-04-useR fill:#FFF,stroke:#137752,stroke-width:3px;
  
  style logo fill:#137752,color:#FFF,stroke:none;
  
  style archive.qmd fill:#2C3A8B,color:#FFF,stroke:none;
  style index.qmd fill:#2C3A8B,color:#FFF,stroke:none;
  style slider.html fill:#2C3A8B,color:#FFF,stroke:none;

External Services

  • SDK, API (Javascript code) using include similar with previous slick

  • Implement button using HTML with onclick, send data as JSON to other HTML page using axios

  • Github page is possible to communicate with external

Deploy

  • Github page (very easy)

  • Add custom domain name with CNAME (not essential, need to pay)

Final result

https://education.zarathu.com/

💡 Note

  • This site mainly built with Korean 🇰🇷
  • Payment disabled for now

Challenges with Quarto

  1. Experience of R, is necessary or google sites may work better
  2. Static site, doesn’t require “login” so EVERY user can see EVERY contents

Recap R4CR

Features

  • R4CR: is managing system for clinical and R contents

  • Manage webpage and contents in single project

  • R and Markdown (Quarto)

  • Free

  • Custom

with R4CR

  • Provided R lecture for several hospitals and universities as expected

  • Since we shared contents as public, it helped us with recruiting process.

  • We could write a book based on these materials.

Next steps

  • Interactive with webR / shinylive

  • More R / Clinical contents

  • I18N using profile

  • Private R4CR

  • Template of R4CR

Questions?

Helpful resources

  • Definitely, Quarto guide

  • Code repository for this quarto presentation

hwanistic@gmail.com

in/jinhwan-kim

jhk0530

R4CR: R Education for Clinical Researchers via Quarto