R is for
Authoring!!

OOH Session #108…
PRISMA
flow diagrams

Open Office Hours
(December 15, 2025)

• Recap session #107
• Today’s topic(s):
  • PRISMA flow diagrams
• Shared problem-solving

Reminder – check it out!!

Fantastic resource!!

Recap of Session
#107:

Observable

• Whatdat?
• GitHub
• GitHub
• GitHub

Language

Enables interactivity that updates instantly with user input (e.g., it’s reactive)

You can include {ojs} code chunks within html Quarto products (websites, dashboards, etc)

Scrollytelling:

(function () {
  const uid = 'ojs-counter-1';
  const host = document.getElementById(uid) || document.body;

  const container = document.createElement('div');
  container.id = uid + '-root';
  container.style.maxWidth = '720px';
  container.style.margin = '24px auto';
  container.innerHTML = `
    <div style="text-align:center; padding:28px; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;">
      <button id="${uid}-btn" aria-live="polite" style="font-size:18px; padding:10px 20px; cursor:pointer; border-radius:6px; border:1px solid #ccc; background:#fff;">
        Click to +1!
      </button>

      <div id="${uid}-display" style="margin-top:22px;">
        <h2 style="margin:0; font-weight:600;">Count: <strong id="${uid}-value" style="color:#e15759;">0</strong></h2>
        <p id="${uid}-sub" style="color:#666; margin-top:10px;">You've clicked <strong id="${uid}-plural">0</strong> times!</p>
      </div>
    </div>
  `;

  host.appendChild(container);

  let count = 0;
  const btn = document.getElementById(`${uid}-btn`);
  const valueEl = document.getElementById(`${uid}-value`);
  const pluralEl = document.getElementById(`${uid}-plural`);

  function updateUI() {
    valueEl.textContent = String(count);
    pluralEl.textContent = String(count);
    btn.setAttribute('aria-label', `Click to increment. Current count ${count}`);
  }

  btn.addEventListener('click', () => {
    count += 1;
    updateUI();
  });

  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      count += 1;
      updateUI();
    }
  });

  updateUI();
})();

(function () {
  // A different visual (not a repeat): color-cycle panel with three controls
  const uid = 'ojs-color-panel-1';
  const host = document.getElementById(uid) || document.body;

  const colors = ['#ff6b6b', '#ffd93d', '#6be3ff', '#9d8bff', '#7be495'];
  let idx = 0;

  const root = document.createElement('div');
  root.id = uid + '-root';
  root.style.maxWidth = '520px';
  root.style.margin = '18px auto';
  root.style.display = 'flex';
  root.style.gap = '12px';
  root.style.alignItems = 'center';
  root.innerHTML = `
    <div id="${uid}-panel" style="width:220px; height:120px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.12);"></div>
    <div style="flex:1 1 auto;">
      <div style="margin-bottom:8px;"><strong>Color Cycle</strong></div>
      <div style="display:flex; gap:8px; align-items:center;">
        <button id="${uid}-prev" style="padding:6px 10px;">Prev</button>
        <button id="${uid}-next" style="padding:6px 10px;">Next</button>
        <button id="${uid}-rand" style="padding:6px 10px;">Random</button>
      </div>
      <div style="margin-top:10px; color:#666; font-size:13px;">Index: <span id="${uid}-idx">0</span></div>
    </div>
  `;

  host.appendChild(root);

  const panel = document.getElementById(`${uid}-panel`);
  const prev = document.getElementById(`${uid}-prev`);
  const next = document.getElementById(`${uid}-next`);
  const rand = document.getElementById(`${uid}-rand`);
  const idxLabel = document.getElementById(`${uid}-idx`);

  function render() {
    panel.style.background = colors[idx % colors.length];
    idxLabel.textContent = String(idx);
  }

  prev.addEventListener('click', () => { idx = (idx - 1 + colors.length) % colors.length; render(); });
  next.addEventListener('click', () => { idx = (idx + 1) % colors.length; render(); });
  rand.addEventListener('click', () => { idx = Math.floor(Math.random() * colors.length); render(); });

  // keyboard accessibility on panel
  panel.tabIndex = 0;
  panel.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') prev.click();
    if (e.key === 'ArrowRight') next.click();
  });

  render();
})();

(function(){
  const uid = 'ojs-scatter-1';
  const host = document.getElementById(uid) || document.body;

  // small markup
  const html = `
    <div style="display:flex;gap:12px;align-items:flex-start;">
      <div style="width:220px;font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Arial;">
        <div style="margin-bottom:8px;"><strong>Controls</strong></div>
        <div>Points: <span id="${uid}-n-label">200</span></div>
        <input id="${uid}-n" type="range" min="20" max="1000" value="200" style="width:100%;margin-bottom:8px;"/>
        <div>Min Y: <span id="${uid}-ymin-label">-3.0</span></div>
        <input id="${uid}-ymin" type="range" min="-5" max="5" step="0.1" value="-3" style="width:100%;"/>
      </div>
      <svg id="${uid}-svg" width="520" height="300" viewBox="0 0 520 300" style="border:1px solid #eee;border-radius:6px;background:#fff;"></svg>
    </div>
    <div id="${uid}-tooltip" style="position:absolute;display:none;pointer-events:none;background:rgba(0,0,0,0.75);color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;"></div>
  `;
  const container = document.createElement('div');
  container.id = uid + '-root';
  container.style.margin = '6px 0 18px';
  container.innerHTML = html;
  host.appendChild(container);

  // small init in RAF so elements exist
  requestAnimationFrame(() => {
    const svg = document.getElementById(`${uid}-svg`);
    const nInput = document.getElementById(`${uid}-n`);
    const nLabel = document.getElementById(`${uid}-n-label`);
    const yminInput = document.getElementById(`${uid}-ymin`);
    const yminLabel = document.getElementById(`${uid}-ymin-label`);
    const tooltip = document.getElementById(`${uid}-tooltip`);

    if (!svg || !nInput || !nLabel || !yminInput || !yminLabel || !tooltip) {
      console.error('ojs scatter: missing element(s)', {svg:!!svg, nInput:!!nInput, yminInput:!!yminInput, tooltip:!!tooltip});
      return;
    }

    // state and helpers
    let state = { n: +nInput.value, ymin: +yminInput.value, data: [] };

    function genData(n){
      const out = [];
      for (let i=0;i<n;i++){
        const x = Math.random()*10;
        const base = Math.sin(x)*1.6 + x*0.25;
        const y = base + (Math.random()-0.5)*2;
        out.push({x,y});
      }
      return out;
    }

    function clearSVG(){
      while (svg.firstChild) svg.removeChild(svg.firstChild);
    }

    function xScale(x){ return 40 + (x/10) * (520 - 80); } // left/right padding
    function yScale(y){
      // map y roughly to 0..300 with simple clamp
      const ymin = Math.min(...state.data.map(d=>d.y), -5);
      const ymax = Math.max(...state.data.map(d=>d.y), 10);
      const pad = (ymax - ymin) * 0.06;
      const low = ymin - pad;
      const high = ymax + pad;
      const t = (y - low) / (high - low || 1);
      return 260 - t * 220; // top/bottom padding
    }

    function draw(){
      clearSVG();

      // axes (simple)
      const axisX = document.createElementNS('http://www.w3.org/2000/svg','line');
      axisX.setAttribute('x1','40'); axisX.setAttribute('y1','270');
      axisX.setAttribute('x2','480'); axisX.setAttribute('y2','270');
      axisX.setAttribute('stroke','#ddd');
      svg.appendChild(axisX);

      // filter
      const pts = state.data.filter(d => d.y >= state.ymin);

      // draw points
      pts.forEach(d => {
        const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
        c.setAttribute('cx', String(xScale(d.x)));
        c.setAttribute('cy', String(yScale(d.y)));
        c.setAttribute('r','4.5');
        c.setAttribute('fill','#4e79a7');
        c.setAttribute('stroke','#fff');
        c.setAttribute('stroke-width','0.8');
        c.style.cursor = 'pointer';
        c.__data = d;
        c.addEventListener('mouseenter', (ev) => {
          const dd = ev.target.__data;
          tooltip.style.display = 'block';
          tooltip.innerHTML = `x: ${dd.x.toFixed(2)}<br/>y: ${dd.y.toFixed(2)}`;
        });
        c.addEventListener('mousemove', (ev) => {
          tooltip.style.left = (ev.pageX + 10) + 'px';
          tooltip.style.top = (ev.pageY - 30) + 'px';
        });
        c.addEventListener('mouseleave', () => {
          tooltip.style.display = 'none';
        });
        svg.appendChild(c);
      });

      // small label
      const lbl = document.createElementNS('http://www.w3.org/2000/svg','text');
      lbl.setAttribute('x','260'); lbl.setAttribute('y','16');
      lbl.setAttribute('text-anchor','middle'); lbl.setAttribute('font-size','12'); lbl.setAttribute('fill','#444');
      lbl.textContent = `Showing ${pts.length} of ${state.data.length} points (Min Y = ${state.ymin.toFixed(1)})`;
      svg.appendChild(lbl);
    }

    // debounce
    let t;
    function redrawDebounced(){ clearTimeout(t); t = setTimeout(draw, 40); }

    // events
    nInput.addEventListener('input', (e) => {
      state.n = +e.target.value;
      nLabel.textContent = String(state.n);
      state.data = genData(state.n);
      redrawDebounced();
    });

    yminInput.addEventListener('input', (e) => {
      state.ymin = +e.target.value;
      yminLabel.textContent = state.ymin.toFixed(1);
      redrawDebounced();
    });

    // initial render
    state.data = genData(state.n);
    draw();
  });
})();

Today…

PRISMA

Preferred
Reporting
Items for
Systematic Reviews and
Meta–
Analyses (Moher et al., 2009; Page, McKenzie, et al., 2021; Page, Moher, et al., 2021)

Suggests:

• Reporting standards for systematic reviews
• 27–item checklist
• “flow” diagrams

PRISMA flow diagrams

PRISMA References:

Moher, D., Liberati, A., Tetzlaff, J., & Altman, D. G. (2009). Preferred reporting items for systematic reviews and meta-analyses: The PRISMA statement. Bmj, 339.

Page, M. J., McKenzie, J. E., Bossuyt, P. M., Boutron, I., Hoffmann, T. C., Mulrow, C. D., Shamseer, L., Tetzlaff, J. M., Akl, E. A., Brennan, S. E., et al. (2021). The PRISMA 2020 statement: An updated guideline for reporting systematic reviews. Bmj, 372, 1–9. https://www.bmj.com/content/372/bmj.n71

Page, M. J., Moher, D., Bossuyt, P. M., Boutron, I., Hoffmann, T. C., Mulrow, C. D., Shamseer, L., Tetzlaff, J. M., Akl, E. A., Brennan, S. E., et al. (2021). PRISMA 2020 explanation and elaboration: Updated guidance and exemplars for reporting systematic reviews. Bmj, 372, 1–36. https://www.bmj.com/content/372/bmj.n160

Session Info (December 15, 2025) Rendering:

R version 4.5.0 (2025-04-11 ucrt)
Platform: x86_64-w64-mingw32/x64
Running under: Windows 10 x64 (build 19045)

Matrix products: default
  LAPACK version 3.12.1

locale:
[1] LC_COLLATE=English_United States.utf8 
[2] LC_CTYPE=English_United States.utf8   
[3] LC_MONETARY=English_United States.utf8
[4] LC_NUMERIC=C                          
[5] LC_TIME=English_United States.utf8    

time zone: America/Chicago
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] compiler_4.5.0    fastmap_1.2.0     cli_3.6.5         tools_4.5.0      
 [5] htmltools_0.5.8.1 rstudioapi_0.17.1 yaml_2.3.10       rmarkdown_2.29   
 [9] knitr_1.50        jsonlite_2.0.0    xfun_0.52         digest_0.6.37    
[13] rlang_1.1.6       evaluate_1.0.5