Quarto演示中能否嵌入Shiny/Observable JS交互式幻灯片？附示例需求

核心结论 #

• 可以直接在Quarto演示中嵌入Shiny应用和Observable JS交互式图表，无需后台服务器托管——Quarto会将相关依赖打包进静态HTML文件，本地打开即可交互。

嵌入Shiny交互式图表（本地可运行） #

Quarto支持创建Shiny驱动的演示文稿，生成的HTML包含Shiny运行所需的全部资源，无需部署到服务器。

以下是可直接复用的示例代码（写入Quarto .qmd文件）：

---
title: "Quarto + Shiny 交互式演示"
format: revealjs
server: shiny
---

## Shiny 交互式直方图

```{r}
#| context: server

inputPanel(
  sliderInput("bins", "直方图分组数量:", min = 1, max = 50, value = 30)
)

renderPlot({
  x    <- faithful$waiting
  bins <- seq(min(x), max(x), length.out = input$bins + 1)
  
  hist(x, breaks = bins, col = "#75AADB", border = "white",
       xlab = "等待时间", main = "Old Faithful 喷发等待时间直方图")
})

关键说明：
- YAML头部必须添加`server: shiny`，声明这是Shiny驱动的文档。
- 代码块的`#| context: server`标记指定代码运行在Shiny服务器上下文。
- 导出的HTML文件可直接本地打开，无需额外服务器支持。

---

### 嵌入Observable JS交互式图表（本地可运行）
Quarto原生支持Observable JS单元格，可直接编写或引用交互式代码，打包后为静态HTML，本地即可交互。

以下是可直接复用的示例代码（写入Quarto `.qmd`文件）：
```markdown
---
title: "Quarto + Observable JS 交互式演示"
format: revealjs
---

## Observable JS 交互式散点图

```{ojs}
// 导入Observable绘图库与交互组件
import {Inputs, Plot} from "@observablehq/plot"

// 交互式控件：调节点大小
const pointSize = Inputs.range([5, 50], {value: 20, label: "点大小"})

// 生成随机示例数据
const data = Array.from({length: 100}, () => ({
  x: Math.random() * 100,
  y: Math.random() * 100,
  category: Math.random() > 0.5 ? "A" : "B"
}))

// 绘制交互式散点图
Plot.plot({
  marks: [
    Plot.dot(data, {x: "x", y: "y", fill: "category", r: pointSize})
  ],
  width: 600,
  height: 400
})

关键说明：
- 使用`{ojs}`代码块标记Observable JS代码。
- 可直接导入Observable官方库，Quarto会自动处理依赖下载与打包。
- 导出的HTML文件本地打开即可实现交互式操作，无需外部服务器。

内容的提问来源于stack exchange，提问作者Eizy