🌳 Decision Tree Visualizer - Interactive Learning Platform

An interactive educational web application that makes machine learning decision trees easy to understand for everyone! Learn through animations, step-by-step visualizations, hands-on experimentation, and quizzes - designed specifically for beginners .

Features

Introduction Page

• Animated Step-by-Step Tutorial: Learn decision tree basics with real-world examples
• Visual Explanations: Understand Gini vs Entropy with interactive comparisons
• Real-World Context: See how decision trees solve actual problems

Interactive Playground

• Dataset Selection:

  • 6 built-in datasets (Moons, Circles, Iris, Wine, Breast Cancer, Digits)
  • Upload your own CSV file
  • "What do these terms mean?" guide for every concept
  • Clear dataset information with sample counts and feature descriptions

• Hyperparameter Controls:

  • Tree Depth: How many questions to ask
  • Splitting Rules: When to split data (hover tooltips explain everything)
  • Leaf Size: Minimum group size
  • Decision Method: Choose how to organize data

• Step-by-Step Tree Visualization:

  • Watch your tree grow one level at a time
  • AI narrator explains each decision in plain English
  • Click nodes to see detailed explanations

• Decision Boundary: 2D visualization showing how the tree makes decisions

• Metrics Dashboard (Know if your model is good or bad!):

Quiz Mode

Tech Stack

Backend

• FastAPI: Python web framework
• scikit-learn: Machine learning library for decision trees
• NumPy/Pandas: Data manipulation and processing
• Uvicorn: ASGI server for production deployment

Frontend

• React 18 with TypeScript: Modern, type-safe UI
• Vite 5: Lightning-fast build tool
• TailwindCSS 3: Utility-first styling
• Zustand: Lightweight state management
• Framer Motion: Smooth animations
• D3.js v7: Interactive tree visualization
• Recharts: Charts and graphs for metrics
• Lucide React: Beautiful icon library
• Web Speech API: AI narration for tree explanations

Installation

Prerequisites

• Python 3.8+
• Node.js 16+
• npm or yarn

Quick Start (Automated Scripts)

Windows (PowerShell):

.\start.ps1

Linux/Mac:

./start.sh

These scripts will automatically:

1. Set up Python virtual environment
2. Install backend dependencies
3. Install frontend dependencies
4. Start both servers concurrently

Manual Setup

Backend:

cd backend
pip install -r requirements.txt
python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000

Backend runs on http://localhost:8000

Frontend:

cd frontend
npm install
npm run dev

Frontend runs on http://localhost:3000

API Endpoints

Method	Endpoint	Description
GET	/api/datasets	List all available datasets
POST	/api/train	Train decision tree model with hyperparameters
GET	/api/tree-structure	Get hierarchical tree structure for visualization
GET	/api/metrics	Get model performance metrics and confusion matrix
POST	/api/predict	Make prediction with decision path trace
GET	/api/decision-boundary	Get 2D decision boundary data
POST	/api/upload-dataset	Upload custom CSV dataset
GET	/api/animated-tree	Get step-by-step tree growth data

Project Structure

ml-decision-tree-app/
├── backend/
│   ├── main.py                 # FastAPI application with all endpoints
│   ├── ml_service.py           # ML service with scikit-learn integration
│   ├── tree_builder.py         # Animated tree growth logic
│   └── requirements.txt        # Python dependencies
│
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   │   ├── IntroductionFinal.tsx      # Animated learning page
│   │   │   ├── PlaygroundRestructured.tsx # Main interactive playground
│   │   │   └── QuizNew.tsx                # Quiz page
│   │   │
│   │   ├── components/
│   │   │   ├── Navigation.tsx             # Top navigation bar
│   │   │   ├── introduction/
│   │   │   │   ├── AnimatedTreeBuilder.tsx    # Animated tree demo
│   │   │   │   ├── BasicConcepts.tsx          # Concept explanations
│   │   │   │   └── GiniEntropyComparison.tsx  # Gini vs Entropy
│   │   │   └── playground/
│   │   │       ├── InteractiveTreeVisualizer.tsx  # Step-by-step tree
│   │   │       ├── DecisionBoundary.tsx           # 2D boundary plot
│   │   │       └── MetricsDashboard.tsx           # Metrics display
│   │   │
│   │   ├── store/
│   │   │   └── useStore.ts         # Zustand state management
│   │   │
│   │   ├── services/
│   │   │   └── api.ts              # API client
│   │   │
│   │   ├── App.tsx                 # Main app component
│   │   ├── main.tsx                # Entry point
│   │   └── index.css               # Global styles
│   │
│   ├── index.html
│   ├── package.json
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   └── tsconfig.json
│
├── start.ps1                   # Windows start script
├── start.sh                    # Linux/Mac start script
├── LICENSE                     # MIT License
└── README.md                   # This file

Usage Guide

For Complete Beginners

1. Introduction Page:

   • Start here! Learn what decision trees are with animated examples
   • No prior knowledge needed - everything is explained clearly
   • See real-world applications

2. Playground:

   • Choose a dataset or upload your own CSV file
   • Click "What do these terms mean?" to understand dataset info
   • Adjust settings (click the Settings Guide if unsure)
   • Click "Train Decision Tree" and watch it grow step-by-step
   • Listen to AI narrator explain each decision
   • Check metrics to see if your model is good or needs improvement

3. Quiz: Test your understanding with interactive questions

Deployment Options

Option : Docker

• Backend: Dockerfile for FastAPI + Uvicorn
• Frontend: Nginx to serve static files
• Use Docker Compose for orchestration

📊 Screenshots

Introduction Page

Playground - Dataset Selection

Playground - Comprehensive hyperparameters

Playground - Step-by-Step Tree Visualization

Playground -

Playground - Quiz

🤝 Contributing

Contributions are welcome! This project aims to make ML education accessible to everyone.

How to Contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - Free to use for educational and commercial purposes.