DW://master is an interactive learning platform for data warehousing concepts, featuring:

• 5 Core Modules covering foundational DW concepts
• Interactive Schema Design (Star vs Snowflake)
• SCD Type Simulations (Type 0–4)
• AI-Powered Tutor (Claude Sonnet 4)
• SQL Lab with AI assistance

• Left navigation with icon buttons
• Animated fade-up transitions when switching concepts
• Attribute grid showing 6 key characteristics
• Concept chips for quick reference tags
• Gradient accent border matching concept color

• Hover any node to highlight connections
• Animated dashed connectors between tables
• Field lists displayed inside fact table
• Color coding:
  • 🔵 Fact tables — blue (#38bdf8)
  • 🟢 Dimensions — teal (#00ffc6)
  • 🟣 Sub-dimensions — pink (#f472b6)

• Initial state: Customer "Jane Doe" at "123 Old St"
• Apply change: "Jane Doe moved to 456 New Ave"
• Watch each SCD type handle it differently:
  • Type 1: Overwrites address directly (no history)
  • Type 2: Adds new row with start/end dates, deactivates old
  • Type 3: Adds "previous address" column
  • Type 4: (Simulated in separate history table)

• Row flash animation when changes occur
• Color-coded rows by SCD type
• Status badges for current/active rows
• Date tracking for Type 2 (start/end)

• Formatted output with currency styling
• NULL values displayed as "—" or "NULL"
• Key insights panel explaining each query type
• Animated row entrance with staggered timing

• Natural language to SQL: Describe what you want
• Powered by Claude Sonnet 4: Generates accurate SQL
• Live streaming response with typing cursor
• Syntax highlighting in generated code

Example inputs:

• "Total sales by region and year with subtotals using ROLLUP"
• "Sales per product category with grouping sets for product and region"
• "CUBE query showing all combinations of salesperson and car class"

• Pulsing status dot indicating active connection
• Message history with user/AI distinction
• Typing cursor during streaming responses
• Loading indicators with animated dots
• Suggestion chips for quick questions
• Auto-scroll to latest messages

• Deep black background (#030712) — maximum contrast for code and diagrams
• Teal accent (#00ffc6) for data warehousing concepts
• Violet (#818cf8) for schema design
• Pink (#f472b6) for SCD types
• Sky blue (#38bdf8) for Watsonx.data
• Amber (#fb923c) for SQL analytics
• Grid background with subtle 40px lines

• Outfit — UI text, body copy, labels
• JetBrains Mono — Code blocks, SQL, technical data
• Cormorant Garamond — Section headers, concept titles

• Glass morphism panels with backdrop blur
• Gradient borders with animated glow
• Pulse animations for status indicators
• Connector lines with dash animations
• Row flash animations for SCD updates
• Fade-up entrance for content transitions

┌─────────────────────────────────────┐
│        DW://master Platform         │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Module Router             │   │
│  │   • 5 sections              │   │
│  │   • Sticky navigation       │   │
│  │   • Animated transitions    │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   Content Modules           │   │
│  │   • Concepts (4 concepts)  │   │
│  │   • Schemas (2 + SVG)      │   │
│  │   • SCD (5 types + sim)    │   │
│  │   • Watsonx (6 features)   │   │
│  │   • SQL (4 queries + AI)   │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │   AI Tutor (Claude Sonnet 4)│   │
│  │   • Module-specific context │   │
│  │   • Streaming responses    │   │
│  │   • Suggestion chips       │   │
│  │   • Message history        │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

// AI Integration
streamClaude(systemPrompt, userMessage, onChunk, onDone)  // Claude API streaming

// SVG Diagram
getCenter(n)                        // Calculate node center for connectors
edges.map(([a, b]) => line)         // Render connector lines

// SCD Simulation
simulate()                           // Apply change based on selected SCD type
reset()                              // Reset to initial state

// SQL Highlighting
highlightSQL(code)                    // Syntax highlighting for SQL
hexToRgb(hex)                          // Convert hex to RGB for opacity

// UI Helpers
injectStyles()                         // Inject global CSS
renderSection()                         // Render active module

• Load Time: < 2 seconds
• Memory Usage: < 40 MB
• API Calls: Real-time Claude Sonnet 4 (when used)
• Animations: CSS-based, hardware accelerated

• React 18
• Claude Sonnet 4 API
• No external CSS — Pure inline styles with injected CSS

DW://master is an educational platform:

• ✅ No data collection or tracking
• ✅ Claude API calls made directly from browser
• ✅ No authentication required (public API)
• ✅ Educational purposes only — learn data warehousing concepts

MIT License — see LICENSE file for details.

• IBM — Watsonx.data architecture and lakehouse concepts
• Ralph Kimball — Data warehousing methodology
• Bill Inmon — Corporate information factory
• Claude Sonnet 4 — AI tutoring capabilities
• JetBrains — Mono font for code

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

• Add more SCD examples (Type 6, Type 7)
• Include ETL pipeline visualization
• Add data modeling exercises
• Include dimensional modeling patterns
• Add OLAP cube browser
• Include fact table types (transactional, periodic snapshot)
• Add data vault modeling
• Include query performance metrics
• Add export functionality for SQL results
• Include benchmark comparisons of different architectures

🏛️ DW://master — Master Data Warehousing Through Interactive Learning 🏛️

Last updated: March 2026