Live Notebook Demo
Complete notebook with images and outputs
Live Notebook Demo
This page demonstrates a complete Jupyter notebook with images and outputs.
Data Analysis and Visualization Demo
This notebook demonstrates various output types including images, plots, and data visualizations.
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
# 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:
| 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.
# 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()
# 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
}
}
{'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.
# Data Analysis Example
This notebook demonstrates basic data analysis using Python.
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
## Data Visualization
Let's create a simple histogram to visualize the data distribution.
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()
# Show first 5 data points
data[:5]
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.
📚 Complete Documentation
For comprehensive documentation, visit:
- Getting Started - Installation and basic usage
- Advanced Usage - Multi-language support and customization
- API Reference - Complete API documentation
This example shows the full capabilities of notebook-mdx including image rendering, multiple output types, and authentic Jupyter styling.