R is for
Authoring!!

OOH Session #107…
Observable

Open Office Hours
(December 07, 2025)

• Recap session #106
• Today’s topic(s):
  • Observable
• Shared problem-solving

Reminder

Fantastic resource!!

Recap of Session
#106:

¡Noël y Navidad!

• Traditional approaches
• card

1. christmas package:
2. base tree:
3. ggplot layering:
4. mailing via postcard:

Final Code:

---
title: "[Merry Christmas!!]{.swash}"
author: "[...and best wishes for a wonderful 2026!!!]{.dance}"
title-slide-attributes: 
  data-background-image: https://i.imgur.com/vk1ejPi.jpg
  data-background-opacity: ".8"
format: 
  revealjs:
    mouse-wheel: true
engine: knitr
filters:
  - snow
---

## {background-image="https://static.vecteezy.com/system/resources/previews/013/113/444/non_2x/winter-christmas-background-free-vector.jpg" background-opacity=.5}

![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExYzFxemZ0YTYzdXV0c2w2bnBhNm1jMGE5M3c3aGFyM2FoaXE5cmlmYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dv9RKxAm81QFa/giphy.gif){style="float: right; margin-left: 1em; height: 280px;"}

::: {.dm}

I spent a lot of discretionary time this year [leveling--up my {{< iconify material-icon-theme:quarto >}}](https://www.youtube.com/live/ImQIftE57Iw?si=rT9bUMmC_enok85m&t=2013) game, however, I did set aside enough time to slay many mööses. There were antlers everywhere. It was utter mööseageddon!! 

While sifting thröugh the carnage, I had time to reflect that I'm grateful for friends and family & surprisingly disappointed that 3i Atlas is apparently more interested in Jupyter than Earth... 

I sincerely hope the new year brings you and your family preposterously overflowing levels of health and happiness!!

[-- John-o]{style="float: right; margin-left: 1em;"}

:::

```{scss}                 
/*-- scss:defaults --*/

@import url('https://fonts.googleapis.com/css?family=Berkshire Swash');
@import url('https://fonts.googleapis.com/css?family=Dancing Script');
@import url('https://fonts.googleapis.com/css?family=Caveat Brush');

#title-slide {
  text-align: left;  // center, left, right
}

.swash{
  font-family: "Berkshire Swash";
  color: #0DAC50;
  text-shadow: 
    2px 2px 0px #355E3B,
    -2px -2px 0px #355E3B;
}

.dance{
  font-family: "Dancing Script";
  color: black;
  font-size: 1.5em;
}

.dm{
  font-family: Caveat Brush;
  font-size: 1.1em;
}

```               

Published Card:

Today…

// This cell forces the runtime to load before anything else
 {}

Observable

viewof freq = Inputs.range([0.5, 15], {value: 5, step: 0.05, label: "Frequency"})

{
  const width = 900;
  const height = 460;

  const canvas = html`<canvas width=${width} height=${height}
    style="width:100%; max-width:960px; height:auto; background:#0f172a; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.4); display:block; margin:2rem auto;"></canvas>`;
  const ctx = canvas.getContext("2d");

  let t = 0;
  function animate() {
    ctx.fillStyle = "rgba(15, 23, 42, 0.15)";
    ctx.fillRect(0, 0, width, height);

    // Main wave
    ctx.strokeStyle = "#c084fc";
    ctx.lineWidth = 5;
    ctx.beginPath();
    for (let i = 0; i <= 600; i++) {
      const x = (i / 600) * width;
      const y = height / 2
        + Math.sin(x / 100 * freq + t) * 90
        + Math.sin(x / 60 * freq * 1.7 - t * 0.8) * 50;
      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
    }
    ctx.stroke();

    // Glowing tracer dots
    for (let i = 0; i < 15; i++) {
      const x = width * (i / 14);
      const y = height / 2
        + Math.sin(x / 100 * freq + t) * 90
        + Math.sin(x / 60 * freq * 1.7 - t * 0.8) * 50;

      ctx.fillStyle = "#fde047";
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI * 2);
      ctx.fill();
    }

    t += 0.04;
    requestAnimationFrame(animate);
  }
  animate();

  // Title that updates live
  html`<div style="text-align:center; margin:1.5rem 0 0.5rem; font-size:2.5rem; color:#e9d5ff; font-weight:600;">
    Frequency = ${freq.toFixed(2)}
  </div>`;

  return canvas;
}

Session Info (December 07, 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