### Contour Plot with Triangular Support (Prevent Bleeding)

```markdown
## 🎮 Interactive: Density Visualization {.smaller}

```{ojs}
//| echo: false

jointData = {
  const n = 80;  // Higher resolution for smoother contours
  const data = [];
  
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      const y1 = i / (n - 1);
      const y2 = j / (n - 1);
      
      // Define support region
      const inRegion = (region_type === "Triangular") ? (y2 <= y1) : true;
      
      if (inRegion) {
        const density = Math.pow(y1 + 0.01, power_a) * Math.pow(y2 + 0.01, power_b);
        data.push({y1, y2, density});
      }
    }
  }
  
  // CRITICAL: Add zero-density boundary points to prevent contour bleeding
  if (region_type === "Triangular") {
    for (let i = 0; i < n; i++) {
      const y1 = i / (n - 1);
      for (let j = Math.ceil(y1 * (n-1)) + 1; j < n; j++) {
        const y2 = j / (n - 1);
        data.push({y1, y2, density: 0});  // Zero density in forbidden region
      }
    }
  }
  
  return data;
}

Plot.plot({
  width: 600,
  height: 380,
  color: {scheme: "YlOrRd", legend: true, label: "Density"},
  x: {domain: [0, 1], label: "Y₁"},
  y: {domain: [0, 1], label: "Y₂"},
  title: region_type === "Rectangular" 
    ? "Rectangle: Support is 0<Y₁<1, 0<Y₂<1" 
    : "Triangle: Support is 0<Y₂≤Y₁<1 (LOWER triangle)",
  marks: [
    Plot.contour(jointData, {x: "y1", y: "y2", fill: "density", blur: 1, thresholds: 14}),
    Plot.frame()
  ]
})

### Conditional Slice Visualization (Improved)

```markdown
```{ojs}
//| echo: false

// Vertical band to highlight conditioning slice
sliceBand = {
  const bandwidth = 0.015;
  const ymax = region_type === "Triangular" ? sliceY1 : 1;
  
  return [{
    x1: sliceY1 - bandwidth,
    x2: sliceY1 + bandwidth,
    y1: 0,
    y2: ymax
  }];
};

// Dots showing feasible conditional range
conditionalDots = {
  const points = [];
  const ymax = region_type === "Triangular" ? sliceY1 : 1;
  for (let i = 0; i <= 35; i++) {
    points.push({y1: sliceY1, y2: (i / 35) * ymax});
  }
  return points;
};

// Constraint boundary line
constraintLine = region_type === "Triangular"
  ? Array.from({length: 100}, (_, i) => ({y1: i / 99, y2: i / 99}))
  : [];

plot = Plot.plot({
  width: 600,
  height: 380,
  marks: [
    Plot.contour(jointData, {x: "y1", y: "y2", fill: "density", blur: 1}),
    // Semi-transparent vertical band
    Plot.rect(sliceBand, {x1: "x1", x2: "x2", y1: "y1", y2: "y2", 
                          fill: "#3b82f6", fillOpacity: 0.12}),
    // Constraint boundary
    constraintLine.length 
      ? Plot.line(constraintLine, {x: "y1", y: "y2", stroke: "#1f2937", 
                                   strokeWidth: 3, strokeDasharray: "8,4"}) 
      : null,
    // Conditional range dots
    Plot.dot(conditionalDots, {x: "y1", y: "y2", r: 3, fill: "#1d4ed8", opacity: 0.9}),
    // Vertical slice marker
    Plot.ruleX([sliceY1], {stroke: "#1d4ed8", strokeWidth: 3}),
    Plot.frame()
  ].filter(Boolean)
});

html`<div>
  ${plot}
  <div style="margin-top: 5px; font-size: 0.9em; line-height: 1.3;">
    <strong style="color: #1d4ed8;">Blue band at Y₁=${sliceY1.toFixed(2)}:</strong> 
    Shows Y₂'s feasible range. ${region_type === "Triangular" 
      ? `Only [0, ${sliceY1.toFixed(2)}] allowed.` 
      : "Always [0, 1] allowed."}
  </div>
</div>`

--- R Case Study - Data Loading

```markdown
## 💰 Case Study: [Title] {.smaller}

::: {style="font-size: 30px"}
```{r}
#| echo: true
#| code-fold: true
#| code-summary: "📊 Show Data Loading Code"
#| message: false
#| warning: false
#| eval: true

# Load required packages
library(tidyverse)
library(tidyquant)
library(knitr)

# Download stock data
symbols <- c("AAPL", "MSFT", "SPY")
prices <- tq_get(symbols,
                 from = "2020-01-01",
                 to = Sys.Date())

# Calculate daily returns
returns <- prices %>%
  group_by(symbol) %>%
  tq_transmute(select = adjusted,
               mutate_fun = periodReturn,
               period = "daily",
               col_rename = "ret")

# Pivot to wide format
returns_wide <- returns %>%
  pivot_wider(names_from = symbol,
              values_from = ret) %>%
  na.omit()

# Summary statistics
summary_stats <- returns_wide %>%
  summarise(across(-date, list(
    Mean = ~mean(.) * 100,
    StdDev = ~sd(.) * 100
  )))

kable(summary_stats, digits = 3,
      caption = "Daily Return Statistics (%)")

### Case Study - Visualization Slide (separate slide)

```markdown
## 💰 Case Study: [Title] - Visualization {.smaller}

::: {style="font-size: 30px"}
```{r}
#| echo: true
#| code-fold: true
#| code-summary: "📊 Show Plot Code"
#| message: false
#| warning: false
#| eval: true
#| fig-width: 8
#| fig-height: 5

# Create visualization
ggplot(returns_wide, aes(x = AAPL, y = MSFT)) +
  geom_point(alpha = 0.5, color = "steelblue") +
  geom_smooth(method = "lm", color = "red", se = TRUE) +
  labs(title = "Joint Distribution of Returns",
       subtitle = "Daily returns with regression line",
       x = "AAPL Daily Return",
       y = "MSFT Daily Return") +
  theme_minimal(base_size = 14)

## R Case Study - Analysis

```markdown
## 💰 Case Study: [Analysis Title] {.smaller}

::: {style="font-size: 30px"}
::: {.columns}
::: {.column width="50%"}

```{r}
#| echo: true
#| code-fold: true
#| code-summary: "📊 Show Analysis Code"
#| message: false
#| warning: false
#| eval: true

# Correlation matrix
cor_matrix <- cor(returns_wide %>% select(-date))
kable(cor_matrix, digits = 3, caption = "Correlation Matrix")

# Covariance matrix
cov_matrix <- cov(returns_wide %>% select(-date))
kable(cov_matrix, digits = 6, caption = "Covariance Matrix")

## Quiz Question Pattern

```markdown
## 📝 Quiz #N: [Topic] {.smaller .quiz-question}

[Question text]

- [[Correct answer text]]{.correct data-explanation="✅ Correct! [Explanation of why this is correct]"}
- [Wrong answer 1]
- [Wrong answer 2]
- [Wrong answer 3]