Tabby Examples

Introduction

This document demonstrates the Tabby extension for Quarto, which automatically creates tabsets for code blocks.

Document Header

The document header specifies the default tab as R:

---
title: "Demonstrating Tabby Extension"
format: 
  html:
    toc: true
filters:
  - tabby  # Include the tabby filter
tabby:
  default-tab: "r"  # Set R as the default tab document-wide
---

Basic Usage

Here’s a simple example showing the same algorithm in different languages:

Source (Click to Expand)

::: {.tabby}
```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 5 Fibonacci numbers
for i in range(5):
    print(fibonacci(i))
```

```javascript
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

// Calculate first 5 Fibonacci numbers
for (let i = 0; i < 5; i++) {
    console.log(fibonacci(i));
}
```

```r
fibonacci <- function(n) {
    if (n <= 1) return(n)
    return(fibonacci(n-1) + fibonacci(n-2))
}

# Calculate first 5 Fibonacci numbers
for(i in seq_len(5)) {
    print(fibonacci(i))
}
```
:::

R

fibonacci <- function(n) {
    if (n <= 1) return(n)
    return(fibonacci(n-1) + fibonacci(n-2))
}

# Calculate first 5 Fibonacci numbers
for(i in seq_len(5)) {
    print(fibonacci(i))
}

Python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 5 Fibonacci numbers
for i in range(5):
    print(fibonacci(i))

Javascript

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

// Calculate first 5 Fibonacci numbers
for (let i = 0; i < 5; i++) {
    console.log(fibonacci(i));
}

Grouped Tabs

You can group related tabs together using the group attribute:

Source (Click to Expand)

::: {.tabby group="data-loading"}
```python
import pandas as pd
data = pd.read_csv('data.csv')
```

```r
data <- read.csv('data.csv')
```
:::

::: {.tabby group="data-loading"}
```python
# Check the first few rows
print(data.head())
```

```r
# Check the first few rows
head(data)
```
:::

R

data <- read.csv('data.csv')

Python

import pandas as pd
data = pd.read_csv('data.csv')

R

# Check the first few rows
head(data)

Python

# Check the first few rows
print(data.head())

Override Default Tab

You can override the document-wide default tab for specific code blocks. Here’s an example with Javascript as the default tab:

Source (Click to Expand)

::: {.tabby default-tab="javascript"}
```python
print("Hello from Python!")
```

```r
print("Hello from R!")
```

```javascript
console.log("Hello from JavaScript!");
```
:::

Javascript

console.log("Hello from JavaScript!");

Python

print("Hello from Python!")

R

print("Hello from R!")

Code Execution with Results

Tabby also supports code execution with results. Here’s an example that generates random data and calculates summary statistics:

Source (Click to Expand)

::: {.tabby}
```{python}
import numpy as np

# Generate some random data
data = np.random.normal(0, 1, 1000)

# Calculate summary statistics
mean = np.mean(data)
std = np.std(data)

print(f"Mean: {mean:.2f}")
print(f"Standard Deviation: {std:.2f}")
```

```{r}
#| echo: true
#| output: true

# Generate random data
data <- rnorm(1000)

# Calculate summary statistics
cat("Mean:", mean(data), "\n")
cat("Standard Deviation:", sd(data))
```
:::

R

# Generate random data
data <- rnorm(1000)

# Calculate summary statistics
cat("Mean:", mean(data), "\n")

Mean: 0.04482385 

cat("Standard Deviation:", sd(data))

Standard Deviation: 0.9549347

Python

import numpy as np

# Generate some random data
data = np.random.normal(0, 1, 1000)

# Calculate summary statistics
mean = np.mean(data)
std = np.std(data)

print(f"Mean: {mean:.2f}")

Mean: -0.00

print(f"Standard Deviation: {std:.2f}")

Standard Deviation: 1.01

Code may also render figures. Here’s an example that generates a distribution plot using Python and R:

Source (Click to Expand)

::: {.tabby}
```{python}
#| label: fig-python
#| fig-cap: "Distribution plot using Python"

import matplotlib.pyplot as plt
import seaborn as sns

plt.figure(figsize=(8, 4))
sns.histplot(data, bins=30)
plt.title("Normal Distribution")
plt.show()
```

```{r}
#| label: fig-r
#| fig-cap: "Distribution plot using R"

hist(data, main="Normal Distribution", breaks=30)
```
:::

R

hist(data, main="Normal Distribution", breaks=30)

Figure 1: Distribution plot using R

Python

import matplotlib.pyplot as plt
import seaborn as sns

plt.figure(figsize=(8, 4))
sns.histplot(data, bins=30)
plt.title("Normal Distribution")
plt.show()

Figure 2: Distribution plot using Python

URL Parameters

You can also specify the default tab via URL parameter: ?default-tab=python or ?default-tab=r

Try it by clicking on the following link:

https://quarto.thecoatlessprofessor.com/tabby/qtabby-example.html?default-tab=python