📊 PyViz Lab — Python Data Visualization Mastery

---

Overview

PyViz Lab is an interactive, browser-based learning platform designed to teach Python data visualization through hands-on practice. It covers Dash, Plotly, Matplotlib, Seaborn, and Folium, with a focus on building real-world dashboards and interactive visualizations.

✨ Key Features

🎓 6 Comprehensive Modules

Module	Library	Lessons	Color	Description
01 — Dash	Dash Framework	3 lessons	🔵#38BDF8	Build reactive web apps with Python — no JavaScript required
02 — Plotly	Plotly Express	2 lessons	🟢#34D399	One-line interactive charts with hover, zoom, and export
03 — Matplotlib	Matplotlib	2 lessons	🟣#F472B6	Publication-quality static visualizations
04 — Seaborn	Seaborn	3 lessons	🟣#A78BFA	Statistical visualizations with beautiful defaults
05 — Folium	Folium	2 lessons	🟠#FB923C	Interactive maps powered by Leaflet.js
06 — Practice	Quiz & Lab	2 lessons	🟡#FBBF24	Test knowledge and build a real dashboard

---

📊 Module 01: Dash Framework

3 Interactive Lessons 🎯

Lesson	Icon	Title	Key Concepts
App Structure	📐	Dash App Structure	app = dash.Dash(), app.layout, app.run_server()
Components	🧩	Dash Components	dcc.Dropdown, dcc.Slider, dcc.RadioItems, dcc.Graph
Callbacks	🔄	Reactive Callbacks	@app.callback, Input/Output, Multiple Outputs, Chained Callbacks

Live Demos ✨

• Flight Delay Dashboard preview — Interactive UI with dropdowns and sliders
• Component playground — Live interactions with:
  • dcc.Dropdown (chart type selector)
  • dcc.Slider (year selector with live value display)
  • dcc.RadioItems (report type toggle)
  • dcc.Checklist (delay type filter)
  • dcc.DatePickerRange (date range selector)
  • dcc.Input (airline code input)

Concept Cards 📝

1. app = dash.Dash(__name__) — Initializes Flask + React server
2. app.layout = html.Div([...]) — Defines DOM tree using Python
3. @app.callback(...) — Reactive decorator for interactivity
4. app.run_server(debug=True) — Starts development server

Code Examples 💻

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(id='airline-select', options=[...]),
    dcc.Graph(id='main-chart')
])

@app.callback(
    Output('main-chart', 'figure'),
    Input('airline-select', 'value')
)
def update_chart(airline):
    filtered_df = df[df['Airline'] == airline]
    return px.line(filtered_df, x='Month', y='Delay')

---

📈 Module 02: Plotly Express

2 Interactive Lessons 🎯

Lesson	Icon	Title	Key Concepts
Chart Types	📊	Chart Types	Line, Bar, Scatter, Pie, Histogram
Interactive	🎮	Interactive Charts	Hover templates, Annotations, Dual Y-axis, Export

Live Chart Explorer 📊

• 5 chart types: Line, Bar, Scatter, Pie/Doughnut, Histogram
• 3 datasets: Airline Delays, Automobile Sales, Revenue Data
• Real-time updates — Change type or dataset instantly
• Color-coded series with hover tooltips

Dataset Details 📁

Dataset	Features	Series
Airline Delays	12 months	Carrier Delay, Weather Delay
Automobile Sales	12 months	Monthly Sales (units)
Revenue Data	12 months	Revenue ($k)

Advanced Features ✨

• Hover templates with custom formatting
• Annotations to highlight key points
• Dual Y-axis for comparing different scales
• Export charts as PNG, SVG, or interactive HTML

---

📉 Module 03: Matplotlib

2 Interactive Lessons 🎯

Lesson	Icon	Title	Key Concepts
Basic Plots	📈	Basic Plots	Line, Bar, Scatter, Area
Subplots	▦	Subplots & Composition	plt.subplots(), GridSpec, Multi-panel figures

Live Chart Controls 🎮

• Plot types: Line, Bar, Scatter, Area
• Styles: Default, Dark Grid, Minimal
• Real-time updates with Chart.js simulation

Subplot Dashboard 📊

• 2×2 grid showing:
  • Annual Sales (line plot)
  • Sales by Category (bar chart)
  • Price vs Demand (scatter plot)
  • Market Share (pie chart)

Code Examples 💻

import matplotlib.pyplot as plt
import numpy as np

fig, axes = plt.subplots(2, 2, figsize=(14, 10))
fig.suptitle('Automobile Sales Dashboard', fontsize=18)

axes[0,0].plot(years, sales)
axes[0,1].bar(categories, values, color=colors)
axes[1,0].scatter(price, demand, alpha=0.6)
axes[1,1].pie(market_share, labels=brands)

plt.tight_layout()
plt.savefig('dashboard.png', dpi=300)

---

📊 Module 04: Seaborn

3 Interactive Lessons 🎯

Lesson	Icon	Title	Key Concepts
Distribution	📉	Distribution Plots	Histogram, KDE, Box, Violin
Categorical	🗂	Categorical Plots	Barplot, Countplot, Stripplot
Regression	📐	Regression Plots	regplot, lmplot, Correlation Heatmaps

Interactive Controls 🎮

• Plot types: Histogram, KDE, Box, Violin
• Datasets: Iris, Restaurant Tips, Flights Data
• Bins slider for histogram resolution
• Real-time updates with simulated Seaborn outputs

Dataset Details 📁

Dataset	Features	Plot Types
Iris	Sepal/Petal measurements	Species comparison
Tips	Restaurant bills, tips, day, smoker	Categorical breakdown
Flights	Monthly passenger counts	Time series, distributions

Statistical Visualizations 📊

• Histogram with KDE overlay
• Violin plot showing full distribution
• Box plot with quartiles and outliers
• Categorical bar chart with confidence intervals
• Regression scatter with OLS line and confidence bands

---

🗺️ Module 05: Folium

2 Interactive Lessons 🎯

Lesson	Icon	Title	Key Concepts
Basic Maps	🗺	Basic Maps	folium.Map(), Tile layers, Center/Zoom
Markers	📍	Markers & Popups	Markers, Clusters, CircleMarkers, Heatmaps

Live Map Controls 🎮

• Tile layers: OpenStreetMap, CartoDB Light, CartoDB Dark
• Locations: New York, London, Tokyo, Sydney, Chicago
• Zoom slider: 3–17 with live update
• Real-time map with Leaflet.js integration

Marker Features 📍

• Custom markers with icons and colors
• Rich popups with HTML content
• CircleMarkers sized by data values
• Marker clusters for dense data
• Heatmap overlay option

Code Examples 💻

import folium
from folium.plugins import MarkerCluster, HeatMap

m = folium.Map(location=[40.7128, -74.0060], zoom_start=12)

# Add marker with popup
folium.Marker(
    [40.7128, -74.0060],
    popup=folium.Popup('<b>NYC</b><br>Population: 8.3M', max_width=200),
    icon=folium.Icon(color='blue', icon='info-sign')
).add_to(m)

# Marker cluster for multiple points
cluster = MarkerCluster().add_to(m)
for _, row in airports.iterrows():
    folium.Marker([row.lat, row.lon]).add_to(cluster)

# Heat map layer
HeatMap(heat_data).add_to(m)

🎯 Module 06: Practice Labs

2 Interactive Lessons 🎯

Lesson	Icon	Title	Description
Quiz	🎯	Quiz: All Modules	6 questions covering all visualization libraries
Lab	🔬	Lab: Airline Dashboard	Build a 5-chart airline delay dashboard

Quiz Features ✅

• 6 comprehensive questions across all modules
• Multiple choice with A/B/C/D options
• Immediate feedback with detailed explanations
• Score tracking per question
• Hint system for each question

Sample Quiz Questions 📝

#	Question	Answer
1	Which decorator makes a Dash callback reactive?	@app.callback()
2	In Plotly Express, which function creates a line chart?	px.line()
3	Which call creates a histogram with KDE in modern Seaborn?	sns.histplot(kde=True)
4	In Folium, what class creates the base interactive map?	folium.Map()
5	What does plt.subplots(2, 2) return?	(fig, axes) — axes is 2×2 array
6	In a Dash callback,Output("graph-id", "figure") specifies?	Which property to update

Lab: Airline Delay Dashboard 🛫

• Build a multi-output callback for 5 charts simultaneously
• Real-time validation with 6-point checklist
• Target output preview showing expected dashboard
• Hints for each step of implementation
• Score tracking (6/6 for perfect solution)

Lab Requirements ✅

Check	Description
✅	@app.callback decorator present
✅	5 Output() items (one per chart)
✅	Input() for year selection
✅	Year filtering logic
✅	px.line or px.bar figure creation
✅	return statement with all 5 figures

---

🎨 Design & Aesthetics

Modern Data Viz Studio 🖥️

• Dark background (#0A0C10) — professional data science IDE aesthetic
• Accent colors per module for visual navigation
• Glass-morphism cards with subtle borders
• Gradient overlays and glow effects
• Custom scrollbars with thin design
• Toast notifications for user feedback

Typography ✍️

• Fraunces — Bold serif headers, big numbers, titles
• JetBrains Mono — Code blocks, labels, technical content
• Outfit — Body text, descriptions, lesson content

Module Color Scheme 🎨

Module	Color	Hex	Usage
Dash	Blue	#38BDF8	App structure, components, callbacks
Plotly	Green	#34D399	Chart types, interactive features
Matplotlib	Pink	#F472B6	Basic plots, subplots
Seaborn	Purple	#A78BFA	Distributions, categorical, regression
Folium	Orange	#FB923C	Basic maps, markers & popups
Practice	Yellow	#FBBF24	Quiz, lab assignments

Visual Elements 🖼️

• Code blocks with syntax highlighting and copy button
• Chart.js visualizations simulating library outputs
• Interactive component demos (radio, checkbox, slider)
• Map previews with Leaflet.js integration
• Progress tracking in sidebar and top bar
• Lesson checkmarks for completed content

---

🛠️ Technical Implementation

Architecture

┌─────────────────────────────────────┐
│         PyViz Lab Platform           │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Module Navigation          │   │
│  │   • 6 modules               │   │
│  │   • Color-coded tabs        │   │
│  │   • Active state tracking   │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Sidebar Lessons           │   │
│  │   • 14 lessons total        │   │
│  │   • Module visibility       │   │
│  │   • Completion tracking     │   │
│  │   • Progress bar            │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Content Area              │   │
│  │   • Lesson panels           │   │
│  │   • Interactive charts      │   │
│  │   • Code blocks             │   │
│  │   • Component demos         │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Chart.js Integration      │   │
│  │   • 20+ chart types         │   │
│  │   • 5+ dataset presets      │   │
│  │   • Dynamic updates         │   │
│  │   • Chart registry cleanup  │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Leaflet Maps              │   │
│  │   • 2 map instances         │   │
│  │   • 5 location presets      │   │
│  │   • 3 tile layers           │   │
│  │   • Marker clusters         │   │
│  │   • Heatmap simulation      │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Practice Engine           │   │
│  │   • 6 quiz questions        │   │
│  │   • Code validation lab     │   │
│  │   • Real-time feedback      │   │
│  │   • Progress tracking       │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

Key Functions

// Navigation
setModule(mod)                     // Switch between main modules
setLesson(lesson, btn)              // Switch lessons within module
nextLesson()                         // Advance to next lesson
markDone()                           // Mark current lesson complete
updateProgress()                     // Update all progress indicators

// Chart Management
destroyChart(id)                     // Clean up existing chart
updatePlotlyChart()                  // Update Plotly chart
updateMplChart()                      // Update Matplotlib chart
updateSnsChart()                      // Update Seaborn chart

// Map Management
initMaps()                            // Initialize Leaflet maps
updateMap()                            // Update map with new settings

// Practice Engine
initQuiz()                             // Build quiz interface
answerQuiz(qi, ai, btn)                // Check quiz answer
checkLab()                              // Validate lab code
showHint()                              // Show lab hint

// Utilities
copyCode(btn)                           // Copy code to clipboard
toast(msg, color)                        // Show toast notification

---

📊 Data Visualization Implementations

Chart.js Integration 📈

Chart Type	Datasets	Features
Line	Multiple series	Tension, fill, hover points
Bar	Single/Multi	Border radius, gradients
Scatter	Point data	Size, color, trend lines
Pie/Doughnut	12+ slices	Custom colors, hover
Histogram	Frequency bins	Automatic binning

Seaborn Simulated Data 📊

• Histogram with KDE — Gaussian kernel density estimation
• Violin plots — Full distribution + median markers
• Box plots — IQR, whiskers, outliers
• Regression plots — Scatter + OLS line with R²

Leaflet Map Features 🗺️

• 3 tile providers — OSM, Carto Light, Carto Dark
• 5 locations — NYC, London, Tokyo, Sydney, Chicago
• Circle markers with color and popups
• Marker clusters for dense points
• Heatmap layer (simulated)

---

🎥 Video Demo Script (60-75 seconds)

Time	Module	Scene	Action
0:00	Header	Logo	Show PyViz Lab with gradient brand mark
0:05	Dash	App Structure	Show Flight Delay Dashboard preview with dropdowns
0:10	Dash	Components	Interact with slider → live value updates
0:15	Plotly	Chart Types	Switch from Line to Bar → chart updates
0:20	Plotly	Dataset	Change from Airline to Revenue → data updates
0:25	Matplotlib	Basic Plots	Switch from Line to Area → style changes
0:30	Seaborn	Distribution	Adjust bins slider from 20→30 → histogram updates
0:35	Seaborn	Regression	Show scatter plot with OLS line and R²
0:40	Folium	Basic Maps	Change location from NYC to Tokyo → map moves
0:45	Folium	Markers	Show marker popup with HTML content
0:50	Practice	Quiz	Answer question correctly → green feedback
0:55	Practice	Lab	Submit code → 6/6 checks passed
1:00	Close	Progress	Show progress bar at 100%

---

🚦 Performance

• Load Time: < 2.5 seconds (CDN dependencies)
• Memory Usage: < 50 MB
• CPU Usage: Minimal (event-driven)
• Network: Chart.js, Leaflet from CDNs

Dependencies 📦

• Chart.js — v4.4.0
• Leaflet — v1.9.4

---

🛡️ Security Notes

PyViz Lab is a completely safe educational platform:

• ✅ No data collection or tracking
• ✅ All calculations run in browser memory
• ✅ Chart.js and Leaflet from trusted CDNs
• ✅ Pure HTML/CSS/JavaScript frontend
• ✅ Educational purposes only — learn Python visualization concepts

---

📝 License

MIT License — see LICENSE file for details.

---

🙏 Acknowledgments

• Dash/Plotly — Interactive web app framework
• Matplotlib — Foundational Python visualization library
• Seaborn — Statistical visualization toolkit
• Folium — Python ↔ Leaflet.js bridge
• Chart.js — Beautiful open-source charting library
• Leaflet.js — Lightweight mapping library

---

📧 Contact

• GitHub Issues: Create an issue
• Website: https://willie-conway.github.io/PyViz-Lab/

---

🏁 Future Enhancements

• Add more modules (Bokeh, Altair, ggplot)
• Increase quiz questions to 12+
• Add more datasets (20+ total)
• Include real Plotly/Dash embed
• Add user accounts for progress saving
• Export certificates of completion
• Add dark/light theme toggle
• Include video tutorials
• Add challenge mode with timed exercises
• Integrate real Python execution (Pyodide)

---

📊 PyViz Lab — Master Python Data Visualization Through Interactive Learning 📊

---

Last updated: March 2025