Jupyter Notebook Demo

This page demonstrates how to embed Jupyter notebooks directly in MDX with authentic styling and image rendering.

🎯 Features

📄 Direct Import: Use simple :::notebook directive syntax
🎨 Authentic Styling: Matches real Jupyter notebook interface
🖼️ Image Rendering: Supports PNG, JPEG, GIF, and SVG images
📊 Multiple Outputs: Stream, execute_result, display_data, and error outputs
🔢 Execution Counts: Proper In [n]: and Out [n]: prompts

Data Analysis and Visualization Demo

This notebook demonstrates various output types including images, plots, and data visualizations.

In [1]:

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

# Set up the plotting style
plt.style.use('default')
sns.set_palette("husl")

print("Libraries imported successfully!")
print(f"NumPy version: {np.__version__}")
print(f"Pandas version: {pd.__version__}")
print(f"Matplotlib version: {plt.matplotlib.__version__}")

Libraries imported successfully!
NumPy version: 1.26.2
Pandas version: 2.1.3
Matplotlib version: 3.8.1

In [2]:

# Create sample dataset
np.random.seed(42)
n_samples = 1000

# Generate synthetic data
data = {
    'x': np.random.randn(n_samples),
    'y': np.random.randn(n_samples),
    'category': np.random.choice(['A', 'B', 'C'], n_samples),
    'values': np.random.exponential(2, n_samples)
}

df = pd.DataFrame(data)
df['z'] = 0.5 * df['x'] + 0.3 * df['y'] + np.random.randn(n_samples) * 0.1

print(f"Dataset created with {len(df)} rows and {len(df.columns)} columns")
print("\nFirst few rows:")
df.head()

Dataset created with 1000 rows and 5 columns

First few rows:

Out[2]:

	x	y	category	values	z
0	0.496714	1.399355	B	0.701792	0.593094
1	-0.138264	0.924634	C	1.229372	0.203782
2	0.647689	0.059630	B	1.058976	0.334309
3	1.523030	-0.646937	C	2.559759	0.551013
4	-0.234153	0.698223	C	0.971627	0.096450

Data Visualization

Let's create several plots to demonstrate different visualization types and image output formats.

In [3]:

# Create a scatter plot with multiple subplots
fig, axes = plt.subplots(2, 2, figsize=(12, 10))
fig.suptitle('Multi-panel Data Visualization', fontsize=16, fontweight='bold')

# Scatter plot
axes[0, 0].scatter(df['x'], df['y'], c=df['values'], alpha=0.6, cmap='viridis')
axes[0, 0].set_xlabel('X values')
axes[0, 0].set_ylabel('Y values')
axes[0, 0].set_title('Scatter Plot with Color Mapping')

# Histogram
axes[0, 1].hist(df['values'], bins=30, alpha=0.7, color='skyblue', edgecolor='black')
axes[0, 1].set_xlabel('Values')
axes[0, 1].set_ylabel('Frequency')
axes[0, 1].set_title('Distribution of Values')

# Box plot by category
df.boxplot(column='values', by='category', ax=axes[1, 0])
axes[1, 0].set_title('Values by Category')
axes[1, 0].set_xlabel('Category')

# Correlation heatmap
correlation_matrix = df[['x', 'y', 'z', 'values']].corr()
im = axes[1, 1].imshow(correlation_matrix, cmap='coolwarm', aspect='auto')
axes[1, 1].set_xticks(range(len(correlation_matrix.columns)))
axes[1, 1].set_yticks(range(len(correlation_matrix.columns)))
axes[1, 1].set_xticklabels(correlation_matrix.columns)
axes[1, 1].set_yticklabels(correlation_matrix.columns)
axes[1, 1].set_title('Correlation Matrix')

plt.tight_layout()
plt.show()

In [4]:

# Statistical summary as JSON
summary_stats = {
    'dataset_info': {
        'n_samples': len(df),
        'n_features': len(df.columns),
        'memory_usage': f"{df.memory_usage(deep=True).sum() / 1024:.2f} KB"
    },
    'numerical_summary': {
        'x': {
            'mean': float(df['x'].mean()),
            'std': float(df['x'].std()),
            'min': float(df['x'].min()),
            'max': float(df['x'].max())
        },
        'y': {
            'mean': float(df['y'].mean()),
            'std': float(df['y'].std()),
            'min': float(df['y'].min()),
            'max': float(df['y'].max())
        },
        'values': {
            'mean': float(df['values'].mean()),
            'std': float(df['values'].std()),
            'min': float(df['values'].min()),
            'max': float(df['values'].max())
        }
    },
    'category_counts': df['category'].value_counts().to_dict()
}

# Display as JSON
import json
print(json.dumps(summary_stats, indent=2))

# Also return as object for JSON display
summary_stats

{
  "dataset_info": {
    "n_samples": 1000,
    "n_features": 5,
    "memory_usage": "88.02 KB"
  },
  "numerical_summary": {
    "x": {
      "mean": 0.01933205582232549,
      "std": 0.9792159381796757,
      "min": -3.2412673400690726,
      "max": 3.852731490654721
    },
    "y": {
      "mean": 0.07083623724915591,
      "std": 0.9974543772274209,
      "min": -2.9403886346642802,
      "max": 3.193107567844861
    },
    "values": {
      "mean": 1.9764722991479506,
      "std": 1.9057724443364372,
      "min": 0.0026943559869552847,
      "max": 12.08368262969869
    }
  },
  "category_counts": {
    "A": 352,
    "C": 325,
    "B": 323
  }
}

Out[4]:

{'dataset_info': {'n_samples': 1000,
  'n_features': 5,
  'memory_usage': '88.02 KB'},
 'numerical_summary': {'x': {'mean': 0.01933205582232549,
   'std': 0.9792159381796757,
   'min': -3.2412673400690726,
   'max': 3.852731490654721},
  'y': {'mean': 0.07083623724915591,
   'std': 0.9974543772274209,
   'min': -2.9403886346642802,
   'max': 3.193107567844861},
  'values': {'mean': 1.9764722991479506,
   'std': 1.9057724443364372,
   'min': 0.0026943559869552847,
   'max': 12.08368262969869}},
 'category_counts': {'A': 352, 'C': 325, 'B': 323}}

Summary

This notebook demonstrated:

1. Data Import and Processing - Loading libraries and creating synthetic data
2. Data Exploration - Displaying DataFrame structure and summary statistics
3. Visualization - Multiple plot types in a single figure
4. JSON Output - Structured data display with proper formatting
5. Mixed Output Types - Combination of text, plots, and structured data

The notebook showcases various output formats that are properly handled by the MDX notebook renderer:
- Text streams (print statements)
- HTML tables (DataFrame displays)
- Images (matplotlib plots)
- JSON data (structured objects)

All outputs maintain their original formatting and interactivity when displayed in the documentation.

In [ ]:

# Data Analysis Example

This notebook demonstrates basic data analysis using Python.

In [5]:

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

# Create sample data
np.random.seed(42)
data = np.random.randn(100)
print(f"Generated {len(data)} data points")
print(f"Mean: {np.mean(data):.2f}")
print(f"Std: {np.std(data):.2f}")

Generated 100 data points
Mean: -0.10
Std: 0.90

In [ ]:

## Data Visualization

Let's create a simple histogram to visualize the data distribution.

In [6]:

plt.figure(figsize=(10, 6))
plt.hist(data, bins=20, alpha=0.7, color='skyblue', edgecolor='black')
plt.title('Distribution of Random Data')
plt.xlabel('Value')
plt.ylabel('Frequency')
plt.grid(True, alpha=0.3)
plt.show()

In [7]:

# Show first 5 data points
data[:5]

Out[7]:

array([ 0.49671415, -0.1382643 ,  0.64768854,  1.52302986, -0.23415337])

Summary

This notebook showed how to:
1. Generate random data using NumPy
2. Calculate basic statistics
3. Create visualizations with Matplotlib

The data follows a normal distribution as expected.

🧪 Image Output Types Supported

The notebook renderer supports all standard Jupyter image formats:

PNG Images: image/png - Base64 encoded
JPEG Images: image/jpeg - Base64 encoded
GIF Images: image/gif - Base64 encoded
SVG Images: image/svg+xml - Raw SVG string
HTML Content: text/html - Rich HTML outputs
JSON Data: application/json - Formatted JSON display

🎛️ How It Works

Remark Plugin: remarkNotebookDirective processes :::notebook directives
File Loading: Notebook files are loaded and parsed at build time
Component Rendering: React components render each cell with proper styling
Image Processing: Base64 images are converted to data URLs
Metadata Handling: Image dimensions and other metadata are preserved

💡 Usage Example

# My Documentation

:::notebook{file="./my-notebook.ipynb"}
Description of the notebook
:::

This approach allows you to version control your notebooks and display them with full fidelity in your documentation!

Jupyter Notebook Demo

Jupyter Notebook Demo

🎯 Features

📓 Live Notebook Display

Data Analysis and Visualization Demo

Data Visualization

Summary

Summary

🧪 Image Output Types Supported

🎛️ How It Works

💡 Usage Example

On this page