🚀 Interactive K-Nearest Neighbors Visualization

A stunning, interactive visualization of the K-Nearest Neighbors (KNN) machine learning algorithm built with JavaScript and p5.js.

🎬 Live Demo

Move your mouse around to see the KNN algorithm classify in real-time! The algorithm finds the 3 nearest neighbors and predicts the class based on majority vote.

🌟 Features

• Interactive Classification: Move your mouse around the canvas to see real-time KNN classification
• Beautiful Visual Design: Eye-catching emojis (🔥 for high energy, 💎 for precision) with gradient backgrounds
• Educational: Clear visualization of how KNN algorithm works with connecting lines to nearest neighbors
• Professional UI: Modern, responsive design with glass morphism effects
• Real-time Algorithm: See the 3-nearest neighbors algorithm in action

🎯 How It Works

1. Data Points: 30 randomly generated points classified into two categories

   • 🔥 Fire Points: High energy data points (orange-red)
   • 💎 Diamond Points: Precision data points (turquoise)

2. Classification: As you move your mouse:

   • Algorithm finds the 3 nearest data points
   • Classifies your mouse position based on majority vote
   • Shows connecting lines to the nearest neighbors
   • Displays the predicted class with confidence

3. Visualization Features:

   • Gradient background for visual appeal
   • Variable-sized symbols for depth
   • Smooth animations and hover effects
   • Professional axis labeling with emojis

🛠️ Tech Stack

• JavaScript - Core programming language
• p5.js - Creative coding library for visualization
• HTML5 - Structure and canvas integration
• CSS3 - Modern styling with gradients and glass effects
• Machine Learning - K-Nearest Neighbors algorithm implementation

🚀 Getting Started

1. Clone or Download this repository
2. Open index.html in your web browser
3. Move your mouse around the canvas to see the classification in action
4. Observe how the algorithm finds nearest neighbors and makes predictions

📊 Algorithm Details

K-Nearest Neighbors (KNN):

• K Value: 3 (finds 3 nearest neighbors)
• Distance Metric: Euclidean distance
• Classification: Majority voting among nearest neighbors
• Features: 2D coordinate space (Health vs Power Level)

🎨 Visual Elements

• Responsive Design: Works on desktop and mobile
• Modern UI: Glass morphism and gradient effects
• Interactive Canvas: Real-time mouse tracking
• Professional Typography: Clean, readable fonts
• Color Coding: Intuitive color scheme for different classes

💡 Educational Value

This project offers valuable educational and professional impact by illustrating machine learning concepts, showcasing data visualization techniques, and demonstrating interactive coding skills that strengthen both learning and portfolio presentation

🔧 Customization

Easy to modify:

• Change the number of data points in script.js
• Adjust K value for different neighbor counts
• Modify colors and symbols in the display functions
• Update canvas size for different aspect ratios

📱 Browser Compatibility

• ✅ Chrome (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Mobile browsers

---

Built with ❤️ for learning and demonstration purposes

This project showcases practical implementation of machine learning algorithms with modern web technologies.